/* ============================================================================
   tokens.css — Kinetic Gain public skin, "Instrument" direction (2026-06-15).
   ONE shared source of truth for the warm-ink palette + type voices. Referenced
   by index.html + the generated service hubs + blog. Single warm theme.

   Hard rules baked in: no glow, no gradient, no radius > 1px, no shadow.
   Oxblood (--seal) + amber (--signal) are flat ink-marks, used sparingly.

   Canonical names = the eight you specified. Legacy --a-* / --ground / --line /
   etc. are aliased to the warm palette so the existing per-surface CSS recolors
   centrally; NEW rules should use the canonical names. (One exception handled in
   the surfaces themselves: var(--ink) previously meant *text* — those usages are
   rewritten to var(--bone); here --ink is the page ground.)
   ============================================================================ */
:root {
  /* ---- warm-ink palette (canonical) ---- */
  --ink: #0C0B0A;        /* page ground */
  --surface: #13110D;    /* raised panel */
  --hairline: #2C2922;   /* every rule/border */
  --bone: #E9E3D6;       /* primary text */
  --muted: #8E887B;      /* secondary text */
  --faint: #5D584E;      /* tertiary / metadata */
  --seal: #C0492F;       /* oxblood ink-mark (links, focus, the stamp) */
  --signal: #E0A43A;     /* amber ink-mark (status, emphasis) */

  /* categorical data-viz ramp — luminance-stepped (lightest->darkest) so adjacent
     segments never collide in grayscale or for red-green CVD. The ONLY hues beyond
     seal/signal, sanctioned strictly for data encoding (no cyan). Single source:
     calculator JS reads these via getComputedStyle; never hardcode the hex twice. */
  --data-1: var(--bone);    /* #E9E3D6 */
  --data-2: var(--signal);  /* #E0A43A */
  --data-3: #7E9B8E;        /* sage — sole new hue */
  --data-4: var(--seal);    /* #C0492F */
  --data-5: var(--faint);   /* #5D584E */
  --data-6: var(--muted);   /* #8E887B */

  /* ---- code syntax highlighting (embedded/ SDK code samples) — warm-compatible
     4-token encoding; luminance/hue separated for small code sizes. ---- */
  --syntax-kw:  var(--signal);  /* keyword          #E0A43A */
  --syntax-str: #9BB59A;        /* string           sage-green */
  --syntax-num: #C9846B;        /* literal / number terracotta */
  --syntax-key: var(--muted);   /* json key / punct #8E887B */

  /* ---- type voices (self-hosted; see fonts.css) ---- */
  --serif: "Newsreader", Georgia, serif;
  --grotesque: "Space Grotesk", -apple-system, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---- hairline system ---- */
  --radius: 1px;
  --maxw: 1180px;
  --maxw-read: 760px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---- legacy aliases -> warm values (centralized recolor of existing CSS) ---- */
  --ground: var(--ink);
  --onyx: var(--ink);
  --cream: var(--bone);
  --ink-dim: var(--muted);
  --ink-faint: var(--faint);
  --line: var(--hairline);
  --line-soft: var(--hairline);
  --surface-2: var(--surface);
  --bluegray: var(--muted);
  --bluegray-bright: var(--muted);
  --green: var(--signal);       /* old "live" green -> flat amber */
  --danger: var(--seal);        /* errors -> oxblood */
  --font: var(--grotesque);     /* old sans var -> grotesque */
  /* the 7-accent rotation collapses to two flat ink-marks */
  --a-cyan: var(--seal);
  --a-violet: var(--seal);
  --a-pink: var(--seal);
  --a-coral: var(--seal);
  --a-emerald: var(--signal);
  --a-amber: var(--signal);
  --a-blue: var(--muted);
  --acc1: var(--seal);
  --acc2: var(--signal);
  --glow: 0;                    /* old glow opacity switch -> off */

  /* legacy per-surface vars whose inline :root defs were folded into this file
     during the estate migration — aliased centrally so those surfaces recolor
     here (embedded SDK, constellation, about-us/contact/what-we-do, calculators) */
  --text: var(--bone);
  --bg: var(--ink);
  --muted2: var(--faint);
  --muted-2: var(--faint);
  --line2: var(--hairline);
  --line-strong: var(--faint);
  --sans: var(--grotesque);
  --cyan: var(--seal);
  --plum: var(--seal);
  --bert: var(--signal);        /* embedded green accent -> amber */
  --bert2: var(--signal);
  --info: var(--muted);
  --warn: var(--seal);
  --amber: var(--signal);
  --coral: var(--seal);
  --build-c: var(--signal);     /* stray in non-build-vs-buy calcs; build-vs-buy overrides to --data-1 locally */
}

/* Flat SVG paper-grain overlay (shared). Static fractal noise, very low opacity,
   pointer-events none. Replaces the old radial glow on body::after.
   No animation, so it is reduced-motion safe by construction. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Shared atlas styling (homepage + its twin) — Instrument "Option B": uniform
   dot + meter, defined ONCE here so neither twin recolors per-language. The
   language name is the identity; the meter WIDTH carries the count. No rainbow. */
.language-chip-label .dot { background: var(--muted); }
.language-chip-meter i { background: var(--signal); }