/* ============================================================
   JÂN PLAZA — DESIGN TOKENS
   ------------------------------------------------------------
   Extracted verbatim from design/jan-plaza-design-system.html
   (sections 1–3). This file is the SINGLE SOURCE of colour,
   type, spacing, radius, shadow and motion.

   Do not hardcode any of these values elsewhere. Any new value
   belongs here first, or it does not belong in the project.
   Re-extract after any design-system change; guards.test.js
   fails if this drifts.
   ============================================================ */

/* ---------- FONTS — Paykan Pro ---------- */
@font-face{font-family:'Paykan';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/Paykan-Light.woff2') format('woff2'),url('../fonts/Paykan-Light.woff') format('woff')}
@font-face{font-family:'Paykan';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/Paykan-Regular.woff2') format('woff2'),url('../fonts/Paykan-Regular.woff') format('woff')}
@font-face{font-family:'Paykan';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/Paykan-Regular.woff2') format('woff2'),url('../fonts/Paykan-Regular.woff') format('woff')}
@font-face{font-family:'Paykan';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/Paykan-Bold.woff2') format('woff2'),url('../fonts/Paykan-Bold.woff') format('woff')}
@font-face{font-family:'Paykan';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/Paykan-Black.woff2') format('woff2'),url('../fonts/Paykan-Black.woff') format('woff')}
@font-face{font-family:'Paykan';font-style:normal;font-weight:950;font-display:swap;
  src:url('../fonts/Paykan-ExtraBlack.woff2') format('woff2'),url('../fonts/Paykan-ExtraBlack.woff') format('woff')}

/* ============================================================
   1. FOUNDATIONS — RAW SCALES
   ============================================================ */
:root{
  /* JÂN Green */
  /* Sampled from the architect's own drawings (marked ★), with the brand
     colour #0F2A12 anchored at 900. Because the base is already this dark
     there is no room to darken, so hover/active go lighter, not darker. */
  --green-50:#F1F5F2;  --green-100:#E1E6E2; /*★*/ --green-200:#C6D0C8; /*★*/
  --green-300:#B3C8B9; /*★ arcade fill*/    --green-400:#9CB1A2;
  --green-500:#859A8B; /*★ mid sage*/       --green-600:#6B8372;
  --green-700:#516C59; /*★ mihrab*/         --green-800:#2D4832;
  --green-900:#0F2A12; /*★ brand*/          --green-950:#09180A;

  /* Charcoal */
  --ink-0:#FFFFFF;   --ink-50:#F7F8F9;  --ink-100:#EFF1F3; --ink-200:#DFE2E7;
  --ink-300:#C2C7CE; --ink-400:#9AA0AA; --ink-500:#686E78; --ink-600:#565C66;
  --ink-700:#3D424B; --ink-800:#2A2E35; --ink-900:#1C1F24; --ink-950:#14161A;

  /* Spacing — 4px base */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* Radius — deliberately tight */
  --r-none:0; --r-xs:2px; --r-sm:4px; --r-md:8px; --r-full:999px;
  --arch:50% 50% var(--r-sm) var(--r-sm) / 28% 28% 0 0;

  /* Type scale */
  --fs-d1:clamp(2.5rem,1.6rem + 4vw,4rem);
  --fs-d2:clamp(2rem,1.4rem + 2.8vw,3rem);
  --fs-h1:clamp(1.75rem,1.35rem + 1.8vw,2.5rem);
  --fs-h2:clamp(1.5rem,1.25rem + 1.1vw,2rem);
  --fs-h3:1.5rem; --fs-h4:1.25rem; --fs-lg:1.125rem;
  --fs-md:1rem;   --fs-sm:.875rem;  --fs-xs:.75rem;

  /* Weights */
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-black:950;

  /* Motion */
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:400ms;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* Layout */
  --container:1280px;
  --header-h:72px;

  /* Typography per script — swapped by [data-lang] */
  --font-display:'Paykan','Jost',system-ui,sans-serif;
  --font-body:'Paykan','Jost',system-ui,sans-serif;
  --lh-body:1.8;
  --lh-heading:1.45;
  --ls-overline:0;
  --w-display:var(--fw-black);
  --w-heading:var(--fw-bold);
  --w-strong:var(--fw-bold);
}

html[data-lang="en"]{
  --font-display:'Jost',system-ui,sans-serif;
  --font-body:'Jost',system-ui,sans-serif;
  --lh-body:1.6;
  --lh-heading:1.2;
  --ls-overline:.12em;
  --w-display:600;
  --w-heading:500;
  --w-strong:500;
}

/* ============================================================
   2. SEMANTIC TOKENS — LIGHT
   ============================================================ */
html[data-theme="light"]{
  --c-bg:#FFFFFF;
  --c-bg-subtle:#F7F8F9;
  --c-bg-inset:#EFF1F3;
  --c-bg-inverse:#14161A;
  --c-surface:#FFFFFF;
  --c-surface-raised:#FFFFFF;

  --c-brand:#0F2A12;
  --c-brand-hover:#2D4832;
  --c-brand-active:#516C59;
  --c-brand-subtle:#F1F5F2;
  --c-brand-subtle-hover:#E1E6E2;
  --c-on-brand:#FFFFFF;

  --c-text:#14161A;
  --c-text-secondary:#565C66;
  --c-text-muted:#686E78;
  --c-text-brand:#2D4832;
  --c-text-inverse:#FFFFFF;

  --c-border:#DFE2E7;
  --c-border-strong:#C2C7CE;
  --c-border-brand:#0F2A12;
  --c-focus:#516C59;
  --c-overlay:rgba(20,22,26,.6);

  /* The footer is always dark. It does NOT use --c-bg-inverse, which would
     flip it to white in dark mode. */
  --c-footer-bg:#14161A;
  --c-footer-text:#FFFFFF;

  --c-success:#1F7A4D; --c-success-bg:#E9F5EF; --c-success-text:#145A38;
  --c-warning:#B8860B; --c-warning-bg:#FBF3E0; --c-warning-text:#7A5A07;
  --c-danger:#A8322D;  --c-danger-bg:#FBECEB;  --c-danger-text:#7D2521;
  --c-info:#2C5F7C;    --c-info-bg:#E9F1F6;    --c-info-text:#1F4657;

  --sh-1:0 1px 2px rgba(20,22,26,.06), 0 1px 3px rgba(20,22,26,.04);
  --sh-2:0 2px 6px rgba(20,22,26,.07), 0 6px 16px rgba(20,22,26,.05);
  --sh-3:0 8px 24px rgba(20,22,26,.09), 0 16px 48px rgba(20,22,26,.07);
  --skeleton:linear-gradient(90deg,#EFF1F3 25%,#DFE2E7 37%,#EFF1F3 63%);
}

/* ============================================================
   3. SEMANTIC TOKENS — DARK
   Only this block changes. No component is rewritten for dark.
   NOTE: #0F2A12 measures 1.2:1 on #14161A and is invisible there, so
   brand green lightens to the drawings' mid sage #859A8B. One shift only.
   ============================================================ */
html[data-theme="dark"]{
  --c-bg:#14161A;
  --c-bg-subtle:#1C1F24;
  --c-bg-inset:#2A2E35;
  --c-bg-inverse:#FFFFFF;
  --c-surface:#1C1F24;
  --c-surface-raised:#2A2E35;

  --c-brand:#859A8B;
  --c-brand-hover:#9CB1A2;
  --c-brand-active:#B3C8B9;
  --c-brand-subtle:#16241A;
  --c-brand-subtle-hover:#1F3324;
  --c-on-brand:#0F2A12;

  --c-text:#F7F8F9;
  --c-text-secondary:#C2C7CE;
  --c-text-muted:#9AA0AA;
  --c-text-brand:#B3C8B9;
  --c-text-inverse:#14161A;

  --c-border:#2A2E35;
  --c-border-strong:#3D424B;
  --c-border-brand:#859A8B;
  --c-focus:#B3C8B9;
  --c-overlay:rgba(0,0,0,.72);

  /* Deep green-black: separates the footer from the page without going white. */
  --c-footer-bg:#09180A;
  --c-footer-text:#F7F8F9;

  --c-success:#3FA76D; --c-success-bg:#12281D; --c-success-text:#7ED0A2;
  --c-warning:#D9A82A; --c-warning-bg:#2B2210; --c-warning-text:#E8C877;
  --c-danger:#D9615A;  --c-danger-bg:#2E1615;  --c-danger-text:#F0958F;
  --c-info:#5B9BC0;    --c-info-bg:#12222B;    --c-info-text:#93C4DF;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 8px rgba(0,0,0,.5);
  --sh-3:0 8px 32px rgba(0,0,0,.6);
  --skeleton:linear-gradient(90deg,#1C1F24 25%,#2A2E35 37%,#1C1F24 63%);
}