/* PostData — token layer
   The single source of truth. Every other stylesheet references these only.
   Dark is the designed theme; names are semantic so a light theme rebinds
   the same neutrals later.

   Two rules that shape everything below:
   1. Colour belongs to data. UI chrome is monochrome; the series ramp and one
      accent are the only hues on the page.
   2. Nothing animates on its own. Motion happens when a sample lands or a
      pointer moves — never as ambient decoration. */

:root {
  color-scheme: dark;

  /* ---------- 1. Neutral ramp (dark) ----------
     Near-black, faintly cool. Each surface step is a real elevation, not an
     opacity tint. Contrast ratios are against --c-bg. */
  --c-bg:            #08090b;  /* page */
  --c-surface:       #0d1013;  /* panels, code blocks, nav */
  --c-raised:        #12161a;  /* hover fill, inline code, placeholders */
  --c-overlay:       #191e23;  /* pressed / selected segment */
  --c-sunken:        #050607;  /* plot area */

  --c-border:        #1c2126;  /* default hairline */
  --c-border-strong: #2b3239;  /* interactive / hovered hairline */
  --c-border-faint:  #14181c;  /* chart grid, internal dividers */

  --c-text:          #e6ebf0;  /* 14.4:1 */
  --c-text-dim:      #b3bcc5;  /* 8.9:1  — secondary prose */
  --c-muted:         #808d99;  /* 5.9:1  — the dimmest step legal for TEXT:
                                  labels, meta, axis text, counters */
  --c-faint:         #5c6873;  /* 3.1:1  — NON-TEXT ONLY. Passes the 3:1 bar for
                                  UI graphics (rules, markers, cursors, tick
                                  marks) and fails it for text, so nothing
                                  readable may use it. */
  --c-on-accent:     #171003;  /* text on an amber fill, 9.9:1 */

  /* ---------- 2. Accent — sodium amber ----------
     Spent on exactly three things: the primary action, the focus ring, and
     live state. Never a background wash, never a border accent for flavour. */
  --c-accent:        #f2a93b;
  --c-accent-hover:  #ffc164;
  --c-accent-active: #d18f28;
  --c-accent-dim:    #e0a03a;  /* accent as text on --c-surface, 7.6:1 */
  --c-accent-subtle: rgba(242, 169, 59, 0.10);
  --c-accent-line:   rgba(242, 169, 59, 0.28);

  /* ---------- 3. Status ----------
     --c-warning is deliberately the accent: on this site "needs attention"
     and "live" are the same amber, and a fourth hue would dilute both. */
  --c-success:        #3fbf7f;
  --c-success-subtle: rgba(63, 191, 127, 0.10);
  --c-warning:        #f2a93b;
  --c-warning-subtle: rgba(242, 169, 59, 0.10);
  --c-danger:         #e5564b;
  --c-danger-subtle:  rgba(229, 86, 75, 0.10);

  /* ---------- 4. Categorical series ramp (charts) ----------
     10 series, assigned in JSON key order. Okabe–Ito derived, then
     luminance-flattened so no member reads as "the important one". Hue
     carries all the signal — no pair relies on red-vs-green separation.
     Amber sits last so the UI accent and a data line rarely coexist.
     Verified at 2px stroke on --c-sunken, normal and deuteranopic. */
  --s-1:  #56b4e9;  /* sky       */
  --s-2:  #cc79a7;  /* orchid    */
  --s-3:  #2ec4b6;  /* teal      */
  --s-4:  #d8cf4a;  /* citron    */
  --s-5:  #a78bfa;  /* violet    */
  --s-6:  #d55e00;  /* vermilion */
  --s-7:  #9aa7b4;  /* slate     */
  --s-8:  #6ee7b7;  /* mint      */
  --s-9:  #ef476f;  /* rose      */
  --s-10: #e69f00;  /* amber     */

  --s-fill-alpha: 0.10;   /* area fill, single-series charts only */

  /* ---------- 5. Syntax palette (dark-native) ---------- */
  --syn-text:    #d5dce3;
  --syn-comment: #7d8894;  /* lifted from #5c6873 — comments are text (4.7:1) */
  --syn-key:     #a8c7ff;
  --syn-string:  #a5d6a7;
  --syn-number:  #f2b880;
  --syn-punct:   #8b98a4;  /* lifted from #7b8894 for AA (4.5:1) */
  --syn-func:    #d3a8ff;
  --syn-url:     #7fd8e8;

  /* ---------- 6. Type ----------
     Fixed root. No viewport-stepped root anywhere. Mono carries every
     number, identifier, label, heading and code run; system-ui carries prose. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
               Menlo, Consolas, "Liberation Mono", monospace;

  /* Modular scale, ratio 1.185, whole pixels at a 16px root. */
  --fs-3xs: 0.625rem;   /* 10 — axis ticks only */
  --fs-2xs: 0.6875rem;  /* 11 — micro-labels, legend */
  --fs-xs:  0.75rem;    /* 12 — meta, tile labels, footer */
  --fs-sm:  0.8125rem;  /* 13 — code, dense UI, nav */
  --fs-md:  0.9375rem;  /* 15 — body */
  --fs-lg:  1.0625rem;  /* 17 — lead, h4 */
  --fs-xl:  1.25rem;    /* 20 — h3 */
  --fs-2xl: 1.5rem;     /* 24 — h2, metric value */
  --fs-3xl: 1.875rem;   /* 30 — h1 inner pages */
  --fs-4xl: 2.375rem;   /* 38 — page h1 */
  --fs-5xl: 3.5rem;     /* 56 — home hero cap, via clamp() */

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-code:  1.55;
  --lh-body:  1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.07em;   /* uppercase micro-labels */

  --num-feat: "tnum" 1, "zero" 1;   /* tabular + slashed zero */

  /* ---------- 7. Space — 4px base ---------- */
  --sp-0:  0;
  --sp-1:  0.125rem;  /* 2  */
  --sp-2:  0.25rem;   /* 4  */
  --sp-3:  0.375rem;  /* 6  */
  --sp-4:  0.5rem;    /* 8  */
  --sp-5:  0.75rem;   /* 12 */
  --sp-6:  1rem;      /* 16 */
  --sp-7:  1.5rem;    /* 24 */
  --sp-8:  2rem;      /* 32 */
  --sp-9:  3rem;      /* 48 */
  --sp-10: 4rem;      /* 64 */
  --sp-11: 6rem;      /* 96 */

  /* ---------- 8. Shape ----------
     Hardware, not app icons. Nothing on this site is rounder than 4px and
     nothing is a pill. */
  --r-xs: 0;
  --r-sm: 1px;   /* inline code — the only rounded thing on the site */
  --r-md: 0;     /* code blocks, buttons: machined edges */
  --r-lg: 0;     /* panels, tiles, cards */
  --r-pill: 999px;  /* scrollbar thumbs only */

  --bw:       1px;
  --bw-thick: 2px;   /* focus rings, chart strokes, checkmarks — only these */

  /* ---------- 9. Elevation — one shadow, and it is nearly invisible ---------- */
  --sh-sm: 0 1px 0 rgba(0, 0, 0, 0.6);

  /* ---------- 10. Motion ---------- */
  --dur-1: 80ms;    /* press */
  --dur-2: 130ms;   /* hover, focus */
  --dur-3: 200ms;   /* disclosure */
  --dur-tick: 160ms;/* one sample landing */
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);

  /* ---------- 11. Layout ---------- */
  --page-max:  1120px;
  --prose-max: 68ch;
  --gutter:    var(--sp-6);
  --nav-h:     46px;
  --tap:       44px;

  /* ---------- 12. Focus ---------- */
  --focus-ring:   var(--c-accent);
  --focus-width:  2px;
  --focus-offset: 2px;
}

@media (min-width: 720px) {
  :root { --gutter: var(--sp-8); }
}