/* ════════════════════════════════════════════════════════════════════════
   shelf-tokens.css — DVS · "Shelf / Backroom" direction — 2026-07-19 v1.0
   Variable NAMES are the live engineering contract (unchanged). VALUES are
   the new direction. De-fingerprinted from Dark-Aurora (holo), dojo (cream
   blob) and TVF lineage.

   SYSTEM IN ONE LINE:
   · Neutral chrome — pure WHITE (Front-light) and pure BLACK (Backroom) grounds.
   · Every brand owns ONE vivid color, injected per page-root as --brand /
     --brand-2 (see _data/vosColors.js + base.njk body inline style).
   · Two visual languages selected by [data-theme="light"|"dark"] on the
     page root. :root defaults = light, so the live :root build stays light.
   · Type: Sora (display), Manrope (body), IBM Plex Mono
     (technical labels / spec kickers).
   ════════════════════════════════════════════════════════════════════════ */

/* ── DEFAULTS = FRONT-LIGHT. :root keeps the live build light. ──────
   Light values also apply to a .dvs-invert band sitting inside a dark page,
   so an inverted band flips to the OPPOSITE ground of its page. ───────── */
:root,
[data-theme="light"],
[data-theme="dark"] .dvs-invert {
  /* SUBSTRATE — pure white, near-white alt sections */
  --dvs-paper:        #FCFCFA;
  --dvs-paper-deep:   #F1F2ED;
  --dvs-paper-warm:   #EAEDE2;
  --dvs-surf-solid:   #FFFFFF;
  --dvs-leaf-bg:      #FCFCFA;

  /* INK — near-black on white */
  --dvs-ink:          #101208;
  --dvs-ink-2:        #3F4436;
  --dvs-ink-3:        #6F7563;
  --dvs-ink-4:        #9EA391;
  --dvs-hair:         rgba(16,18,8,0.10);
  --dvs-hair-2:       rgba(16,18,8,0.16);
  --dvs-on-accent:    #FFFFFF;

  /* GLASS — opaque white cards w/ hairline (no blur in Front-light) */
  --dvs-frost:        #FFFFFF;
  --dvs-frost-deep:   #F7F7F5;
  --dvs-frost-edge:   rgba(16,18,8,0.10);
  --dvs-frost-grad:   #FFFFFF;
  --dvs-frost-blur:   none;
  --dvs-frost-shadow: 0 1px 2px rgba(16,18,8,.05), 0 12px 28px -18px rgba(16,18,8,.18);

  /* BRAND (default house violet — overridden per page root by vosColors) */
  --brand:            #4D7C0F;
  --brand-2:          #A3E635;
  --brand-ink:        var(--brand);
  --brand-tile:       color-mix(in srgb, var(--brand) 12%, #FFFFFF);
  --brand-soft:       color-mix(in srgb, var(--brand) 8%, #FFFFFF);
  --dvs-holo:         var(--brand);

  /* SIGNAL (functional) */
  --dvs-signal-ok:    #1AA35A;
  --dvs-signal-warn:  #C97A12;
  --dvs-signal-err:   #DC2A2A;
  --dvs-signal-info:  #2563EB;
  --dvs-red:          #DC2A2A;

  /* legacy aliases mapped to the new neutral system */
  --dvs-paper-2:      #F1F2ED;
  --dvs-yellow:       var(--brand);
  --dvs-accent:       var(--brand);
  --dvs-card:         #FFFFFF;
  --dvs-tile-ink:     #101208;
  --dvs-on-tile:      #101208;
  --dvs-ink-muted:    #6F7563;
  --dvs-rule-lite:    rgba(16,18,8,0.14);
  --dvs-rule:         rgba(16,18,8,0.10);
  --dvs-ok:           #1AA35A;
  --dvs-font-sans:    var(--dvs-font-body);
  --dvs-pad-x-lite:   40px;
}

/* ── BACKROOM (dark) — pure-black ground, bright brand tiles, heavy type.
   Dark values also apply to a .dvs-invert band inside a light page. ───── */
[data-theme="dark"],
[data-theme="light"] .dvs-invert {
  /* Neon Cabinet ground — pure near-black cabinet, cool neutral surfaces */
  --dvs-paper:        #0A0A0D;
  --dvs-paper-deep:   #141419;
  --dvs-paper-warm:   #1A1A20;
  --dvs-surf-solid:   #17171D;
  --dvs-leaf-bg:      #0A0A0D;

  --dvs-ink:          #F4F4EF;
  --dvs-ink-2:        #9A9AA4;
  --dvs-ink-3:        #74757E;
  --dvs-ink-4:        #54555E;
  --dvs-hair:         rgba(255,255,255,0.09);
  --dvs-hair-2:       rgba(255,255,255,0.16);
  --dvs-on-accent:    #0A0A0D;

  --dvs-frost:        #17171D;
  --dvs-frost-deep:   #1C1C22;
  --dvs-frost-edge:   rgba(255,255,255,0.11);
  --dvs-frost-grad:   linear-gradient(180deg,#1A1A21,#131318);
  --dvs-frost-blur:   none;
  --dvs-frost-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 50px -28px rgba(0,0,0,.85);
  /* neon-cabinet accent glow (brand-tinted) */
  --dvs-glow:         0 0 26px color-mix(in srgb, var(--brand-2) 55%, transparent);

  --brand-ink:        var(--brand-2);
  --brand-tile:       color-mix(in srgb, var(--brand-2) 26%, #0C0E08);
  --brand-soft:       color-mix(in srgb, var(--brand-2) 14%, #0C0E08);
  --dvs-on-tile:      #0C0E08;

  --dvs-signal-ok:    #36D17E;
  --dvs-signal-warn:  #F0B23A;
  --dvs-signal-err:   #FF6B6B;
  --dvs-signal-info:  #5B9BFF;
  --dvs-red:          #FF6B6B;
  --dvs-card:         #14170F;
}

:root {
  /* ── TYPE STACKS (de-fingerprinted: no Bricolage/Inter/Fraunces) ── */
  --dvs-font-display: "Sora", system-ui, sans-serif;
  --dvs-font-anton:   "Anton", Impact, "Arial Narrow", sans-serif;
  --dvs-font-body:    "Manrope", system-ui, -apple-system, sans-serif;
  --dvs-font-serif:   "Sora", Georgia, serif;
  --dvs-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* ── TYPE SCALE (H1 stepped down + H2 tightened vs sibling scale) ── */
  --dvs-fs-h1-xl: 64px;
  --dvs-fs-h1:    44px;
  --dvs-fs-h2:    30px;
  --dvs-fs-h3:    24px;
  --dvs-fs-h4:    19px;
  --dvs-fs-lead:  19px;
  --dvs-fs-body:  16px;
  --dvs-fs-small: 13px;
  --dvs-fs-micro: 11px;
  --dvs-fs-mono-sm: 11px;

  /* ── LINE HEIGHTS ── */
  --dvs-lh-tight: 1.06;
  --dvs-lh-snug:  1.18;
  --dvs-lh-body:  1.6;
  --dvs-lh-loose: 1.72;

  /* ── TRACKING ── */
  --dvs-tr-display: -0.02em;
  --dvs-tr-body:    0em;
  --dvs-tr-mono:    0.14em;

  /* ── RADII — "shelf label" geometry: tiny radii everywhere, NO pills.
     --dvs-r-pill is kept as the contract name but resolves to a label corner,
     so every legacy pill consumer square-cuts automatically. ── */
  --dvs-r-xs:   3px;
  --dvs-r-sm:   5px;
  --dvs-r-md:   6px;
  --dvs-r-lg:   8px;
  --dvs-r-xl:   10px;
  --dvs-r-pill: 5px;

  /* ── SPACING SCALE ── */
  --dvs-s-1: 4px;  --dvs-s-2: 8px;  --dvs-s-3: 12px; --dvs-s-4: 16px;
  --dvs-s-5: 20px; --dvs-s-6: 24px; --dvs-s-8: 32px; --dvs-s-10: 40px;
  --dvs-s-12: 48px; --dvs-s-16: 64px; --dvs-s-20: 80px;

  /* ── LAYOUT WIDTHS ── */
  --dvs-max-w:     1200px;
  --dvs-max-w-nb:  860px;
  --dvs-pad-x:     40px;
  --dvs-pad-x-md:  32px;
  --dvs-pad-x-sm:  20px;

  /* ── ELEVATION ── */
  --dvs-elev-1: 0 1px 2px rgba(16,18,8,.06);
  --dvs-elev-2: 0 12px 30px -18px rgba(16,18,8,.20);
  --dvs-elev-3: 0 30px 70px -30px rgba(16,18,8,.28);

  /* ── MOTION ── */
  --dvs-ease:        cubic-bezier(.2, .8, .25, 1);
  --dvs-ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dvs-dur-fast:    110ms;
  --dvs-dur-base:    190ms;
  --dvs-dur-slow:    300ms;

  /* ── Z-LAYERS ── */
  --dvs-z-base:    0;  --dvs-z-sticky:  10; --dvs-z-overlay: 20;
  --dvs-z-modal:   40; --dvs-z-toast:   60;
}

/* Backroom tightens radii to read harder-edged / retail-signage. */
[data-theme="dark"] {
  --dvs-r-lg: 6px;
  --dvs-r-md: 5px;
  --dvs-r-sm: 4px;
}

/* ════════════════════════════════════════════════════════════════════════
   NEON CABINET overrides (2026-07-19 redesign) — appended, wins by position.
   Site now runs Backroom by default. Invert bands must NOT flip to white:
   they become LIFTED-DARK panels so band rhythm survives in-theme.
   ════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .dvs-invert {
  --dvs-paper:      #101016;
  --dvs-paper-deep: #17171D;
  --dvs-paper-warm: #1A1A20;
  --dvs-surf-solid: #1C1C22;
  --dvs-leaf-bg:    #101016;
  --dvs-ink:        #F4F4EF;
  --dvs-ink-2:      #9A9AA4;
  --dvs-ink-3:      #74757E;
  --dvs-ink-4:      #54555E;
  --dvs-hair:       rgba(255,255,255,0.09);
  --dvs-hair-2:     rgba(255,255,255,0.16);
  --dvs-on-accent:  #0A0A0D;
  --dvs-frost:      #1C1C22;
  --dvs-frost-deep: #232329;
  --dvs-frost-edge: rgba(255,255,255,0.11);
  --dvs-frost-grad: linear-gradient(180deg,#1F1F26,#161619);
  --brand-ink:      var(--brand-2);
  --dvs-card:       #17171D;
  --dvs-signal-ok:  #36D17E;
  --dvs-signal-warn:#F0B23A;
  --dvs-signal-err: #FF6B6B;
  --dvs-red:        #FF6B6B;
}
/* Invert band edge: neon brand hairline instead of the double ink rule. */
[data-theme="dark"] .dvs-invert.dvs-invert,
.dvs-leaf[data-theme] .dvs-invert {
  border-top: 1px solid var(--dvs-hair-2);
  border-bottom: 1px solid var(--dvs-hair-2);
}