/* tokens.css — design-system custom properties (single source of truth).
   Cool, blue-tinted editorial palette. Edit values here to retheme. */
:root{
  /* ── Canvas & surfaces — cool, blue-tinted editorial paper ── */
  --canvas:#ECF0F8;        /* page canvas — our "parchment", cooled to brand blue */
  --paper:#FFFFFF;         /* white card */
  --frost:#F4F6FC;         /* subtle nested surface */
  --pale-sky:#D8E2F4;      /* tinted soft section surface */

  /* ── Ink / neutrals — navy-biased ── */
  --ink:#141A2B;           /* onyx equivalent — headings + primary action */
  --ink-2:#2C3447;         /* body text */
  --ink-mute:#5C6480;      /* muted text, sub-labels */
  --steel:#6B7390;        /* placeholder, low-emphasis (darkened for legibility) */
  --border:#D9DEEA;        /* hairline dividers, card borders */

  /* ── Brand blue family — tonal section accents ── */
  --navy:#4A587C;          /* brand */
  --navy-soft:#5E6E97;
  --navy-deep:#2D3652;
  --navy-ink:#1A2036;
  --blue-mid:#365C9E;      /* clearer mid-blue — links & one accent */
  --accent:#365C9E;
  --hi:#A9BBE0;            /* on-dark cool accent (was JSX `HI`) */
  --hi-2:#9DB0D8;          /* on-dark eyebrow accent */

  /* ── On-dark text ── */
  --on:#FFFFFF;
  --on-soft:rgba(255,255,255,.72);
  --on-mute:rgba(255,255,255,.52);

  /* ── Type ── */
  --font-display:'Bricolage Grotesque', Georgia, serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* ── Radii (design-system scale) ── */
  --r-btn:12px;
  --r-card:16px;
  --r-feature:24px;
  --r-tag:32px;

  /* ── Spacing ── */
  --max:1200px;
  --gap:64px;

  /* ── Shadows (blue-tinted, soft) ── */
  --sh-sm:rgba(20,26,43,.06) 0px 1px 2px 0px, rgba(20,26,43,.04) 0px 0px 0px 1px;
  --sh-md:rgba(15,48,106,.08) 0px 12px 32px -12px, rgba(20,26,43,.05) 0px 0px 0px 1px;
  --sh-lg:rgba(15,48,106,.14) 0px 30px 70px -28px;
  --sh-cta:rgba(20,26,43,.32) 0px 0px 1px 0px, rgba(20,26,43,.12) 0px 6px 16px -6px, rgba(54,92,158,.20) 0px 1px 3px 0px;
}