/* ============================================================
   vp-tokens.css — SINGLE SOURCE OF TRUTH for design tokens.
   Linked LAST on every page, so it wins the cascade over the
   (identical) inline definitions. Values are byte-for-byte the
   same as what's already inline, so adding this changes NOTHING
   visually — but from now on, change a token HERE and it changes
   on every page. Nothing was deleted, so nothing can break.
   ============================================================ */

/* --- warm-dark (canonical, also serves :root pages) --- */
:root,
.vp-case[data-theme="dark"] {
  --vp-frame: #0C0B09;
  /* These two never get overridden by [data-act="cool"] — they
     always point to the warm and cool frame colors so the section
     transition gradients can reference both. */
  --vp-frame-warm: #0C0B09;
  --vp-frame-cool: #0A0E16;
  --vp-surface: #1A1814;
  --vp-lift: #252219;
  /* Dust and ash bumped brighter so small text at 11–13px clears
     a comfortable contrast ratio (7:1+) instead of the 5:1 the
     old values were giving. Visual hierarchy preserved: ink >
     ink-dim > dust > ash > ash-2. */
  --vp-dust: #B0A088;
  --vp-dust-2: #C8B89C;
  --vp-highlight: #E5B068;
  --vp-ash: #A29A8C;
  --vp-ash-2: #6E6961;
  --vp-ink: #EDE9E1;
  --vp-ink-dim: #C8C2B5;
  --vp-line: rgba(237, 233, 225, 0.10);
  --vp-line-2: rgba(237, 233, 225, 0.18);
  --vp-shade: rgba(0, 0, 0, 0.4);
  /* Cream matting for photographed artifacts (workshop boards,
     etc.) so pastel/light images don't clash with the warm dark
     page. The mat bridges the temperature gap. */
  --vp-mat: #EDE9E1;
}

/* --- light theme (currently disabled site-wide) --- */
.vp-case[data-theme="light"] {
  --vp-frame: #F2EDE2;
  --vp-surface: #FFFFFF;
  --vp-lift: #EBE5D5;
  /* Light-mode dust and ash darkened for the same contrast bump
     applied in dark mode. Now 7:1+ instead of borderline 5:1. */
  --vp-dust: #594830;
  --vp-dust-2: #382E1F;
  --vp-highlight: #B47820;
  --vp-ash: #4E483D;
  --vp-ash-2: #807A70;
  --vp-ink: #1A1814;
  --vp-ink-dim: #4A4640;
  --vp-line: rgba(26, 24, 20, 0.12);
  --vp-line-2: rgba(26, 24, 20, 0.22);
  --vp-shade: rgba(26, 24, 20, 0.05);
  /* White mat in light mode — provides slight contrast against
     the cream page so the photographed artifact has a frame. */
  --vp-mat: #FFFFFF;
}

/* --- additive scales (new tokens; not previously defined) --- */
:root, .vp-case {
  --r-chip:4px; --r-base:8px; --r-panel:16px; --r-pill:999px;
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:160ms; --dur:200ms; --dur-slow:320ms;
  --e-card:0 30px 90px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(237,233,225,0.06);
  --e-glow:0 0 18px rgba(229,176,104,0.45);
}