/* ─────────────────────────────────────────────────────────────────────────
 * site/design/tokens.css — Course Design Contract tokens (v2.1, DRAFT)
 *
 * v2 re-baseline (WP-M7-03, charter CR-33 / Dom RUL-22): the ElevenLabs-derived
 * contract is RETIRED. Values below are derived from the vendored Figma design
 * analysis at design/upstream-figma/DESIGN.md (getdesign.md public directory —
 * an independent analysis, see PROVENANCE.md), under the RESTRICTED palette:
 * lilac, mint, navy, the document's neutrals and semantic success green.
 * FORBIDDEN anywhere in this tree (hexes listed in design/gate-vocabulary.md):
 * lime, cream, pink, coral, magenta.
 *
 * Token NAMES are a frozen API (site.css, templates/auth.css,
 * certs/certificate.css, design/mocks/*.html consume them): v2 changes VALUES
 * only, plus ONE additive name — --surface-deep — documented in DESIGN.md.
 *
 * Type: Inter substitutes the proprietary figmaSans (the analysis's own stated
 * substitute); no Figma asset, name, logo or imagery is used anywhere.
 * Production self-hosts fonts; never CDN.
 *
 * v2.1 (sitting 10, Dom rulings 2026-09-17): accent family re-derived to
 * palette 25 "Ultramarine & paper" (Dom-ruled from the 87-candidate round;
 * supersedes the lilac accent and the mint supporting tint — the five
 * CR-33 forbidden hexes remain forbidden). Display face: Poppins 500
 * (OFL; Dom-ruled F4), Inter stays body/UI. Two ADDITIVE names:
 * --weight-display and --elev-glow (the V21 accent-glow CTA). Leaf motif
 * assets live in design/leaves/ (see DESIGN.md §8).
 * ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface ─── */
  --bg: #ffffff;              /* canvas — the page returns to white between blocks */
  --surface: #f7f7f5;         /* surface-soft — tiles, chips, icon buttons */
  --surface-warm: #eef0f9;    /* ultramarine wash — the supporting highlight surface (v2.1) */
  --surface-deep: #1a2260;    /* deep ultramarine block — the one deep surface (ADDITIVE, v2) */

  /* ─── Foreground ─── */
  --fg: #000000;              /* ink — headlines, primary text */
  --fg-2: #1a2260;            /* deep ultramarine ink — body copy and secondary text on light */
  --muted: #6b6b6b;           /* derived neutral — meta only, never body copy */
  --meta: var(--muted);

  /* ─── Border ─── */
  --border: #e6e6e6;          /* hairline — cards, inputs, table dividers */
  --border-soft: #f1f1f1;     /* hairline-soft — row separators, footer rules */

  /* ─── Accent (ultramarine — palette 25, sitting 10) ─── */
  --accent: #2b3a9e;          /* ultramarine */
  --accent-on: #ffffff;       /* white on ultramarine — 9.7:1, WCAG AA/AAA */
  --accent-hover: #212e82;
  --accent-active: #1a2260;

  /* ─── Semantic ─── */
  --success: #1ea64a;         /* glyph/indicator fill (doc: checkmarks), not text on white */
  --warn: #a25b00;            /* derived deep amber — 5.2:1 on canvas */
  --danger: #b3261e;          /* derived deep red — 6.5:1 on canvas; NOT magenta */

  /* ─── Typography (Inter substitutes figmaSans; neutral mono stack) ─── */
  --font-display: "Poppins", "Inter", system-ui, -apple-system, sans-serif;
  --weight-display: 500;      /* Poppins display weight (ADDITIVE, v2.1) */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 12px;                          /* caption (mono, uppercase) */
  --text-sm: 14px;                          /* table and dense UI text */
  --text-base: 18px;                        /* doc body */
  --text-lg: 20px;                          /* body-lg, links, button labels */
  --text-xl: 24px;                          /* card-title */
  --text-2xl: 26px;                         /* headline / subhead */
  --text-3xl: clamp(30px, 4.5vw, 44px);     /* section openers */
  --text-4xl: clamp(40px, 7.5vw, 72px);     /* display — doc 86/64 clamped for our content */

  --leading-body: 1.42;                     /* doc 1.45 − Inter x-height compensation */
  --leading-tight: 1.05;                    /* doc display 1.00–1.10 */
  --tracking-display: -0.02em;              /* doc −1.72px @86px */
  --tracking-body: -0.01em;                 /* doc −0.14/−0.26px at body sizes */

  /* ─── Spacing (doc base unit 8px) ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;   /* card interior padding */
  --space-8: 32px;
  --space-12: 48px;  /* colour-block interior padding */

  --section-y-desktop: 96px;  /* doc rhythm constant */
  --section-y-tablet: 64px;
  --section-y-phone: 48px;

  /* ─── Radius ─── */
  --radius-sm: 8px;       /* inputs, image frames (doc md) */
  --radius-md: 16px;      /* small cards, banners */
  --radius-lg: 24px;      /* colour-block sections, cards (doc lg) */
  --radius-pill: 9999px;  /* every CTA and icon button (doc pill/full) */

  /* ─── Elevation (shadow-light: colour blocks carry depth) ─── */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px #e6e6e6;
  --elev-raised: 0 4px 16px rgba(0, 0, 0, 0.06);
  --elev-warm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --elev-glow: 0 0 18px rgba(43, 58, 158, 0.45); /* V21 accent-glow CTA (ADDITIVE, v2.1) */

  /* ─── Focus (two-layer so it reads on canvas, mint and navy alike) ─── */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #1a2260;

  /* ─── Motion ─── */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ─── Layout ─── */
  --container-max: 1280px;
  --container-gutter-desktop: 48px;
  --container-gutter-tablet: 32px;
  --container-gutter-phone: 24px;
}