/* ═══════════════════════════════════════════════════════════════════════
   GRANUMEN — colour tokens (granumen-tokens.css)
   THE single colour source. Supersedes northsake-tokens-package.zip — the
   ramp values are identical (they were always the brand's), renamed, plus
   everything decided since: the blue ramp, the visited purple, AA action
   steps, the focus ring, chart-2 as a ramp step.

   Load order:  granumen-tokens.css  →  granumen-fonts(.css)  →
                granumen-level2.css
   level2 works without this file (it carries fallback hexes); linking this
   file adds the full ramps, semantic tokens, charts and dark mode.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* orange */
  --gr-orange-50: #FFF3F0;
  --gr-orange-100: #FEE4DD;
  --gr-orange-200: #FEC9BB;
  --gr-orange-300: #FEA791;
  --gr-orange-400: #FF7B5B;
  --gr-orange-500: #FE5428;
  --gr-orange-600: #D13808;
  --gr-orange-700: #AB2A00;
  --gr-orange-800: #841E01;
  --gr-orange-900: #5F1401;
  --gr-orange-950: #3D0A01;
  /* aqua */
  --gr-aqua-50: #DAFFF9;
  --gr-aqua-100: #A3FFF2;
  --gr-aqua-200: #5DF2E1;
  --gr-aqua-300: #02DFCD;
  --gr-aqua-400: #16C1B1;
  --gr-aqua-500: #04A698;
  --gr-aqua-600: #028A7F;
  --gr-aqua-700: #006F66;
  --gr-aqua-800: #07554D;
  --gr-aqua-900: #043C37;
  --gr-aqua-950: #022521;
  /* navy */
  --gr-navy-50: #F2F6FC;
  --gr-navy-100: #E7EBF1;
  --gr-navy-200: #D3D7DD;
  --gr-navy-300: #BAC1CB;
  --gr-navy-400: #9EA9B8;
  --gr-navy-500: #8291A6;
  --gr-navy-600: #677993;
  --gr-navy-700: #4C617F;
  --gr-navy-800: #314A6C;
  --gr-navy-900: #112D54;
  --gr-navy-950: #031D43;
  /* teal */
  --gr-teal-50: #DAFFF9;
  --gr-teal-100: #C4F7EF;
  --gr-teal-200: #A8E5DC;
  --gr-teal-300: #87D0C6;
  --gr-teal-400: #61BAAF;
  --gr-teal-500: #02988C;
  --gr-teal-600: #098A7F;
  --gr-teal-700: #086F66;
  --gr-teal-800: #01554E;
  --gr-teal-900: #023C37;
  --gr-teal-950: #012521;
  /* cyan */
  --gr-cyan-50: #EAF9FE;
  --gr-cyan-100: #CDF2FF;
  --gr-cyan-200: #97E4FE;
  --gr-cyan-300: #5FD1F5;
  --gr-cyan-400: #02B6DF;
  --gr-cyan-500: #079FC3;
  --gr-cyan-600: #0A84A2;
  --gr-cyan-700: #096A83;
  --gr-cyan-800: #015165;
  --gr-cyan-900: #023A48;
  --gr-cyan-950: #01232D;
  /* amber */
  --gr-amber-50: #FEF3EC;
  --gr-amber-100: #FFE5D3;
  --gr-amber-200: #FFCBA7;
  --gr-amber-300: #FFAA6B;
  --gr-amber-400: #FE953F;
  --gr-amber-500: #D67101;
  --gr-amber-600: #B25E08;
  --gr-amber-700: #904A03;
  --gr-amber-800: #703800;
  --gr-amber-900: #502702;
  --gr-amber-950: #331600;
  /* neutral */
  --gr-neutral-50: #F1F6FF;
  --gr-neutral-100: #E2EBFA;
  --gr-neutral-200: #CDD8E9;
  --gr-neutral-300: #B4C1D5;
  --gr-neutral-400: #9AA9C0;
  --gr-neutral-500: #8091AB;
  --gr-neutral-600: #6D7F9B;
  --gr-neutral-700: #4F607B;
  --gr-neutral-800: #394963;
  --gr-neutral-900: #24344C;
  --gr-neutral-950: #101F35;
  /* danger */
  --gr-danger-50: #FFF2F3;
  --gr-danger-100: #FFE3E5;
  --gr-danger-200: #FEC6CB;
  --gr-danger-300: #FFA2AD;
  --gr-danger-400: #F08190;
  --gr-danger-500: #DF6075;
  --gr-danger-600: #CC3759;
  --gr-danger-700: #C01048;
  --gr-danger-800: #8A0130;
  --gr-danger-900: #650021;
  --gr-danger-950: #400112;
  /* blue — added for links and charts after the rename */
  --gr-blue-50: #F0F6FE;
  --gr-blue-100: #DEECFF;
  --gr-blue-200: #BDD9FF;
  --gr-blue-300: #96C3FF;
  --gr-blue-400: #71AAF4;
  --gr-blue-500: #4F91E5;
  --gr-blue-600: #2A78D6;
  --gr-blue-700: #015DB8;
  --gr-blue-800: #03478E;
  --gr-blue-900: #013268;
  --gr-blue-950: #011E42;

  /* named singles */
  --gr-navy-975: #001334;   /* deep ground — heroes, dark app chrome */
  --gr-ice:  #F2FBFE;  --gr-mist: #E0E9EE;  --gr-teal-tint: #E6F5F4;
  --gr-warm-black: #403D3A;
  --gr-visited: #58347C;        /* the blue rotated 50° — see the link study */
  --gr-visited-dark: #D2ACFF;

  /* ── semantic · light ── */
  --bg-page: #FFFFFF;
  --bg-sunken: var(--gr-ice);
  --bg-surface-alt: #F4F6F8;
  --border-line: #D8DFE6;

  --text-primary: var(--gr-navy-900);        /* 13.75:1 */
  --text-secondary: var(--gr-navy-700);
  --text-muted: var(--gr-neutral-600);

  --text-link: var(--gr-blue-700);           /* 6.44:1 */
  --text-link-hover: var(--gr-blue-800);
  --text-link-visited: var(--gr-visited);

  --action-bg: var(--gr-orange-600);         /* white label 4.91:1 — never 500 */
  --action-bg-hover: var(--gr-orange-700);
  --action-bg-active: var(--gr-orange-800);
  --brand-moment: var(--gr-orange-500);      /* the symbol, never a text ground */

  --focus-ring: var(--gr-blue-600);

  --status-ok: #0E6E38;  --status-warn: #8A5A00;  --status-bad: #B01E4E;
  --support-error: var(--gr-danger-700);
  --support-success: var(--gr-teal-600);
  --support-warning: var(--gr-amber-600);
  --support-info: var(--gr-cyan-600);

  /* charts — chart-2 is now a ramp step, not a loose hex */
  --chart-1: var(--gr-orange-500);  --chart-2: var(--gr-blue-600);
  --chart-3: #1BAF7A;  --chart-4: #EDA100;  --chart-5: #E87BA4;
  --chart-6: #008300;  --chart-7: #4A3AA7;  --chart-8: #E34948;
  --chart-grid: var(--gr-navy-100);  --chart-axis: var(--gr-navy-300);
}

/* ── semantic · dark (opt in with <html data-theme="dark">) ── */
[data-theme="dark"] {
  --bg-page: var(--gr-navy-975);
  --bg-sunken: #0A1C3E;
  --bg-surface-alt: #0B2140;
  --border-line: rgba(255,255,255,.16);

  --text-primary: #E7EBF1;
  --text-secondary: #B9C4D6;
  --text-muted: var(--gr-neutral-400);

  --text-link: var(--gr-blue-300);           /* 10.10:1 on the ground */
  --text-link-hover: var(--gr-blue-200);
  --text-link-visited: var(--gr-visited-dark);
  --focus-ring: var(--gr-blue-300);
  /* action stays orange-600/700/800 — white on 600 holds on any ground */
}