/* ==========================================================================
   Meridian — Design Tokens
   Implements docs/DESIGN_SYSTEM.md v1.0 Part A. Three tiers:
   primitives → semantic (theme-aware) → component (defined per component).
   Components consume SEMANTIC tokens exclusively. No raw hex below this file.

   Contrast-corrected primitives approved 2026-07-07 (M1 validation) —
   history and rationale in site/PROOF_VALIDATION.md.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     TIER 1 — PRIMITIVES (never referenced by components directly)
     -------------------------------------------------------------------- */

  /* Brand (Brand Guide §13, unchanged) */
  --charcoal: #14151A;            /* = neutral-900 */
  --offwhite: #F5F2EC;            /* = neutral-0 */
  --bronze-500: #B08D57;          /* dark grounds only; decorative-only on light */
  --bronze-700: #876A3B;          /* 4.52:1 on offwhite — corrected from #8A6C3C (4.38:1), approved 2026-07-07 */
  --teal-500: #3E6259;            /* dataviz, light grounds */
  --teal-400: #52796F;            /* dataviz, dark grounds */

  /* Warm neutral ramp (spec A2 draft, contrast-validated 2026-07-07) */
  --neutral-100: #E9E5DC;
  --neutral-200: #D6D1C6;
  --neutral-300: #B8B3A8;         /* disabled only — 1.87:1, never placeholder text */
  --neutral-500: #6E6A62;         /* 4.82:1 on offwhite — passes AA */
  --neutral-600: #4C4943;
  --neutral-700: #33312D;
  --neutral-800: #22211E;

  /* Semantic-state primitives — contrast-corrected values approved 2026-07-07 */
  --green-600: #58755B;           /* 4.57:1 on offwhite (was #5F7E62, 4.04) */
  --gold-600: #856A30;            /* 4.58:1 on offwhite (was #A8863D, 3.06) */
  --red-600: #9C5148;             /* 5.10:1 on offwhite — unchanged */
  /* Dark-ground companions (approved 2026-07-07) — single-hex drafts couldn't serve both grounds */
  --green-400: #8FAE92;           /* 7.50:1 on charcoal */
  --gold-400: #C9A968;            /* 8.12:1 on charcoal */
  --red-400: #C08078;             /* 5.73:1 on charcoal */

  /* Type primitives — faces (configurable registry; free defaults, nothing purchased) */
  --font-display-latin: "Fraunces", "Georgia", serif;      /* [DISPLAY_FONT_LATIN] */
  --font-body-latin: "Inter", system-ui, -apple-system, sans-serif;
  --font-display-arabic: "Amiri", serif;                    /* [DISPLAY_FONT_ARABIC] */
  --font-body-arabic: "IBM Plex Sans Arabic", system-ui, sans-serif;

  /* Fraunces axis lock (binding — default-axis Fraunces is forbidden) */
  --display-axes: "opsz" 144, "SOFT" 0, "WONK" 0;

  /* Fluid type scale — 390px → 1200px, spec A3 targets */
  --text-display-xl: clamp(2.5rem, 1.54rem + 3.95vw, 4.5rem);      /* 40 → 72 */
  --text-display: clamp(2rem, 1.34rem + 2.72vw, 3.375rem);         /* 32 → 54 */
  --text-h2: clamp(1.5625rem, 1.11rem + 1.85vw, 2.5rem);           /* 25 → 40 */
  --text-h3: clamp(1.25rem, 0.95rem + 1.23vw, 1.875rem);           /* 20 → 30 */
  --text-h4: clamp(1.125rem, 1rem + 0.49vw, 1.375rem);             /* 18 → 22 */
  --text-body-lg: clamp(1.125rem, 1.07rem + 0.25vw, 1.25rem);      /* 18 → 20 */
  --text-body: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);           /* 16 → 17 */
  --text-small: 0.875rem;                                          /* 14 */
  --text-caption: 0.75rem;                                         /* 12 — absolute floor */

  --leading-display-xl: 1.05;
  --leading-display: 1.1;
  --leading-h2: 1.15;
  --leading-h3: 1.25;
  --leading-h4: 1.3;
  --leading-body: 1.6;
  --leading-small: 1.5;
  --leading-caption: 1.4;

  --tracking-caption: 0.02em;
  --tracking-lockup: 0.04em;      /* text lockup: tracked +4% */

  /* Spacing — 4px base, 8-point grid (spec A4) */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */
  --space-40: 10rem;    /* 160 */

  /* Section rhythm (responsive pairs, mobile → desktop) */
  --section-sm: clamp(4rem, 3.04rem + 3.95vw, 6rem);     /* 64 → 96 */
  --section-md: clamp(6rem, 5.04rem + 3.95vw, 8rem);     /* 96 → 128 */
  --section-lg: clamp(8rem, 7.04rem + 3.95vw, 10rem);    /* 128 → 160 */

  /* Layout (spec A5) */
  --container-content: 45rem;     /* 720px — long-form measure ≈70ch */
  --container-standard: 75rem;    /* 1200px */
  --container-wide: 90rem;        /* 1440px */
  --gutter: 1rem;                 /* 16px mobile */

  /* Motion (spec A8) */
  --duration-micro: 150ms;
  --duration-standard: 250ms;
  --duration-large: 400ms;
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);      /* ease-out */
  --ease-state: cubic-bezier(0.4, 0, 0.2, 1);    /* ease-in-out */
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; }     /* 24px desktop gutters */
}

/* --------------------------------------------------------------------
   TIER 2 — SEMANTIC (theme-aware; the only tokens components may use)
   Dark theme = marketing surfaces (default). Light theme = documents,
   long reading. Both first-class, exactly one token layer apart.
   -------------------------------------------------------------------- */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --surface-primary: var(--charcoal);
  --surface-raised: var(--neutral-700);
  --surface-inverse: var(--offwhite);

  --text-primary: var(--offwhite);
  --text-secondary: var(--neutral-300);   /* on dark: 8.2:1 — passes */
  --text-inverse: var(--charcoal);
  --text-disabled: var(--neutral-500);

  --border-subtle: var(--neutral-800);
  --border-strong: var(--neutral-700);

  --accent: var(--bronze-500);            /* meaning-bearing bronze on dark */
  --accent-decorative: var(--bronze-500);

  --state-success: var(--green-400);
  --state-warning: var(--gold-400);
  --state-error: var(--red-400);

  --dataviz: var(--teal-400);

  --focus-ring: var(--bronze-500);        /* A7: one semantic focus token */
  --disabled-fill: var(--neutral-700);

  /* Elevation ramp (BRAND_GUIDE §25 — governed depth, not ad-hoc box-shadow).
     Restrained by design: on charcoal, elevation reads mostly through the
     lighter --surface-raised fill; the shadow only deepens the edge so a
     raised element separates from the ground. Quiet Authority, not a SaaS
     drop-shadow. Three steps only: rest → raised → overlay(future modal). */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.20);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.32), 0 10px 24px rgba(0, 0, 0, 0.28);
  --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.40), 0 24px 60px rgba(0, 0, 0, 0.44);
}

[data-theme="light"] {
  color-scheme: light;

  --surface-primary: var(--offwhite);
  --surface-raised: var(--neutral-100);
  --surface-inverse: var(--charcoal);

  --text-primary: var(--charcoal);
  --text-secondary: var(--neutral-500);
  --text-inverse: var(--offwhite);
  --text-disabled: var(--neutral-500);   /* on neutral-200 fill — never same value as the fill */

  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-300);

  --accent: var(--bronze-700);            /* two-bronze rule: meaning on light = bronze-700 */
  --accent-decorative: var(--bronze-500); /* decorative-only on light */

  --state-success: var(--green-600);
  --state-warning: var(--gold-600);
  --state-error: var(--red-600);

  --dataviz: var(--teal-500);

  --focus-ring: var(--charcoal);
  --disabled-fill: var(--neutral-200);

  /* Light-ground elevation — soft warm-grey shadows (never black on paper);
     tuned so a raised card lifts off off-white without a hard edge. */
  --shadow-1: 0 1px 2px rgba(51, 49, 45, 0.06), 0 2px 6px rgba(51, 49, 45, 0.08);
  --shadow-2: 0 2px 4px rgba(51, 49, 45, 0.08), 0 10px 24px rgba(51, 49, 45, 0.12);
  --shadow-3: 0 8px 20px rgba(51, 49, 45, 0.12), 0 24px 60px rgba(51, 49, 45, 0.16);
}

/* --------------------------------------------------------------------
   Arabic overrides — token-level via :lang(ar), never per-page hacks.
   Size ×1.1, line-height 1.7–1.8, tracking 0 (spec A3/A6).
   -------------------------------------------------------------------- */

:lang(ar) {
  --font-display-latin: var(--font-display-arabic);
  --font-body-latin: var(--font-body-arabic);
  --display-axes: normal;                 /* Amiri is not variable */

  --text-display-xl: clamp(2.75rem, 1.69rem + 4.35vw, 4.95rem);
  --text-display: clamp(2.2rem, 1.47rem + 2.99vw, 3.7125rem);
  --text-h2: clamp(1.72rem, 1.22rem + 2.04vw, 2.75rem);
  --text-h3: clamp(1.375rem, 1.05rem + 1.35vw, 2.0625rem);
  --text-h4: clamp(1.2375rem, 1.1rem + 0.54vw, 1.5125rem);
  --text-body-lg: clamp(1.2375rem, 1.18rem + 0.28vw, 1.375rem);
  --text-body: clamp(1.1rem, 1.07rem + 0.13vw, 1.16875rem);
  --text-small: 0.9625rem;
  --text-caption: 0.825rem;

  --leading-body: 1.75;
  --leading-small: 1.7;
  --leading-h2: 1.4;
  --leading-h3: 1.5;
  --leading-display-xl: 1.3;
  --leading-display: 1.35;

  --tracking-caption: 0;
  --tracking-lockup: 0;
}