/* ──────────────────────────────────────────────────────────────────────────
   File:        tokens.css
   Purpose:     Canonical design tokens for the No Kill Switch design system.
                Shared between web (Cloudflare Pages) and print (paged.js).
                All other stylesheets (print.css, web.css) MUST reference
                these custom properties — never hardcode colour, font,
                spacing, or page-margin values.
   Version:     0.2.0
   Date:        2026-04-20
   Source:      agents/rules/document-design-reference-print.md (Sections
                1.1, 1.2, 2.1, 2.3, 3.1, 3.2, 6.3)
   Reconciled with the pre-existing colors_and_type.css where hex values
   and font stacks agreed. Any conflict resolved in favour of the spec;
   see CHANGELOG.md.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Colour: brand palette (Section 2.1) ──────────────────────────── */
  --color-midnight:          #0A1628;
  --color-midnight-80:       #1A2942;
  --color-deep-sea:          #142B4C;
  --color-paper-white:       #FAFAF7;
  --color-signal-red:        #E63946;
  --color-signal-red-deep:   #B02E3A;
  --color-signal-amber:      #F4A261;
  --color-signal-green:      #2A9D8F;
  --color-stone:             #E8E6E1;
  --color-graphite:          #3D3D3D;
  --color-slate:             #6B7280;

  /* ── Chart palette: brand-aware categorical (Section 6.3) ─────────── */
  --chart-categorical-1:     var(--color-midnight);
  --chart-categorical-2:     var(--color-signal-red);
  --chart-categorical-3:     var(--color-signal-amber);
  --chart-categorical-4:     var(--color-signal-green);
  --chart-categorical-5:     var(--color-slate);

  /* ── Chart palette: ColorBrewer 7-class sequential/diverging ──────── */
  /* Space-separated hex lists — D3/Vega-friendly. Consumers can split
     on whitespace. Values from ColorBrewer 2.0 (Brewer, Harrower). */
  --chart-seq-blues:   #f7fbff #deebf7 #c6dbef #9ecae1 #6baed6 #4292c6 #2171b5;
  --chart-seq-reds:    #fff5f0 #fee0d2 #fcbba1 #fc9272 #fb6a4a #ef3b2c #cb181d;
  --chart-div-rdbu:    #b2182b #ef8a62 #fddbc7 #f7f7f7 #d1e5f0 #67a9cf #2166ac;

  /* ── Chart palette: Viridis / Cividis 7-sample perceptual ─────────── */
  /* Standard 7-sample values from matplotlib viridis/cividis LUTs. */
  --chart-seq-viridis: #440154 #443983 #31688e #21918c #35b779 #90d743 #fde725;
  --chart-seq-cividis: #00204c #213d6b #555b6c #7b7a77 #a59c74 #d3c064 #fde737;

  /* ── Typography: font families (Section 1.1) ──────────────────────── */
  /* font-display uses Inter Display (variable optical-size 32 axis) for
     hero/chapter openers; body web/print split per the spec — Inter for
     screens, Fraunces for long-form print reading. */
  --font-display:     "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body-web:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body-print:  "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Type scale: web (rem, base 16px) — Section 1.2 ───────────────── */
  --text-web-hero:      4.5rem;    /* 72px, Inter Display 800 */
  --text-web-h1:        3rem;      /* 48px, Inter Display 800 */
  --text-web-h2:        2rem;      /* 32px, Inter Display 700 */
  --text-web-h3:        1.5rem;    /* 24px, Inter 600 */
  --text-web-body:      1rem;      /* 16px, Inter 400 */
  --text-web-longform:  1.125rem;  /* 18px, Fraunces 400 */
  --text-web-caption:   0.875rem;  /* 14px, Inter 500 */
  --text-web-small:     0.875rem;  /* 14px, Inter 500 — alias of caption */
  --text-web-mono:      0.9375rem; /* 15px, JetBrains Mono 400 */

  /* ── Type scale: print (pt, paged.js) — Section 1.2 ───────────────── */
  --text-print-cover:    48pt;  /* Inter Display 800 */
  --text-print-display:  32pt;  /* Chapter opener — Inter Display 800 */
  --text-print-h1:       24pt;  /* Inter Display 700 */
  --text-print-h2:       18pt;  /* Inter Display 700 */
  --text-print-h3:       14pt;  /* Inter 600 */
  --text-print-body:     11pt;  /* Fraunces 400 */
  --text-print-caption:  9pt;   /* Fraunces 400 — also footnote */
  --text-print-small:    9pt;   /* Fraunces 400 — alias of caption */
  --text-print-runner:   8pt;   /* Inter 500 — running header/footer */
  --text-print-mono:     10pt;  /* JetBrains Mono 400 */

  /* ── Spacing scale (Section 3.1) ──────────────────────────────────── */
  /* 4px / 4pt baseline. Step number = multiples of 4. */
  --space-0:   0;
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-24:  6rem;     /* 96px */

  /* ── Page margins (print, paged.js) — Section 3.2 ─────────────────── */
  /* A4 default: 25mm top/bottom, 28mm inside (binding edge), 22mm outside.
     Spec margin shorthand: margin: 25mm 22mm 25mm 28mm (T R B L). */
  --page-margin-top:      25mm;
  --page-margin-bottom:   25mm;
  --page-margin-inside:   28mm;  /* binding edge (left on recto) */
  --page-margin-outside:  22mm;  /* outer edge (right on recto) */
}