/* Cover Factory · next · design tokens (D2, 2026-09-23). One source for index.html, styleguide.html and the CSS that kb.js,
   refs.js and ai.js inject at runtime (they read these names). Values come from DIRECTION.md; keep names stable. */
:root{
  color-scheme:dark;
  /* ground: deep indigo, one step lighter per layer */
  --bg-deep:#090b14; --bg:#0c0f1a; --surface:#121627; --raised:#191e33; --hover:#202640; --active:#262d4a; --stage:#090b14;
  --glass:rgba(18,22,39,.72); --glass-strong:rgba(18,22,39,.9);
  /* lines: tinted hairlines and the inner top highlight of glass */
  --line:rgba(173,186,255,.10); --line-strong:rgba(173,186,255,.18); --line-hi:rgba(255,255,255,.07); --line-hover:rgba(173,186,255,.28);
  /* text: AA on surface and raised (see DIRECTION.md) */
  --text:#eef0fb; --text-2:#a7aecb; --text-3:#858ca8; --ink:#0b0e1a;
  /* signal: periwinkle marks where you are; green, amber, red mark what happened */
  --accent:#b3c0ff; --accent-hover:#c7d0ff; --accent-soft:rgba(179,192,255,.12); --accent-soft-2:rgba(179,192,255,.22); --on-accent:#0b0e1a;
  --primary:#eef0fb; --primary-2:#dde3ff; --primary-hover:#ffffff; --on-primary:#0b0e1a;
  --green:#5fd39a; --green-hover:#79dcac; --on-green:#06150d; --green-soft:rgba(95,211,154,.14);
  --amber:#f2b54a; --amber-hover:#f6c46b; --on-amber:#1c1303; --amber-soft:rgba(242,181,74,.14);
  --red:#f36c72; --red-hover:#f6868b; --on-red:#1d0506; --red-soft:rgba(243,108,114,.14); --red-soft-2:rgba(243,108,114,.22);
  /* type: Golos Text reads, Martian Mono measures */
  --font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Martian Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --fs-1:12px; --fs-2:13px; --fs-3:14px; --fs-4:16px; --fs-5:20px; --fs-6:22px; --fs-7:28px; --fs-8:36px;
  /* radius: pills for controls, 10 inputs, 14 image in card, 18 cards, 24 panels and dialogs, 30 rail */
  --r-1:6px; --r-2:10px; --r-3:14px; --r-4:18px; --r-5:24px; --r-6:30px; --pill:999px;
  /* space: 4 px base */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px;
  /* elevation: navy shadows with offset and blur; glow is the only zero-offset light */
  --shadow-1:0 4px 12px -4px rgba(3,6,20,.6); --shadow-2:0 16px 40px -16px rgba(3,6,20,.8); --shadow-3:0 32px 80px -24px rgba(3,6,20,.9);
  --glow-accent:0 0 24px -4px rgba(179,192,255,.55);
  /* texture: hatching for what is not filled yet, dots for a canvas you work on */
  --hatch:repeating-linear-gradient(135deg,rgba(173,186,255,.10) 0 1px,transparent 1px 7px);
  --dots:radial-gradient(rgba(173,186,255,.16) 1px,transparent 1.2px);
  /* motion (design/redesign-2026-09/motion/SYSTEM.md): duration follows consequence, one signature ease, short distances */
  --dur-1:120ms; --dur-2:160ms; --dur-3:220ms; --dur-4:320ms; --dur-5:480ms;   /* press · hover/exit · popover/view · dialog/drawer/move · a stage done */
  --ease:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);   /* small overshoot: success moments only (a stage done, a pack done) */
  --m-rise:6px; --m-toast:12px; --m-slide:32px;   /* a view or list item arriving · a toast from the bottom edge · a drawer from the side */
  --m-pop:.96; --m-dialog:.98; --m-press:.97;     /* popover from its trigger · modal in place · a pressed control */
  --m-stagger:30ms; --m-stagger-max:240ms;        /* between siblings · the whole cascade, never longer */
  --m-stretch:1.28;   /* a pressed switch thumb stretches toward where it will go (x scale; its near edge stays put) */
  /* skeleton (MOTION-2): shown only when the answer is slow, one quiet sweep, then a crossfade into the content */
  --sk-delay:180ms;   /* a faster answer never shows a skeleton (no flash) */
  --sk-dur:1.8s;      /* one sweep left to right, then a rest: slow, never busy */
  --sk-base:var(--raised); --sk-hi:rgba(173,186,255,.07);   /* the block and the sweep: low contrast */
  --blur:18px;
}
/* the one reduced-motion policy: nothing travels, scales or spins; opacity and colour still change. Everything built on the
   tokens above becomes a fade by itself; app.css stops loops and CSS travel; motion.js reads the same tokens */
@media (prefers-reduced-motion:reduce){
  :root{--m-rise:0px; --m-toast:0px; --m-slide:0px; --m-pop:1; --m-dialog:1; --m-press:1; --m-stretch:1; --m-stagger:0ms; --m-stagger-max:0ms}
}