/* ============================================================
   KLIPPSTER SITE TOKENS
   The one canonical :root for the site. site/ has no build step, so every page used to
   declare its own copy of this block — and they drifted: --grad-k, the primary button's
   gradient, was purple on index.html and blue→cyan on downloads.html, 404.html and the
   docs. site-nav.css is shared by all of them and *uses* --grad-k without defining it, so
   the same nav button rendered in two different colours depending on which page it sat on.

   Load this before any page's own <style>, next to site-nav.css. A page keeps a :root of
   its own only for values that are genuinely its own (docs.css keeps its layout metrics).
   ============================================================ */

:root {
  color-scheme: dark;

  /* canvas */
  --bg:        #08080b;
  --bg-2:      #0c0c11;
  --surface:   rgba(255,255,255,0.028);
  --surface-2: rgba(255,255,255,0.05);
  --hairline:  rgba(255,255,255,0.09);
  --hairline-strong: rgba(255,255,255,0.16);

  /* ink */
  --ink:       #f5f5f8;
  --ink-2:     #b7b7c2;
  --ink-3:     #7c7c88;

  /* brand — two gradient families straight from the icon */
  --k-blue:    #4361ff;
  --k-cyan:    #23d3ee;
  /* Purple is the product's own interaction colour — the app paints its active chooser row
     #7c58c5 — so the site's primary gradient is purple too, and cyan is spent on success
     rather than used as the theme. Both stops clear 4.5:1 against the #06131a label colour
     every fill uses (5.20 and 7.60), which the blue→cyan pair only just did at its dark end. */
  --grad-k:    linear-gradient(135deg, #8f6dff 0%, #c48ef0 100%);

  --fan-amber: #ffb020;
  --fan-orange:#ff6a3c;
  --fan-mag:   #e0409a;
  --fan-violet:#8b5cf6;
  --fan-indigo:#4f46e5;
  --grad-fan:  linear-gradient(160deg, #ffb020 0%, #ff5e3a 26%, #e0409a 55%, #8b5cf6 80%, #4f46e5 100%);
  /* downloads.html named the same cyan --fan-cyan while index called it --k-cyan. Kept as an
     alias rather than renamed at every call site, so the two names can converge on their own. */
  --fan-cyan:  var(--k-cyan);

  /* The primary button's halo is the gradient's first stop. It was written out by hand in
     four places instead, so it stayed cyan when the gradient went purple — a cyan glow under
     a purple button, on every page including this file's own nav. As rgb components, because
     the two shadows it feeds differ only in alpha. */
  --glow-k: 143, 109, 255;

  --radius:    18px;
  --radius-lg: 28px;
  --shadow-hi: 0 40px 90px -40px rgba(0,0,0,0.9);

  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-mono:    "SFMono-Regular", ui-monospace, monospace;

  --wrap: 1180px;
}