/* ============================================================
   Y2Lead Website 2.0 — Canonical Design Tokens
   Source of truth: WP-001C — Canonical Design Tokens & Scales (RC1)
   Rule: no visual value may exist in implementation without a
   token behind it (WP-001C §1). Mapping is mechanical:
   token `color.ink.primary` → variable `--color-ink-primary`.
   Stability classes: [C] constitutional · [A] architectural
   ============================================================ */

:root {
  /* ---- Typography (WP-001C §3) ---------------------------- */
  --type-family-primary: "Inter", var(--type-family-fallback);        /* [A] */
  --type-family-fallback: -apple-system, "Segoe UI", Roboto,
                          Helvetica, Arial, sans-serif;               /* [A] */

  --type-scale-monument: clamp(2.25rem, 3vw + 1rem, 3.125rem);        /* [C] 50px, floor 36px
     v1.1 (2026-07-27, owner constitutional review): reduced ~30%
     from 72px — "excessive fragmentation, reduced conceptual
     continuity." Remains the largest type on the site.           */
  --type-scale-statement: clamp(1.75rem, 3vw + 0.75rem, 2.5rem);      /* [C] 40px, floor 28px */
  --type-scale-body: 1.125rem;                                        /* [C] 18px */
  --type-scale-whisper: 0.8125rem;                                    /* [C] 13px */

  --type-lineheight-monument: 1.1;                                    /* [C] */
  --type-lineheight-statement: 1.2;                                   /* [C] */
  --type-lineheight-body: 1.7;                                        /* [C] */
  --type-lineheight-whisper: 1.5;                                     /* [C] */

  --type-weight-regular: 400;                                         /* [C] */
  --type-weight-medium: 500;                                          /* [C] */
  --type-weight-semibold: 600;                                        /* [C] site max */

  --type-tracking-display: -0.02em;                                   /* [A] */
  --type-tracking-whisper: 0.06em;                                    /* [A] uppercase whispers only */

  --type-measure-body: 65ch;                                          /* [C] */
  --type-measure-statement: 24ch;                                     /* [A] */

  /* ---- Space (WP-001C §4) — closed 8px scale --------------- */
  --space-unit: 0.5rem;   /* 8px  [C] */
  --space-1: 0.5rem;      /* 8    intra-idea        [C] */
  --space-2: 1rem;        /* 16   intra-idea        [C] */
  --space-3: 1.5rem;      /* 24   intra-idea ceil   [C] */
  --space-4: 2rem;        /* 32   inter-idea floor  [C] */
  --space-5: 3rem;        /* 48   inter-idea        [C] */
  --space-6: 4rem;        /* 64   inter-idea        [C] */
  --space-7: 6rem;        /* 96   inter-idea ceil   [C] */
  --space-8: 8rem;        /* 128  pre-section       [A] */
  --space-9: 12rem;       /* 192  inter-scene floor [A] */
  --space-section: clamp(10rem, 20vh + 4rem, 16rem);  /* [A] 256 desktop / 160 floor */

  --type-paragraph-spacing: var(--space-4);                           /* [A] */

  /* ---- Layout (WP-001C §4) --------------------------------- */
  --layout-width-narrative: 45rem;   /* 720px [A] */
  --layout-width-figure: 60rem;      /* 960px [A] */
  --layout-margin-min: 1.5rem;       /* 24px small [A]; 48px+ large via foundation.css */

  /* ---- Color (WP-001C §5) ---------------------------------- */
  --color-field: #FBFBF9;                    /* [C] the one field */
  --color-ink-primary: #1A1C1E;              /* [C] ≈15.6:1 AAA */
  --color-ink-secondary: #4A4F55;            /* [C] ≈7.6:1 AAA */
  --color-ink-whisper: #63686E;              /* [C] ≈5.4:1 AA+ */
  --color-accent: #2E5FBF;                   /* [C] wayfinding + confirmation only */
  --color-accent-active: #254D9E;            /* [A] */
  --color-ink-disabled: rgba(26, 28, 30, 0.4);   /* [A] */
  --color-hairline: rgba(26, 28, 30, 0.12);      /* [A] last-resort separator */
  --color-figure-ink: var(--color-ink-primary);  /* [C] */
  --color-figure-latent: rgba(26, 28, 30, 0.24); /* [A] */

  /* ---- Motion (WP-001C §6) --------------------------------- */
  --motion-duration-whisper: 500ms;          /* [A] */
  --motion-duration-gentle: 700ms;           /* [A] */
  --motion-duration-settle: 900ms;           /* [A] max single movement */
  --motion-duration-feedback: 150ms;         /* [A] interaction only */
  --motion-easing-calm: cubic-bezier(0.22, 0.61, 0.36, 1);   /* [C] only narrative curve */
  --motion-easing-feedback: cubic-bezier(0.4, 0, 0.2, 1);    /* [A] */
  --motion-delay-default: 0ms;               /* [A] nothing waits on timers */
  --motion-stagger-step: 180ms;              /* [A] max 4 steps per beat */
  --motion-distance-settle: 1rem;            /* [A] ≤ space-2 travel */

  /* ---- Navigation Figure (WP-001C §7) ----------------------- */
  --figure-line-width: 1.5px;                /* [C] 1px floor at small sizes */
  --figure-point-size: 8px;                  /* [C] State 01 position */
  --figure-curvature-min: 48px;              /* [C] */
  --figure-layer-separation: var(--space-3); /* [C] 24px strata */
  --figure-connection-spacing: var(--space-2);/* [C] 16px */
  /* growth ratio ≤1.25 and additive-state rule are geometric
     constraints enforced at figure construction (figure.js). */

  /* ---- Border / Radius / Elevation (WP-001C §§8–9) ---------- */
  --border-width-hairline: 1px;              /* [A] */
  --radius-none: 0;                          /* [C] editorial default */
  --radius-interactive: 6px;                 /* [A] invitations only */
  /* elevation: none site-wide; header uses hairline only. */

  /* ---- Interaction (WP-001C §10) ----------------------------- */
  --interact-focus-ring: 2px solid var(--color-accent);  /* [C] */
  --interact-focus-offset: 2px;                          /* [C] */
  --interact-pressed-opacity: 0.92;                      /* [A] */

  /* ---- Accessibility (WP-001C §11) ---------------------------
     a11y.contrast.* are verified values (see IMP-001 validation),
     a11y.target.min enforced at component level: 44px.          */
  --a11y-target-min: 44px;                   /* [C] */
}