/* Theme tokens. The layout is the same everywhere (Workbench); a theme changes palette, type and shape.
   <html> carries data-family (workbench | editorial | console) and data-theme (light | dark), set before
   first paint by the inline script in index.html. */

:root,
:root[data-family="workbench"] {
  --font-body: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-display: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --mono-stretch: 87.5%;
  --display-stretch: 112%;
  --display-weight: 800;
  --display-tracking: -0.01em;
  --wordmark-stretch: 125%;
  --fs-body: 15px;
  --fs-mono: 12.5px;
  --label-font: var(--font-mono);
  --label-size: 11px;
  --label-case: uppercase;
  --label-tracking: 0.08em;
  --label-weight: 500;
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pill: 0px;
  --grid-size: 24px;
  --panel-shadow: none;
}

:root[data-family="editorial"] {
  --font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --mono-stretch: 100%;
  --display-stretch: 100%;
  --display-weight: 700;
  --display-tracking: -0.02em;
  --wordmark-stretch: 100%;
  --fs-body: 16px;
  --fs-mono: 13px;
  --label-font: var(--font-body);
  --label-size: 12px;
  --label-case: uppercase;
  --label-tracking: 0.06em;
  --label-weight: 600;
  --radius: 6px;
  --radius-sm: 4px;
  --radius-pill: 999px;
  --panel-shadow: 0 1px 2px rgb(22 32 46 / 0.06);
}

:root[data-family="console"] {
  --font-body: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --mono-stretch: 100%;
  --display-stretch: 100%;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --wordmark-stretch: 100%;
  --fs-body: 15px;
  --fs-mono: 13px;
  --label-font: var(--font-mono);
  --label-size: 11.5px;
  --label-case: none;
  --label-tracking: 0.02em;
  --label-weight: 500;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --panel-shadow: none;
}

/* ---------- Workbench ---------- */
:root,
:root[data-family="workbench"][data-theme="light"] {
  color-scheme: light;
  --bg: #F4F2EC;
  --grid: rgba(27, 26, 23, 0.055);
  --panel: #FBFAF7;
  --panel-2: #F1EEE6;
  --ink: #1B1A17;
  --muted: #5E5A52;
  --rule: #D9D5CA;
  --strong: #1B1A17;
  --panel-border: var(--strong);
  --accent: #C2410C;
  --accent-fill: #C2410C;
  --on-accent: #FFFFFF;
  --accent-soft: #FBE3D6;
  --pass: #1F6B52;
  --pass-soft: #DCEFE5;
  --fail: #B42318;
  --fail-soft: #FBE1DE;
  --warn: #8A5300;
  --warn-soft: #F6E8D2;
  --info: #1F5C99;
  --info-soft: #DDE8F5;
  --focus: #C2410C;
  --tab-on-bg: var(--ink);
  --tab-on-ink: var(--panel);
  --tab-on-shadow: none;
  --nav-on-shadow: inset 0 -3px 0 var(--accent);
  --code-bg: #FFFFFF;
  --code-ink: #1B1A17;
  --code-muted: #8A857A;
  --code-rule: #E4E0D6;
  --code-line: rgba(194, 65, 12, 0.05);
  --code-sel: rgba(194, 65, 12, 0.18);
  --code-cursor: #C2410C;
  --syn-k: #A3340A;
  --syn-t: #1F5C99;
  --syn-n: #6B3FA0;
  --syn-c: #736D63;
  --syn-s: #2E6B3A;
  --syn-f: #1B1A17;
  --syn-op: #4A463F;
}

:root[data-family="workbench"][data-theme="dark"],
:root:not([data-family])[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141413;
  --grid: rgba(255, 255, 255, 0.045);
  --panel: #1C1C1A;
  --panel-2: #232320;
  --ink: #ECE9E2;
  --muted: #A29D92;
  --rule: #34332F;
  --strong: #5A574F;
  --panel-border: var(--strong);
  --accent: #FF7A3D;
  --accent-fill: #FF7A3D;
  --on-accent: #141413;
  --accent-soft: #3A2216;
  --pass: #5FD3A6;
  --pass-soft: #14302A;
  --fail: #FF8A80;
  --fail-soft: #3A1A18;
  --warn: #F2C14E;
  --warn-soft: #3A2C17;
  --info: #7FB2F0;
  --info-soft: #182A40;
  --focus: #FF7A3D;
  --tab-on-bg: var(--ink);
  --tab-on-ink: #141413;
  --tab-on-shadow: none;
  --nav-on-shadow: inset 0 -3px 0 var(--accent);
  --code-bg: #171716;
  --code-ink: #ECE9E2;
  --code-muted: #8A857A;
  --code-rule: #2C2B28;
  --code-line: rgba(255, 122, 61, 0.06);
  --code-sel: rgba(255, 122, 61, 0.24);
  --code-cursor: #FF7A3D;
  --syn-k: #FF9F6B;
  --syn-t: #7FB2F0;
  --syn-n: #C8A6FF;
  --syn-c: #9A958A;
  --syn-s: #9BD49F;
  --syn-f: #FFFFFF;
  --syn-op: #C9C5BC;
}

/* ---------- Editorial ---------- */
:root[data-family="editorial"][data-theme="light"] {
  color-scheme: light;
  --bg: #EEF1F4;
  --grid: transparent;
  --panel: #F8FAFB;
  --panel-2: #EEF1F4;
  --ink: #16202E;
  --muted: #566274;
  --rule: #CBD3DC;
  --strong: #8D9AAA;
  --panel-border: var(--rule);
  --accent: #2346C4;
  --accent-fill: #2346C4;
  --on-accent: #FFFFFF;
  --accent-soft: #DCE3FA;
  --pass: #17694A;
  --pass-soft: #DDF0E6;
  --fail: #A4262C;
  --fail-soft: #F8E1E1;
  --warn: #9A5B0C;
  --warn-soft: #F6E8D2;
  --info: #2346C4;
  --info-soft: #DCE3FA;
  --focus: #2346C4;
  --tab-on-bg: transparent;
  --tab-on-ink: var(--ink);
  --tab-on-shadow: inset 0 -2px 0 var(--accent);
  --nav-on-shadow: inset 0 -2px 0 var(--accent);
  --code-bg: #18212E;
  --code-ink: #E2E8F0;
  --code-muted: #8B98AB;
  --code-rule: #2A3646;
  --code-line: rgba(157, 180, 255, 0.07);
  --code-sel: rgba(157, 180, 255, 0.26);
  --code-cursor: #9DB4FF;
  --syn-k: #9DB4FF;
  --syn-t: #7FD1C1;
  --syn-n: #F7A8C4;
  --syn-c: #8B98AB;
  --syn-s: #F0C27B;
  --syn-f: #FFFFFF;
  --syn-op: #C5CEDB;
}

:root[data-family="editorial"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #131B26;
  --grid: transparent;
  --panel: #192331;
  --panel-2: #1E2A3A;
  --ink: #E3E9F1;
  --muted: #9AA7B8;
  --rule: #2E3B4D;
  --strong: #4A5B71;
  --panel-border: var(--rule);
  --accent: #93AAFF;
  --accent-fill: #93AAFF;
  --on-accent: #131B26;
  --accent-soft: #24345E;
  --pass: #6FD6A3;
  --pass-soft: #163326;
  --fail: #FF9DA1;
  --fail-soft: #3A1D22;
  --warn: #E5A94F;
  --warn-soft: #3A2C17;
  --info: #93AAFF;
  --info-soft: #24345E;
  --focus: #93AAFF;
  --tab-on-bg: transparent;
  --tab-on-ink: var(--ink);
  --tab-on-shadow: inset 0 -2px 0 var(--accent);
  --nav-on-shadow: inset 0 -2px 0 var(--accent);
  --code-bg: #0F151E;
  --code-ink: #E2E8F0;
  --code-muted: #7D8A9C;
  --code-rule: #223044;
  --code-line: rgba(157, 180, 255, 0.06);
  --code-sel: rgba(157, 180, 255, 0.24);
  --code-cursor: #9DB4FF;
  --syn-k: #9DB4FF;
  --syn-t: #7FD1C1;
  --syn-n: #F7A8C4;
  --syn-c: #8B98AB;
  --syn-s: #F0C27B;
  --syn-f: #FFFFFF;
  --syn-op: #C5CEDB;
  --panel-shadow: none;
}

/* ---------- Midnight console ---------- */
:root[data-family="console"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0D0C;
  --grid: transparent;
  --panel: #0F1412;
  --panel-2: #141A17;
  --ink: #DCE5DF;
  --muted: #8A9A91;
  --rule: #1F2925;
  --strong: #34433C;
  --panel-border: var(--rule);
  --accent: #B8F24C;
  --accent-fill: #B8F24C;
  --on-accent: #0A0D0C;
  --accent-soft: #1A2A12;
  --pass: #B8F24C;
  --pass-soft: #1A2A12;
  --fail: #FF7B93;
  --fail-soft: #2E141A;
  --warn: #F2C14E;
  --warn-soft: #2D2612;
  --info: #6FD3E0;
  --info-soft: #10282B;
  --focus: #B8F24C;
  --tab-on-bg: var(--panel);
  --tab-on-ink: var(--ink);
  --tab-on-shadow: inset 0 2px 0 var(--accent);
  --nav-on-shadow: inset 0 -2px 0 var(--accent);
  --code-bg: #0B100E;
  --code-ink: #DCE5DF;
  --code-muted: #5E6E66;
  --code-rule: #1A2320;
  --code-line: rgba(184, 242, 76, 0.045);
  --code-sel: rgba(184, 242, 76, 0.2);
  --code-cursor: #B8F24C;
  --syn-k: #C3A6FF;
  --syn-t: #6FD3E0;
  --syn-n: #FF9E7A;
  --syn-c: #7D8E85;
  --syn-s: #F2C14E;
  --syn-f: #FFFFFF;
  --syn-op: #AEBBB3;
}

:root[data-family="console"][data-theme="light"] {
  color-scheme: light;
  --bg: #E9EDE4;
  --grid: transparent;
  --panel: #FAFBF7;
  --panel-2: #EEF1E8;
  --ink: #121814;
  --muted: #56625A;
  --rule: #D5DBD0;
  --strong: #A3AE9F;
  --panel-border: var(--rule);
  --accent: #3F6E0A;
  --accent-fill: #B8F24C;
  --on-accent: #0A0D0C;
  --accent-soft: #E6F4CF;
  --pass: #3F6E0A;
  --pass-soft: #E6F4CF;
  --fail: #B3261E;
  --fail-soft: #F8E0DE;
  --warn: #8A5A00;
  --warn-soft: #F5EBD3;
  --info: #0B6E7A;
  --info-soft: #DCEFF1;
  --focus: #3F6E0A;
  --tab-on-bg: var(--panel);
  --tab-on-ink: var(--ink);
  --tab-on-shadow: inset 0 2px 0 var(--accent);
  --nav-on-shadow: inset 0 -2px 0 var(--accent);
  --code-bg: #FCFDFA;
  --code-ink: #121814;
  --code-muted: #8A958D;
  --code-rule: #E1E6DC;
  --code-line: rgba(63, 110, 10, 0.05);
  --code-sel: rgba(63, 110, 10, 0.16);
  --code-cursor: #3F6E0A;
  --syn-k: #6B3FC0;
  --syn-t: #0B6E7A;
  --syn-n: #B23A14;
  --syn-c: #5F6C64;
  --syn-s: #8A5A00;
  --syn-f: #121814;
  --syn-op: #3D4740;
}