/* Cover Factory · next · design tokens (D2, 2026-09-23). One source for index.html, ds.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;
  /* ===== primitives (CF-DS 1.2): raw values only, components never read them ===== */
  --p-navy-950:#090b14; --p-navy-900:#0c0f1a; --p-navy-850:#121627; --p-navy-800:#191e33; --p-navy-750:#202640; --p-navy-700:#262d4a;
  --p-ink:#0b0e1a; --p-shade:3 6 20; --p-mist-50:#eef0fb; --p-mist-300:#a7aecb; --p-mist-400:#858ca8; --p-mist:173 186 255;
  --p-accent-200:#d3dbff; --p-accent-300:#b3c0ff; --p-accent-400:#9fb0ff; --p-accent-500:#98a9ff; --p-accent-600:#7f93ff; --p-accent-hover:#c7d0ff;
  --p-white:#ffffff;
  --p-green-500:#5fd39a; --p-green-400:#79dcac; --p-green-ink:#06150d;
  --p-amber-500:#f2b54a; --p-amber-400:#f6c46b; --p-amber-ink:#1c1303;
  --p-red-500:#f36c72; --p-red-400:#f6868b; --p-red-ink:#1d0506;
  --p-orange-400:#ef6801; --p-orange-450:#e66402; --p-orange-500:#df6102; --p-orange-550:#d65c03; --p-orange-600:#d15a00;
  --p-pink:#ff8fd0; --p-pink-200:#ffb3de; --p-pink-400:#f07cc4; --p-accent-100:#dde3ff;
  /* RGB triplets, space syntax: rgb(var(--p-x-rgb) / a). Only these feed alpha tints (CF-DS 1.2 ramps) */
  --p-accent-rgb:179 192 255; --p-white-rgb:255 255 255; --p-navy-rgb:9 11 20; --p-ink-rgb:11 14 26; --p-glass-rgb:18 22 39; --p-scrim-rgb:6 8 18;
  --p-green-rgb:95 211 154; --p-amber-rgb:242 181 74; --p-red-rgb:243 108 114; --p-orange-rgb:239 104 1; --p-info-rgb:110 140 255;
  /* ===== semantic layer: today's names, re-pointed to the primitives ===== */
  /* ground: deep indigo, one step lighter per layer */
  --bg-deep:var(--p-navy-950); --bg:var(--p-navy-900); --surface:var(--p-navy-850); --raised:var(--p-navy-800); --hover:var(--p-navy-750); --active:var(--p-navy-700); --stage:var(--p-navy-950);
  --glass:rgb(var(--p-glass-rgb) / .72); --glass-strong:rgb(var(--p-glass-rgb) / .9);
  /* lines: tinted hairlines and the inner top highlight of glass */
  --line:rgb(var(--p-mist) / .10); --line-strong:rgb(var(--p-mist) / .18); --line-hi:rgb(var(--p-white-rgb) / .07); --line-hover:rgb(var(--p-mist) / .28);
  /* text: AA on surface and raised (see DIRECTION.md) */
  --text:var(--p-mist-50); --text-2:var(--p-mist-300); --text-3:var(--p-mist-400); --ink:var(--p-ink);
  /* signal: periwinkle marks where you are; green, amber, red mark what happened */
  --accent:var(--p-accent-300); --accent-hover:var(--p-accent-hover); --accent-soft:rgb(var(--p-accent-rgb) / .12); --accent-soft-2:rgb(var(--p-accent-rgb) / .22); --on-accent:var(--p-ink);
  --primary:var(--p-mist-50); --primary-2:var(--p-accent-100); --primary-hover:var(--p-white); --on-primary:var(--p-ink);
  --green:var(--p-green-500); --green-hover:var(--p-green-400); --on-green:var(--p-green-ink); --green-soft:rgb(var(--p-green-rgb) / .14);
  --amber:var(--p-amber-500); --amber-hover:var(--p-amber-400); --on-amber:var(--p-amber-ink); --amber-soft:rgb(var(--p-amber-rgb) / .14);
  --red:var(--p-red-500); --red-hover:var(--p-red-400); --on-red:var(--p-red-ink); --red-soft:rgb(var(--p-red-rgb) / .14); --red-soft-2:rgb(var(--p-red-rgb) / .22);
  /* DR-50: right page gutter = the left one, seen from the window edge: menu offset 16 + page padding 32 */
  --page-gutter-r:48px;
  /* ===== new semantic tokens (CF-DS 1.3); each one replaces repeated literals ===== */
  --line-soft:rgb(var(--p-mist) / .05); --line-faint:rgb(var(--p-mist) / .03); --accent-line:rgb(var(--p-accent-rgb) / .35); --hl-2:rgb(var(--p-white-rgb) / .12);
  --on-image:rgb(var(--p-navy-rgb) / .84); --on-image-2:rgb(var(--p-navy-rgb) / .72); --ink-scrim:rgb(var(--p-ink-rgb) / .86); --scrim:rgb(var(--p-scrim-rgb) / .6);
  --art-shadow-1:rgba(0,0,0,.4); --art-shadow-2:rgba(0,0,0,.6);
  --green-line:rgb(var(--p-green-rgb) / .35); --amber-line:rgb(var(--p-amber-rgb) / .35); --red-line:rgb(var(--p-red-rgb) / .35);
  --green-line-strong:rgb(var(--p-green-rgb) / .55); --red-line-strong:rgb(var(--p-red-rgb) / .55);
  --state-nomatch:#8f8f8f; --focus:var(--accent); --white:var(--p-white);
  /* data and art colours that pages typed as hex (DS-2): chart accent, the two pinks, the title sheen, the checkbox fill */
  --data-accent:var(--p-accent-600); --data-pink:var(--p-pink-200); --data-pink-2:var(--p-pink-400); --sheen-end:var(--p-accent-400); --check-1:var(--p-accent-200); --check-2:var(--p-accent-500);
  /* page light (CF-DS 1.6, app.css body::before/after): exact values, art, never snapped */
  --hover-wash:rgb(var(--p-mist) / .05); --press-wash:rgb(var(--p-mist) / .10);
  /* ===== component tokens (CF-DS 1.3b): a part that has its own value or is styled in several files ===== */
  /* control sizes (DR-64): S 36 · M 44 · L 52; --hit-min is the smallest hit area */
  --ctl-xs:24px; --ctl-s:36px; --ctl-m:44px; --ctl-l:52px; --hit-min:32px; --ctl-item-s:28px; --ctl-item-m:36px;
  /* the one depth of every coloured solid (Primary, Generate, Paid, Success, Destructive): no rim, no ring */
  --btn-depth:inset 0 8px 12px -8px rgba(255,255,255,.28),inset 0 -6px 10px -8px rgba(3,6,20,.32),0 1px 2px rgba(3,6,20,.45);
  /* paid (DR-55, DR-65 option A): one source, the orange primitives; hover darkens */
  --paid-1:var(--p-orange-400); --paid-2:var(--p-orange-500); --paid-hover-1:var(--p-orange-450); --paid-hover-2:var(--p-orange-550); --paid-press-1:var(--p-orange-600); --paid-press-2:var(--p-orange-550);
  --paid-glow:rgb(var(--p-orange-rgb) / .45); --paid-glow-hover:rgb(var(--p-orange-rgb) / .65); --paid-glow-press:rgb(var(--p-orange-rgb) / .25);
  /* the topbar Generate (.btn.primary.gen), sampled from the owner's violet reference (DR-37); one violet object in the app */
  --gen-1:#6d30f4; --gen-2:#6222ea; --gen-chip:#b6abff; --gen-chip-fg:#6521f2; --gen-glow:rgba(104,44,242,.45);
  --gen-hover-1:#7a41f6; --gen-hover-2:#6b2df0; --gen-hover-glow:rgba(112,54,248,.65);
  --gen-press-1:#5a22d8; --gen-press-2:#5319c9; --gen-press-glow:rgba(96,36,226,.25);
  --gen-text:#fff;
  /* alert (FIX-ALERT, DR-35 and its addition): one set per tone; fg = icon, title, action; bg and line are the same hue at low and mid alpha */
  --alert-info-fg:#8eaaff; --alert-info-bg:rgb(var(--p-info-rgb) / .14); --alert-info-line:rgb(var(--p-info-rgb) / .35);
  --alert-warning-fg:var(--amber); --alert-warning-bg:var(--amber-soft); --alert-warning-line:var(--amber-line);
  --alert-success-fg:var(--green); --alert-success-bg:var(--green-soft); --alert-success-line:var(--green-line);
  --alert-error-fg:#f77a80; --alert-error-bg:var(--red-soft); --alert-error-line:var(--red-line);
  /* destructive secondary (DR-59): aliases of the alert error tone and the red ramp */
  --destr-fg:var(--alert-error-fg); --destr-fg-hover:var(--red-hover); --destr-bg:var(--alert-error-bg); --destr-bg-hover:var(--red-soft-2); --destr-bg-press:var(--red-soft-2); --destr-line:var(--red-line); --destr-line-hover:var(--red-line-strong);
  --count-bg:rgb(var(--p-mist) / .14);   /* counter (DR-59): a quiet count, no edge */
  /* alert geometry, measured from the owner's reference (Alert Floating) */
  --alert-pad-y:10px; --alert-pad-l:16px; --alert-pad-r:12px; --alert-gap:12px; --alert-title-gap:8px; --alert-r:var(--r-sm); --alert-icon:16px; --alert-fs:14px; --alert-lh:22px;
  --alert-close:20px; --alert-close-icon:12px; --alert-stack:8px; --alert-text-mix:70%;
  /* navigation, cards, dialogs (lane B and C read these) */
  --nav-current:var(--accent-soft-2); --nav-current-hover:color-mix(in srgb,var(--accent) 26%,transparent); --nav-current-glow:0 0 16px -6px color-mix(in srgb,var(--accent) 55%,transparent); --nav-current-line:var(--accent-line); --sb-w:216px; --sb-inset:16px;
  --card-pad:20px 24px 24px; --card-r:var(--r-5);
  --dlg-w-sm:440px; --dlg-w-md:560px; --dlg-w-lg:720px; --dlg-r:var(--r-5);
  /* 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-0:11px; --fs-4b:18px; --fs-1:12px; --fs-2:13px; --fs-3:14px; --fs-4:16px; --fs-5:20px; --fs-6:22px; --fs-7:28px; --fs-8:36px; --fs-9:40px; --fs-10:48px;
  /* card text block (DR-53): title DS text-md 16/24 600, meta DS text-sm 14/20; --ct-inset = text distance from the card edge (card border 1 + padding 4 are inside it) */
  --ct-title-fs:16px; --ct-title-lh:24px; --ct-meta-fs:14px; --ct-meta-lh:20px; --ct-inset:16px; --foot-job:76px;
  /* radius: pills for controls, 10 inputs, 14 image in card, 18 cards, 24 panels and dialogs, 30 rail */
  --r-hair:2px; --r-xs:4px; --r-sm:8px; --cb-r:5px; --r-1:6px; --r-2:10px; --r-3:14px; --r-4:18px; --r-5:24px; --r-6:30px; --pill:999px;
  /* icon scale (DR-41): the glyph follows the text step beside it */
  --icon-xs:12px; --icon-sm:14px; --icon-md:16px; --icon-lg:18px; --icon-xl:20px;
  /* 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-0:0 1px 2px rgb(var(--p-shade) / .4); --shadow-1:0 4px 12px -4px rgb(var(--p-shade) / .6); --shadow-2:0 16px 40px -16px rgb(var(--p-shade) / .8); --shadow-3:0 32px 80px -24px rgb(var(--p-shade) / .9);
  --shadow-side:-16px 0 48px rgb(var(--p-shade) / .5);   /* a drawer from the right edge */
  --edge:inset 0 0 0 1px var(--line); --edge-strong:inset 0 0 0 1px var(--line-strong); --edge-hover:inset 0 0 0 1px var(--line-hover); --edge-accent:inset 0 0 0 1px var(--accent);
  --hl-top:inset 0 1px 0 var(--line-hi); --ring-field:0 0 0 3px var(--accent-soft-2); --ring-gap:0 0 0 2px var(--surface); --ring-gap-bg:0 0 0 2px var(--bg);
  /* layers: today's values, named (no renumbering); local stacking 0-12 stays literal inside a component */
  --z-float:20; --z-actionbar:25; --z-sticky:30; --z-scrim:39; --z-pop:40; --z-pop-2:42; --z-pop-3:43; --z-scrim-2:44; --z-dialog:45; --z-dialog-pop:46;
  --z-overlay:50; --z-overlay-scrim:55; --z-menu:60; --z-tip:70; --z-block:1000;
  --glow-accent:0 0 24px -4px rgb(var(--p-accent-rgb) / .55);
  /* texture: hatching for what is not filled yet, dots for a canvas you work on */
  --hatch:repeating-linear-gradient(135deg,var(--line) 0 1px,transparent 1px 7px);
  --dots:radial-gradient(rgb(var(--p-mist) / .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:rgb(var(--p-mist) / .07);   /* the block and the sweep: low contrast */
  --blur:18px;
  --loop-spin:.9s; --loop-pulse:1.6s;   /* spinners · pulsing dots; other loops are art motion and stay literal */
  /* sort-control (DR-51): the shared Covers / Approved sort pill; heights match the filter dropdowns (36), icon one step above the chevron */
  --sortc-h:36px; --sortc-gap:8px; --sortc-pad-l:12px; --sortc-pad-r:10px; --sortc-icon:16px; --sortc-chev:14px;
}
/* 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}
}