/* John Stenson Law — design tokens. SINGLE SOURCE OF TRUTH.
   Every surface (site, brand guide, audit, CMS) links this file FIRST and defines no color tokens of its own.
   Dark is the brand's home; light is paper mode. Toggle = .theme-toggle button + /theme/theme.js.
   Doctrine: docs/BRAND.md §6. v1 · 2026-08-28 */

:root{
  color-scheme:dark;
  --bg:#0B0A09;
  --surface:#151311;
  --elevated:#1C1916;
  --paper:#F3EEE6;   /* primary text; the honest page */
  --soft:#C9C1B5;    /* reading-layer body text */
  --muted:#9A9188;
  --subtle:#6F6860;
  --crimson:#C81E3A; /* the pocket square — spend it like it costs something */
  --ink:#0B0A09;     /* text on paper-filled elements (primary buttons) */
  --border:#2C2824;
  --glass:rgba(11,10,9,.78);     /* sticky chrome */
  --glass-2:rgba(21,19,17,.88);  /* cards over photography */
  --r-sm:8px; --r-md:12px; --r-lg:20px;
  --display:"Bebas Neue","Arial Narrow",sans-serif;
  --body:"Figtree",-apple-system,"Helvetica Neue",sans-serif;
  --shadow-lg:0 30px 70px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.3);
  --shadow-md:0 14px 34px rgba(0,0,0,.32);
  --edge:inset 0 1px 0 rgba(243,238,230,.05);
}

:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F3EEE6;
  --surface:#ECE5D9;
  --elevated:#E2D9CA;
  --paper:#171310;
  --soft:#4E4740;
  --muted:#6F6860;
  --subtle:#8A8175;
  --crimson:#B4182F; /* deepened for contrast on paper */
  --ink:#F6F1E8;
  --border:rgba(11,10,9,.16);
  --glass:rgba(243,238,230,.82);
  --glass-2:rgba(236,229,217,.92);
  --shadow-lg:0 24px 60px rgba(31,24,14,.16),0 6px 18px rgba(31,24,14,.10);
  --shadow-md:0 10px 26px rgba(31,24,14,.13);
  --edge:inset 0 1px 0 rgba(255,255,255,.55);
}

/* Photography and the walk stay cinematic: any element with .dark-island
   (or inside one) keeps the dark palette in light mode. */
:root[data-theme="light"] .dark-island{
  --bg:#0B0A09; --surface:#151311; --elevated:#1C1916;
  --paper:#F3EEE6; --soft:#C9C1B5; --muted:#9A9188; --subtle:#6F6860;
  --crimson:#C81E3A; --ink:#0B0A09; --border:#2C2824;
  --glass:rgba(11,10,9,.78); --glass-2:rgba(21,19,17,.88);
  color-scheme:dark;
}

/* film grain steps back in light mode */
:root[data-theme="light"] .grain{opacity:.025; mix-blend-mode:multiply}

/* the shared theme toggle — corner-stop glyph + the mode it offers */
.theme-toggle{display:inline-flex; align-items:center; gap:7px; font:600 12px/1 var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:transparent; border:1px solid var(--border); border-radius:999px; padding:8px 13px; cursor:pointer; white-space:nowrap; flex:none}
.theme-toggle:hover{color:var(--paper); border-color:var(--muted)}
.theme-toggle:focus-visible{outline:2px solid var(--paper); outline-offset:2px}
.theme-toggle b{width:8px; height:8px; border-right:2.5px solid var(--crimson); border-bottom:2.5px solid var(--crimson); flex:none}
.theme-toggle::after{content:"Light"}
:root[data-theme="light"] .theme-toggle::after{content:"Dark"}