/* The Drawer. tokens.css
 * BRIEF-169 step 1. The Bench token sheet, extracted verbatim from
 * thedrawer/docs/The_Bench_-_Design_Set.html. One vocabulary, five value
 * sets. Register lives at data-skin, theme at data-theme, both applied to
 * the html element by skin.js before first paint.
 * Token names are never renamed or extended without a gate.
 */

[data-skin] {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', system-ui, sans-serif;

  --t-display: clamp(38px, 6vw, 64px);
  --t-title: clamp(26px, 3.4vw, 36px);
  --t-lead: 19px;
  --t-body: 16px;
  --t-small: 14px;
  --t-micro: 11px;

  --s1: 6px; --s2: 12px; --s3: 20px; --s4: 32px; --s5: 52px; --s6: 84px;

  --tap: 48px;
  --stage-max: 760px;
  --frame-max: 1180px;
}

/* WORKSHOP LIGHT. Pegboard and paper. Hard edges, printed ink, offset block shadow. */
[data-skin="workshop"][data-theme="light"] {
  --ground: #EFE7D8; --ground-sunk: #E3D8C3; --panel: #FBF7EF; --panel-raised: #FFFFFF;
  --ink: #14110C; --ink-soft: #4B4437; --ink-faint: #8B8271;
  --line: #D3C5AB; --line-strong: #14110C;
  --accent: #D93A14; --accent-soft: #FADCD1; --accent-ink: #FFF8F4;
  --mark: #1E39A8; --mark-soft: #DDE2F8;
  --good: #3C7548; --warn: #A87508; --stop: #AE2C1D;
  --focus: #1E39A8;
  --border-w: 2px; --border-w-heavy: 3px;
  --radius: 3px; --radius-lg: 6px; --radius-pill: 999px;
  --shadow: 4px 4px 0 var(--line-strong);
  --shadow-lift: 7px 7px 0 var(--line-strong);
  --press: translate(3px, 3px);
  --label-case: uppercase; --label-track: 0.16em; --label-weight: 500;
  --pattern: radial-gradient(var(--line) 1.2px, transparent 1.2px);
  --pattern-size: 22px 22px;
  --display-style: normal;
}

/* WORKSHOP DARK. Same pegboard after hours. */
[data-skin="workshop"][data-theme="dark"] {
  --ground: #141513; --ground-sunk: #0E0F0E; --panel: #1C1E1C; --panel-raised: #242724;
  --ink: #F2F0E9; --ink-soft: #B3B4AC; --ink-faint: #7F817A;
  --line: #2E312E; --line-strong: #4C514B;
  --accent: #FF6B3D; --accent-soft: #33201A; --accent-ink: #15100C;
  --mark: #8DA1FF; --mark-soft: #1D2138;
  --good: #79B183; --warn: #DDA83C; --stop: #E2664F;
  --focus: #8DA1FF;
  --border-w: 2px; --border-w-heavy: 3px;
  --radius: 3px; --radius-lg: 6px; --radius-pill: 999px;
  --shadow: 4px 4px 0 #070806;
  --shadow-lift: 7px 7px 0 #070806;
  --press: translate(3px, 3px);
  --label-case: uppercase; --label-track: 0.16em; --label-weight: 500;
  --pattern: radial-gradient(#262925 1.2px, transparent 1.2px);
  --pattern-size: 22px 22px;
  --display-style: normal;
}

/* OFFICE LIGHT. Same house, better posture. Thin rules, soft lift, no pattern. */
[data-skin="office"][data-theme="light"] {
  --ground: #F0F1EF; --ground-sunk: #E5E8E5; --panel: #FFFFFF; --panel-raised: #FFFFFF;
  --ink: #181B1A; --ink-soft: #4E5553; --ink-faint: #8B9391;
  --line: #DBDFDD; --line-strong: #C2C8C6;
  --accent: #9C3A1C; --accent-soft: #F4E5DF; --accent-ink: #FFFFFF;
  --mark: #2F3E6B; --mark-soft: #E4E8F2;
  --good: #386B47; --warn: #8A6712; --stop: #94301F;
  --focus: #2F3E6B;
  --border-w: 1px; --border-w-heavy: 1px;
  --radius: 2px; --radius-lg: 3px; --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(20,25,24,.05), 0 10px 28px rgba(20,25,24,.05);
  --shadow-lift: 0 2px 4px rgba(20,25,24,.06), 0 18px 44px rgba(20,25,24,.08);
  --press: none;
  --label-case: uppercase; --label-track: 0.1em; --label-weight: 500;
  --pattern: none;
  --pattern-size: auto;
  --display-style: normal;
}

/* OFFICE DARK. */
[data-skin="office"][data-theme="dark"] {
  --ground: #121415; --ground-sunk: #0D0F10; --panel: #1A1D1E; --panel-raised: #212526;
  --ink: #ECEFEE; --ink-soft: #A7AFAD; --ink-faint: #737B79;
  --line: #292E2F; --line-strong: #39403F;
  --accent: #D9805F; --accent-soft: #32211A; --accent-ink: #16100C;
  --mark: #97A6CE; --mark-soft: #1E2434;
  --good: #6FA57C; --warn: #C79B3F; --stop: #D07358;
  --focus: #97A6CE;
  --border-w: 1px; --border-w-heavy: 1px;
  --radius: 2px; --radius-lg: 3px; --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.30);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.38);
  --press: none;
  --label-case: uppercase; --label-track: 0.1em; --label-weight: 500;
  --pattern: none;
  --pattern-size: auto;
  --display-style: normal;
}

/* NO SKIN. Structure proof. Every primitive must survive this. */
[data-skin="none"] {
  --ground: #fff; --ground-sunk: #fff; --panel: #fff; --panel-raised: #fff;
  --ink: #000; --ink-soft: #000; --ink-faint: #000;
  --line: #000; --line-strong: #000;
  --accent: #000; --accent-soft: #fff; --accent-ink: #fff;
  --mark: #000; --mark-soft: #fff;
  --good: #000; --warn: #000; --stop: #000;
  --focus: #000;
  --border-w: 1px; --border-w-heavy: 1px;
  --radius: 0; --radius-lg: 0; --radius-pill: 0;
  --shadow: none; --shadow-lift: none; --press: none;
  --label-case: none; --label-track: 0; --label-weight: 400;
  --pattern: none; --pattern-size: auto;
}