/* Chit design tokens. Everything visual flows from here; modules never hard-code colours. */
:root {
  --font-ui: 'Space Grotesk Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;

  /* void + glass */
  --bg-void: #05070d;
  --bg-deep: #090d18;
  --glass: rgb(16 22 40 / 0.62);
  --glass-strong: rgb(20 28 52 / 0.82);
  --line: rgb(120 150 255 / 0.16);
  --line-strong: rgb(120 190 255 / 0.38);

  --text: #e8eeff;
  --text-dim: #8d9bc2;
  --text-faint: #7886b0;   /* 4.7:1 or better on every surface (AA for the small source and hint labels); was #5b6890 at 3.1 to 3.7:1 */

  /* signal colours */
  --cyan: #4df0ff;
  --violet: #8b7bff;
  --magenta: #ff5fd2;
  --lime: #8dffb0;
  --amber: #ffc857;
  --red: #ff6b7d;

  --accent: var(--cyan);
  --accent-2: var(--violet);
  --glow: 0 0 24px rgb(77 240 255 / 0.22);
  --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 16%, transparent);
  --on-accent: #04101a;
  --grad: linear-gradient(135deg, var(--cyan), var(--violet));
  --rail-bg: rgb(5 7 13 / 0.55);
  --bar-bg: rgb(14 20 38 / 0.94);
  --inset: rgb(5 7 13 / 0.5);
  --shadow: 0 10px 40px rgb(0 0 0 / 0.35);
  --pool-a: rgb(139 123 255 / 0.18);
  --pool-b: rgb(77 240 255 / 0.12);

  /* data states (docs/core/specifications/data-states.yaml) */
  --state-available: var(--lime);
  --state-stale: var(--amber);
  --state-partial: var(--amber);
  --state-unavailable: var(--red);
  --state-unconfigured: var(--text-dim);
  --state-demo: var(--magenta);
  --state-manual: var(--violet);
  --state-forecast: var(--amber);

  --radius: 14px;
  --radius-sm: 8px;
  --gap: 12px;
  --rail: 84px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

:root[data-theme='light'] {
  --bg-void: #eef2fb;
  --bg-deep: #e4eaf8;
  --glass: rgb(255 255 255 / 0.7);
  --glass-strong: rgb(255 255 255 / 0.9);
  --line: rgb(40 70 160 / 0.14);
  --line-strong: rgb(30 90 200 / 0.4);
  --text: #0b1430;
  --text-dim: #4a5a86;
  --text-faint: #56648c;   /* 4.8:1 or better on every surface; was #7b88ad at 2.9 to 3.5:1 */
  --cyan: #0a8fb0;
  --violet: #5b4bd6;
  --lime: #12915a;
  --amber: #a86d00;
  --red: #c4233d;
  --glow: 0 0 24px rgb(10 143 176 / 0.12);
  --on-accent: #ffffff;
  --rail-bg: rgb(255 255 255 / 0.72);
  --bar-bg: rgb(255 255 255 / 0.95);
  --inset: rgb(255 255 255 / 0.65);
  --shadow: 0 10px 30px rgb(30 50 110 / 0.12);
  --pool-a: rgb(91 75 214 / 0.14);
  --pool-b: rgb(10 143 176 / 0.12);
}

/* Spectrum: the multi-colour palette. Each module keeps its own colour in the navigation, cards take their tone,
   and the gradients run through every signal colour instead of cyan to violet. Works with dark and light. */
:root[data-palette='spectrum'] {
  --grad: linear-gradient(120deg, var(--cyan), var(--violet) 35%, var(--magenta) 68%, var(--amber));
  --grad-btn: linear-gradient(120deg, var(--cyan), var(--violet) 55%, var(--magenta));
  --pool-a: color-mix(in srgb, var(--magenta) 20%, transparent);
  --pool-b: color-mix(in srgb, var(--amber) 14%, transparent);
}