/* ==========================================================================
   Design tokens — the single source of truth for the visual language.

   Palette sampled directly from the client's logo:
     navy   #283282  (the "Tribeca" wordmark)
     orange #fa7b24  (the "Outcomes" wordmark and the arc of dots)

   Orange measures 2.65:1 on white, so it NEVER carries text. It is a graphic
   colour only — bullets, rules, dots, underlines. Text accents use navy
   (11.24:1) or orange-700 (5.58:1).
   ========================================================================== */

:root {
  /* --- Navy ramp -------------------------------------------------------- */
  --navy-900: #0d1030;
  --navy-800: #161c4e;
  --navy-700: #1e2668;
  --navy-600: #283282;   /* logo navy */
  --navy-500: #3b47a2;
  --navy-400: #5a67c0;
  --navy-300: #8e97d8;
  --navy-200: #bcc2e9;
  --navy-100: #dee2f5;
  --navy-050: #eef0fa;

  /* --- Orange ramp ------------------------------------------------------ */
  --orange-700: #a84e13;  /* lightest orange that is safe for text on white */
  --orange-600: #c9611a;
  --orange-500: #fa7b24;  /* logo orange — graphic use only */
  --orange-400: #ff9b55;
  --orange-100: #fde6d4;

  /* --- Neutrals (cool and near-white, matching the live site) ----------- */
  --paper: #ffffff;
  --paper-sunk: #f5f6f8;
  --n-050: #f8f9fa;
  --n-100: #eef0f3;
  --n-200: #dfe2e8;
  --n-300: #c4c9d2;
  --n-400: #9aa1ad;   /* decorative only — fails AA as text */
  --n-450: #5f6575;   /* lightest text that clears AA on every surface */
  --n-500: #5a6070;
  --n-600: #414654;
  --n-700: #2b2f3a;
  --n-800: #14161a;
  --n-900: #0a0b0e;

  /* --- Semantic surface + text ------------------------------------------ */
  --bg: var(--paper);
  --bg-sunk: var(--paper-sunk);
  --bg-raised: #ffffff;
  --bg-inverse: var(--navy-900);

  --text: var(--n-800);
  --text-muted: var(--n-500);
  --text-faint: var(--n-450);
  --text-on-inverse: #ffffff;
  --text-on-inverse-muted: #aab1c4;

  --accent: var(--navy-600);
  --accent-hover: var(--navy-700);
  --accent-soft: var(--navy-050);
  --highlight: var(--orange-500);      /* graphic only */
  --highlight-text: var(--orange-700); /* when orange must carry words */

  --line: var(--n-200);
  --line-strong: var(--n-300);
  --line-inverse: rgba(255, 255, 255, 0.16);

  --focus: var(--navy-600);

  /* --- Typography ------------------------------------------------------- */
  /* The live site is sans throughout, so both roles resolve to the same
     family. Kept as two tokens so a display face can be swapped in later. */
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  --weight-display: 500;  /* big section headings read light on the live site */
  --weight-bold: 700;     /* card and column headings read bold */

  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.36vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.62vw, 1.90rem);
  --step-3:  clamp(1.73rem, 1.50rem + 1.01vw, 2.50rem);
  --step-4:  clamp(2.07rem, 1.71rem + 1.58vw, 3.30rem);
  --step-5:  clamp(2.49rem, 1.93rem + 2.44vw, 4.35rem);
  --step-6:  clamp(2.99rem, 2.14rem + 3.68vw, 5.73rem);

  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  --tracking-tight: -0.018em;
  --tracking-snug: -0.008em;
  --tracking-wide: 0.08em;

  --measure: 64ch;
  --measure-narrow: 46ch;

  /* --- Space ------------------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --section-y: clamp(3.5rem, 2rem + 7vw, 8rem);
  --gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
  --container: 75rem;
  --container-tight: 56rem;

  /* --- Shape ------------------------------------------------------------ */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* --- Elevation (tinted navy, never pure black) ------------------------ */
  --shadow-sm: 0 1px 2px rgba(13, 16, 48, 0.06), 0 1px 1px rgba(13, 16, 48, 0.04);
  --shadow: 0 2px 4px rgba(13, 16, 48, 0.05), 0 6px 16px -6px rgba(13, 16, 48, 0.14);
  --shadow-lg: 0 4px 8px rgba(13, 16, 48, 0.05), 0 18px 40px -12px rgba(13, 16, 48, 0.20);
  --shadow-focus: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus);

  /* --- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;
}

/* --- Dark mode ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0e22;
    --bg-sunk: #070914;
    --bg-raised: #131735;
    --bg-inverse: #05060f;

    --text: #eceef7;
    --text-muted: #a9b0c8;
    --text-faint: #8c93ac;
    --text-on-inverse: #ffffff;
    --text-on-inverse-muted: #aab1c4;

    --accent: var(--navy-300);
    --accent-hover: var(--navy-200);
    --accent-soft: rgba(142, 151, 216, 0.14);
    --highlight: var(--orange-400);
    --highlight-text: var(--orange-400);

    --line: rgba(255, 255, 255, 0.11);
    --line-strong: rgba(255, 255, 255, 0.22);
    --line-inverse: rgba(255, 255, 255, 0.14);

    --focus: var(--navy-300);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.7);
  }
}

:root[data-theme="dark"] {
  --bg: #0b0e22;
  --bg-sunk: #070914;
  --bg-raised: #131735;
  --bg-inverse: #05060f;

  --text: #eceef7;
  --text-muted: #a9b0c8;
  --text-faint: #8c93ac;
  --text-on-inverse: #ffffff;
  --text-on-inverse-muted: #aab1c4;

  --accent: var(--navy-300);
  --accent-hover: var(--navy-200);
  --accent-soft: rgba(142, 151, 216, 0.14);
  --highlight: var(--orange-400);
  --highlight-text: var(--orange-400);

  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.22);
  --line-inverse: rgba(255, 255, 255, 0.14);

  --focus: var(--navy-300);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}