/* ============================================================================
   Cary design tokens — the single source of truth.
   "Instrument, not interface." Cool PNW neutrals + one fir accent + a
   harmonized spectrum (the queer thread). Type: Fraunces display, sans body,
   mono data.

   Three axes, all driven from here:
     :root                  → light, EXPLAINER flavor (Salish Dusk)   ← default
     [data-flavor=dashboard]→ brighter Capitol Hill spectrum + denser
     [data-theme=dark]      → optional dark neutrals (pairs with either flavor)

   Consume by importing this file and reading the vars. Pair with base.css for
   the element defaults + component primitives. Don't hard-code these hexes in
   site CSS — point at the vars so a change here propagates everywhere.
   ============================================================================ */

:root {
  /* ---- type families ------------------------------------------------------ */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-opsz: 140;          /* Fraunces optical size for large display */

  /* ---- type scale (explainer base) ---------------------------------------- */
  --text-xs:   0.6875rem;       /* 11px — mono labels, metadata */
  --text-sm:   0.8125rem;       /* 13px */
  --text-base: 0.9375rem;       /* 15px — body */
  --text-lg:   1.125rem;        /* 18px */
  --text-xl:   1.5rem;          /* 24px */
  --text-2xl:  2rem;            /* 32px */
  --text-3xl:  2.75rem;         /* 44px — display */
  --leading-tight: 1.05;
  --leading-snug:  1.3;
  --leading-body:  1.6;
  --tracking-label: 0.14em;     /* uppercase mono labels */
  --tracking-tight: -0.015em;   /* display headings */

  /* ---- spacing scale ------------------------------------------------------ */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 22px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- radii / borders ---------------------------------------------------- */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px;
  --border-hair: 1px; --border-strong: 2px;

  /* ---- shadows (subtle, cool) — structure comes from hairlines, not shadow */
  --shadow-1: 0 1px 0 rgba(20, 24, 32, .03);
  --shadow-2: 0 12px 34px -28px rgba(20, 40, 60, .45);

  /* ---- motion ------------------------------------------------------------- */
  --ease:     cubic-bezier(.2, .6, .2, 1);
  --dur-fast: 120ms;
  --dur:      200ms;

  /* ---- neutrals — Salish fog (cool, desaturated; never warm cream) -------- */
  --paper:   #FAFBFC;           /* page background */
  --panel:   #FFFFFF;           /* card / surface */
  --panel-2: #F4F6F8;           /* recessed surface, table stripe */
  --ink:     #14191D;           /* primary text */
  --ink-2:   #363D44;           /* secondary text */
  --dim:     #586068;           /* muted text, labels */
  --line:    #E4E8EC;           /* hairline borders */
  --line-2:  #EEF1F4;           /* faint internal dividers */

  /* ---- brand accent: FIR — the constant across every flavor & theme ------- */
  --accent:       #18715E;
  --accent-hover: #135B4C;
  --accent-soft:  #DDEFEA;      /* tints, ghost-button bg, tag bg */
  --on-accent:    #FFFFFF;      /* text/icon on a filled accent */

  /* ---- spectrum: Salish Dusk (explainer) — the queer thread --------------- */
  /* dusk over Puget Sound: evergreen → water → twilight → sunset */
  --s1: #18715E;  /* fir     */
  --s2: #1E9E8A;  /* teal    */
  --s3: #3C6FD0;  /* dusk    */
  --s4: #7C5CD6;  /* violet  */
  --s5: #C84C9E;  /* magenta */
  --s6: #F2724B;  /* coral   */

  /* ---- semantic status (medallion migration stages) ----------------------- */
  --status-dormant: #9AA1A8;  --status-dormant-bg: #EEF0F2;
  --status-build:   #C98A1E;  --status-build-bg:   #FBF1D8;
  --status-test:    #7C5CD6;  --status-test-bg:    #EDE8FB;
  --status-live:    #3C6FD0;  --status-live-bg:    #E2EEFA;
  --status-done:    #18715E;  --status-done-bg:    #DDEFEA;

  /* ---- tier (bronze/silver/gold) ------------------------------------------ */
  --tier-bronze: #B06A34;
  --tier-silver: #8A93A0;
  --tier-gold:   #C29A2E;

  color-scheme: light;
}

/* ============================================================================
   DASHBOARD flavor — Capitol Hill. Same neutrals, same fir brand accent;
   the spectrum is turned up to neon for dense data, plus a hot highlight and
   a tighter rhythm. Set data-flavor="dashboard" on <html> or a subtree.
   ============================================================================ */
[data-flavor="dashboard"] {
  --s1: #D11E8F;  /* magenta */
  --s2: #6D49E0;  /* violet  */
  --s3: #16A6C9;  /* cyan    */
  --s4: #8FCB3A;  /* lime    */
  --s5: #F2A53B;  /* amber   */
  --s6: #F0573E;  /* coral   */

  --hot:      #D11E8F;          /* high-energy highlight: active, alerts, focus */
  --hot-soft: #FBE6F3;

  /* denser by default — dashboards pack more in */
  --text-base: 0.875rem;        /* 14px */
  --space-5: 18px; --space-6: 26px;
  --radius-lg: 12px;
}

/* ============================================================================
   DARK theme — optional. Pairs with either flavor; the spectrum carries over
   (lifted slightly for contrast on dark). Set data-theme="dark".
   ============================================================================ */
[data-theme="dark"] {
  --paper:   #0D1117;
  --panel:   #131922;
  --panel-2: #0F141B;
  --ink:     #E6EAEF;
  --ink-2:   #B7BFC9;
  --dim:     #8A929C;
  --line:    #232B35;
  --line-2:  #1A212A;

  --accent:       #34B89C;      /* fir, brightened for dark surfaces */
  --accent-hover: #45C9AD;
  --accent-soft:  #14302B;
  --on-accent:    #06120F;

  --s1: #2FB89B; --s2: #36C2AE;  /* lift the dim end of the dusk spectrum */

  --shadow-1: 0 1px 0 rgba(0, 0, 0, .25);
  --shadow-2: 0 14px 40px -28px rgba(0, 0, 0, .7);
  color-scheme: dark;
}