/* new-design-hub design tokens. Components use these only, never raw colours. */
:root,
[data-theme="light"] {
  --bg: #f8f9fc;
  --surface: #ffffff;
  --fg: #101d38;
  --sub: #5d6b82;
  --rule: #e2e7f0;
  --field-border: #cbd4e4;
  --action: #354ce5;
  --action-hover: #2339c7;
  --on-action: #ffffff;
  --link: #354ce5;
  --accent: #ed3947;
  --error: #c62835;
  --error-bg: #fff0f1;
  --error-rule: #f8cdd1;
  --ok: #1d7a4c;
  --ok-bg: #e7f6ee;
  --ok-rule: #bfe5cf;
  --warn: #8a5a00;
  --warn-bg: #fff4dc;
  --focus: #7688fd;
  --shadow: 0 1px 2px #1018280d, 0 24px 48px -16px #10182833;
  --chart-1: #354ce5; --chart-2: #e8890c; --chart-3: #12a594; --chart-4: #8a5cf6; --chart-5: #e5484d;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0b1630;
  --surface: #12214a;
  --fg: #ffffff;
  --sub: #b7c3df;
  --rule: #ffffff1a;
  --field-border: #ffffff33;
  --action: #354ce5;
  --action-hover: #4b60ef;
  --on-action: #ffffff;
  --link: #9fb0ff;
  --accent: #ed3947;
  --error: #ffb3ba;
  --error-bg: #3a1420;
  --error-rule: #6b2433;
  --ok: #7fe0b0;
  --ok-bg: #103828;
  --ok-rule: #1e5c40;
  --warn: #ffd27a;
  --warn-bg: #3a2c0c;
  --focus: #9fb0ff;
  --shadow: 0 24px 48px -16px #00000080;
  --chart-1: #9fb0ff; --chart-2: #fbbf5c; --chart-3: #34d3bd; --chart-4: #b79cff; --chart-5: #ff8a8f;
  color-scheme: dark;
}

:root {
  --font-display: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'DejaVu Sans Mono', monospace;
  --radius: 8px;
  --radius-card: 12px;
  --control: 44px;
}