/*
  Theme tokens. Three designs (signal, space, noir), each with a light and a
  dark mode. The accent color is user-adjustable and set on :root as --accent;
  --on-accent is computed in JS for readable text on accent fills.
*/

:root {
  --accent: var(--accent-default);
  --on-accent: #fff;
  --radius: 0px;
  --gap: 14px;
  color-scheme: light;
}

/* ------------------------------------------------------------------ SIGNAL */
:root[data-theme="signal"] {
  --font-display: 'Anton', 'Impact', sans-serif;
  --font-ui: 'IBM Plex Mono', ui-monospace, monospace;
  --font-text: 'IBM Plex Mono', ui-monospace, monospace;
  --display-tracking: 0;
  --ui-tracking: 0.12em;
  --ui-case: uppercase;
  --radius: 0px;
  --gap: 14px;
}
:root[data-theme="signal"][data-mode="light"] {
  --accent-default: #e5432b;
  --bg: #ecebe6;
  --bg-2: #e3e2dc;
  --fg: #111111;
  --muted: #5d5c57;
  --faint: #8d8b85;
  --line: rgba(17, 17, 17, 0.2);
  --line-strong: #111111;
  --surface: rgba(236, 235, 230, 0.9);
  --surface-solid: #ecebe6;
  --input: rgba(17, 17, 17, 0.04);
  --deco: rgba(17, 17, 17, 0.12);
  --shadow: none;
}
:root[data-theme="signal"][data-mode="dark"] {
  --accent-default: #ff5a3c;
  --bg: #0f0f0e;
  --bg-2: #171715;
  --fg: #ecebe6;
  --muted: #a3a19a;
  --faint: #6f6d67;
  --line: rgba(236, 235, 230, 0.18);
  --line-strong: #ecebe6;
  --surface: rgba(18, 18, 17, 0.9);
  --surface-solid: #121211;
  --input: rgba(236, 235, 230, 0.05);
  --deco: rgba(236, 235, 230, 0.1);
  --shadow: none;
  color-scheme: dark;
}

/* ------------------------------------------------------------------- SPACE */
:root[data-theme="space"] {
  --font-display: 'Bowlby One', 'Arial Black', sans-serif;
  --font-ui: 'Oswald', 'Arial Narrow', sans-serif;
  --font-text: 'DM Mono', ui-monospace, monospace;
  --display-tracking: 0.01em;
  --ui-tracking: 0.08em;
  --ui-case: uppercase;
  --radius: 22px;
  --gap: 16px;
}
:root[data-theme="space"][data-mode="light"] {
  --accent-default: #111111;
  --bg: #ecebe8;
  --bg-2: #e2e1dd;
  --fg: #111111;
  --muted: #4a4a4a;
  --faint: #7d7d7d;
  --line: #111111;
  --line-strong: #111111;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --input: #ffffff;
  --blob: #111111;
  --star: #ffffff;
  --paper: #ffffff;
  --ink: #111111;
  --shadow: 6px 6px 0 #111111;
  --title-fill: #ffffff;
}
:root[data-theme="space"][data-mode="dark"] {
  --accent-default: #f4f3ef;
  --bg: #0c0c0c;
  --bg-2: #151515;
  --fg: #f4f3ef;
  --muted: #b9b8b3;
  --faint: #85847f;
  --line: #f4f3ef;
  --line-strong: #f4f3ef;
  --surface: #161616;
  --surface-solid: #161616;
  --input: #161616;
  --blob: #e9e8e3;
  --star: #0c0c0c;
  --paper: #f4f3ef;
  --ink: #0c0c0c;
  --shadow: 6px 6px 0 #f4f3ef;
  --title-fill: #0c0c0c;
  color-scheme: dark;
}

/* -------------------------------------------------------------------- NOIR */
:root[data-theme="noir"] {
  --font-display: 'Jost', 'Futura', sans-serif;
  --font-ui: 'Jost', 'Futura', sans-serif;
  --font-text: 'Jost', 'Futura', sans-serif;
  --display-tracking: 0.08em;
  --ui-tracking: 0.22em;
  --ui-case: uppercase;
  --radius: 2px;
  --gap: 18px;
}
:root[data-theme="noir"][data-mode="dark"] {
  --accent-default: #e8e8ec;
  --bg: #17181b;
  --bg-2: #1f2024;
  --bg-glow: #2c2d32;
  --fg: #e6e6ea;
  --muted: #9b9ca3;
  --faint: #6c6d74;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.2);
  --surface: linear-gradient(180deg, #24252a, #1d1e22);
  --surface-solid: #212226;
  --input: rgba(255, 255, 255, 0.04);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color-scheme: dark;
}
:root[data-theme="noir"][data-mode="light"] {
  --accent-default: #1d1e22;
  --bg: #e7e7eb;
  --bg-2: #dedee3;
  --bg-glow: #f7f7f9;
  --fg: #1d1e22;
  --muted: #5c5d64;
  --faint: #8a8b92;
  --line: rgba(29, 30, 34, 0.1);
  --line-strong: rgba(29, 30, 34, 0.25);
  --surface: linear-gradient(180deg, #fbfbfc, #f2f2f5);
  --surface-solid: #f7f7f9;
  --input: rgba(29, 30, 34, 0.04);
  --shadow: 0 30px 60px -32px rgba(40, 40, 60, 0.35), inset 0 1px 0 #ffffff;
}