/* Design tokens (docs/05_THEMES.md). Every theme defines every token; the
 * contrast of the colour pairs is enforced by web/tokens_test.go.
 *
 * Colours are hex so the test can compute WCAG contrast. Status colours differ
 * per theme because a green that works on black fails on white.
 * text-subtle is for incidental text only (>= 3:1), never essential information.
 * on-status is the text on a filled status block. beat-* colour beat-bar
 * marks (3:1, they are marks, not text). ambient-* colour the Ambient light
 * behind a status hero (docs/04 "Ambient light"). */

/* Comfortable is the default density; compact scales spacing down. */
:root {
  --space-density-factor: 1;
}
[data-density="compact"] {
  --space-density-factor: 0.8;
}

/* Stark: true black, crisp, high contrast, one vivid accent. Also the
 * default when no theme is set. */
:root,
[data-theme="stark"] {
  color-scheme: dark;
  --bg: #000000;
  --surface-1: #0a0a0a;
  --surface-2: #151515;
  --surface-3: #1f1f1f;
  --border: #262626;
  --border-strong: #5e5e5e;
  --text: #ededed;
  --text-muted: #a1a1a1;
  --text-subtle: #8f8f8f;
  --accent: #3d93ff;
  --accent-contrast: #000000;

  --status-up: #2ee27a;
  --status-warning: #ffb224;
  --status-down: #ff4f4f;
  --status-paused: #a1a1a1;
  --status-pending: #f5c542;
  --status-flapping: #ffb224;
  --on-status: #000000;

  --beat-up: #2ee27a;
  --beat-down: #ff4f4f;
  --beat-none: #262626;
  --ambient-up: #3d93ff;
  --ambient-down: #ff4f4f;
  --ambient-flapping: #ffb224;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.6);
  --shadow-2: 0 8px 24px rgb(0 0 0 / 0.7);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --chart-grid: #1f1f1f;
  --chart-line: #3d93ff;
  --chart-outage: #ff4f4f;
  --chart-maintenance: #86a9f0;
}

/* Terminal: amber phosphor. Calm is one colour; only problems break it.
 * The theme also sets everything in mono (base.css). */
[data-theme="terminal"] {
  color-scheme: dark;
  --bg: #0d0903;
  --surface-1: #120d05;
  --surface-2: #1c1408;
  --surface-3: #261b0b;
  --border: #4a3615;
  --border-strong: #8f6a2c;
  --text: #ffbe55;
  --text-muted: #dba04a;
  --text-subtle: #c48d40;
  --accent: #ffd58a;
  --accent-contrast: #120d05;

  --status-up: #ffbe55;
  --status-warning: #ffe39a;
  --status-down: #ff7a45;
  --status-paused: #b98a46;
  --status-pending: #f0d07a;
  --status-flapping: #ffe39a;
  --on-status: #120d05;

  --beat-up: #ffbe55;
  --beat-down: #ff7a45;
  --beat-none: #3a2a10;
  --ambient-up: #ffbe55;
  --ambient-down: #ff7a45;
  --ambient-flapping: #ffe39a;

  --shadow-1: none;
  --shadow-2: 0 0 0 1px #8f6a2c;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;

  --chart-grid: #2a1f0d;
  --chart-line: #ffbe55;
  --chart-outage: #ff7a45;
  --chart-maintenance: #e6b973;
}

/* Daylight: white, ink type, filled near-black blocks. The status page
 * default. */
[data-theme="daylight"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f4f4f5;
  --surface-3: #e4e4e7;
  --border: #e4e4e7;
  --border-strong: #8a8a93;
  --text: #09090b;
  --text-muted: #52525b;
  --text-subtle: #63636b;
  --accent: #0a0a0a;
  --accent-contrast: #ffffff;

  --status-up: #0e7a3d;
  --status-warning: #a35400;
  --status-down: #cf1f1f;
  --status-paused: #5b5b63;
  --status-pending: #805f00;
  --status-flapping: #a35400;
  --on-status: #ffffff;

  --beat-up: #1c9e54;
  --beat-down: #e23b3b;
  --beat-none: #e4e4e7;
  --ambient-up: #3d93ff;
  --ambient-down: #e23b3b;
  --ambient-flapping: #f59e0b;

  --shadow-1: 0 1px 2px rgb(9 9 11 / 0.06);
  --shadow-2: 0 8px 24px rgb(9 9 11 / 0.12);
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --chart-grid: #ececee;
  --chart-line: #0a0a0a;
  --chart-outage: #cf1f1f;
  --chart-maintenance: #3f63a8;
}