/* ============================================================================
   VANINI DESIGN TOKENS — the single source of truth for every surface.

   Decided 2026-08-18: ONE system everywhere. The public artist site, /store,
   /thevault, /download, /drop and HQ all read this file. Matrix green
   (#00ff41) is retired — it is no longer the tool-surface accent and must not
   be reintroduced. The old "tools are green, the artist site is No.155" split
   is dead; anything still green is a page that has not been converted yet.

   RULES (enforced by scripts/check-style.sh, run it before claiming done):
     1. Colour values live HERE and nowhere else. No raw hex in page CSS.
        Use var(--token). If a colour is missing, add it here first.
     2. Every page links this file before any other stylesheet.
     3. Type, spacing, radii and motion also come from here.

   Palette is lifted from デザイン No.155 (March 1972), reference image at
   static/img/design-155.jpg. Do not round or "improve" these values.
   Rejected palettes, do not reintroduce: Chroma (#ff2d95 / #7a2dff /
   #00e5ff / #c8ff00), Matrix green (#00ff41).
   ========================================================================= */

/* --- type faces ---------------------------------------------------------- */
/* Switzer (Fontshare, ITF Free Font License — static/fonts/SWITZER-LICENSE.txt).
   Chosen 2026-08-18 to replace Anton as the display face. Variable, one file
   for the whole weight range, so a 900-weight headline costs no extra request. */
@font-face {
  font-family: 'Switzer';
  src: url('/static/fonts/Switzer-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/static/fonts/Switzer-VariableItalic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- palette: raw No.155 values ---------------------------------------- */
  --ground: #22190f;  /* warm dark ground */
  --bone:   #f2f0e9;  /* rules, type, box labels */
  --cad:    #f2c230;  /* cadmium yellow — the cover's field */
  --pur:    #5b2d91;  /* purple — the cover's gradient blob */
  --mag:    #b0247f;  /* magenta */
  --plum:   #6d2b3f;  /* plum — the cover's textile panels */
  /* --mag is a fill colour (gradient blobs, panels): 2.8:1 on --ground, fails
     AA for text. --mag-tint is the same hue at 9.2:1 — use it for type. */
  --mag-tint: #f0a4e6;

  /* --- blush: added 2026-09-01 from the reference read (Phase 2) ----------
     The single most repeated colour across the 15 uploaded references and the
     one field the No.155 set never had: House of Honey's whole second surface,
     the Bristol Dockyards panel, the Olivia Dean tint. It is the warm mid-tone
     that lets a dark ground breathe without going to full bone. Fill and large
     shapes only — 1.4:1 on --bone, so never type on a light ground. */
  --blush:     #e8d0c6;
  --blush-rgb: 232, 208, 198;

  /* derived grounds — mixed from the palette, never invented */
  --ground-1: #2c2113;  /* raised surface: cards, rows */
  --ground-2: #3a2c1b;  /* hover / pressed */
  --rule:     #4a3a25;  /* hairlines, borders */

  /* --- semantic aliases: what page CSS should actually use --------------- */
  --bg:          var(--ground);
  --surface:     var(--ground-1);
  --surface-alt: var(--ground-2);
  --border:      var(--rule);
  --text:        var(--bone);
  --text-dim:    #b9b0a0;   /* 7.1:1 on --ground */
  --text-faint:  #8b8171;   /* 4.6:1 on --ground — labels only, never body */
  --accent:      var(--cad);
  /* Channel list, for rgba(var(--accent-rgb), α) — CSS cannot take an alpha
     off a hex custom property, and the old code hid the retired green inside
     rgba(0,255,65,α) glows where a hex-only scan never found it. */
  --accent-rgb:  242, 194, 48;
  --bone-rgb:    242, 240, 233;
  --ground-rgb:  34, 25, 15;
  --accent-ink:  var(--ground);  /* type placed ON --accent */
  --link:        var(--cad);
  --danger:      #e05c4b;
  --ok:          #7fb069;

  /* --- type -------------------------------------------------------------- */
  --display: 'Switzer', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans:    'Switzer', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* display weights — Switzer is variable, so headlines go heavy and tight */
  --display-weight: 800;
  --display-tracking: -0.03em;
  --display-leading: 0.92;

  /* micro-labels — the one device present in EVERY reference, editorial and
     hardware alike: a tiny tracked uppercase title with a data string under it
     (coordinates, catalogue no., date, section name). It is what makes the
     House of Honey grid and the Moduleur front panel read as the same move.
     Use --text-faint for these and nothing smaller than --label-size. */
  --label-size:     0.6875rem;
  --label-tracking: 0.14em;
  --label-weight:   500;

  --step-0: 0.6875rem;
  --step-1: 0.8125rem;
  --step-2: 1rem;
  --step-3: 1.375rem;
  --step-4: 2rem;
  --step-5: clamp(2.75rem, 8vw, 5.5rem);
  --step-6: clamp(3.5rem, 12vw, 9rem);  /* noho-scale hero type */

  /* --- space ------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 22px;
  --space-5: 34px;
  --space-6: 58px;
  --space-7: 96px;

  /* page gutter — the fix for text sitting flush against the viewport edge */
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 68ch;   /* max line length for body copy */

  /* --- radii ------------------------------------------------------------- */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 16px;
  --radius-pill: 999px;

  /* --- motion ------------------------------------------------------------ */
  /* Durations are deliberately short. Anything that moves on every page load
     gets --dur-fast; only deliberate, once-per-view reveals get --dur-slow. */
  --dur-fast: .18s;
  --dur-mid:  .32s;
  --dur-slow: .5s;
  --dur-reveal: .9s;

  --ease-out:  cubic-bezier(.2,.7,.3,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  /* the noho.ink feel: long tail, no overshoot — used for scroll reveals */
  --ease-expo: cubic-bezier(.16,1,.3,1);
  /* the iOS drawer curve — leaves fast, lands without a bounce. For anything
     that slides in from an edge: bottom sheets, side panels. */
  --ease-drawer: cubic-bezier(.32,.72,0,1);
  --stagger: .06s;   /* per-item delay in a staggered reveal */
}

/* Motion tokens collapse for anyone who asked the OS not to animate. Page CSS
   still reads the same var names, so this needs no per-page opt-in. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: .01ms;
    --dur-mid: .01ms;
    --dur-slow: .01ms;
    --dur-reveal: .01ms;
    --stagger: 0s;
  }
}

/* ── Light surface ─────────────────────────────────────────────────────────
   Same No.155 palette, inverted for dense working surfaces (the HQ dashboard,
   which is read for hours in daylight and was always a light theme). Set
   class="theme-light" on <html>. This is NOT a second design system: the hues
   are identical, only ground and ink swap, and the accent moves from cadmium
   (unreadable as text on a light ground, 1.6:1) to plum, which carries the
   same warmth at 9.4:1. Cadmium stays available as a highlight fill. */
:root.theme-light {
  --paper:      #f7f5ef;  /* page ground */
  --paper-1:    #f1eee5;  /* raised surface */
  --paper-2:    #e8e4d8;  /* hover / pressed */
  --ink:        #262019;  /* body text */

  --bg:          var(--paper);
  --surface:     var(--paper-1);
  --surface-alt: var(--paper-2);
  --border:      #d8d2c4;
  --text:        var(--ink);
  --text-dim:    #5c5449;   /* 7.4:1 on --paper */
  --text-faint:  #857c6e;   /* 4.6:1 — labels only */
  --accent:      var(--plum);
  --accent-rgb:  109, 43, 63;
  --accent-ink:  var(--bone);   /* type placed ON --accent */
  --link:        var(--pur);
  --highlight:   var(--cad);    /* fills, badges, chart marks — never text */
  --danger:      #a3271c;
  --ok:          #3d6b2f;
}