/* Design tokens. Light is the default, dark overrides only the colours. */
:root {
  --font-ui: Heebo, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, Consolas, 'Courier New', Heebo, monospace;

  --font-scale: 1;
  --fs-xs: calc(0.75rem * var(--font-scale));
  --fs-sm: calc(0.85rem * var(--font-scale));
  --fs-md: calc(1rem * var(--font-scale));
  --fs-lg: calc(1.15rem * var(--font-scale));
  --fs-xl: calc(1.4rem * var(--font-scale));

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --radius: 8px;
  --radius-sm: 5px;

  --bg: #f4f5f7;
  --bg-panel: #ffffff;
  --bg-sunken: #eceef1;
  --bg-hover: #e6e9ee;
  --border: #d6dae1;
  --border-strong: #b9c0cb;

  --text: #1c2230;
  --text-soft: #5a6373;
  --text-faint: #8b94a3;

  --accent: #2f5bd7;
  --accent-text: #ffffff;
  --accent-soft: #e5ecfd;

  --ok: #17794a;
  --ok-soft: #e2f4ea;
  --warn: #9a6400;
  --warn-soft: #fdf1d8;
  --err: #b3261e;
  --err-soft: #fce9e7;

  --d1: #17794a;
  --d2: #9a6400;
  --d3: #b3261e;

  --shadow: 0 1px 2px rgba(18, 24, 38, 0.08), 0 2px 8px rgba(18, 24, 38, 0.06);
}

[data-theme='dark'] {
  --bg: #14171d;
  --bg-panel: #1b1f27;
  --bg-sunken: #232833;
  --bg-hover: #2b313d;
  --border: #333a47;
  --border-strong: #47505f;

  --text: #e7eaf0;
  --text-soft: #a8b1c0;
  --text-faint: #7a8496;

  --accent: #7aa0ff;
  --accent-text: #10131a;
  --accent-soft: #1f2a44;

  --ok: #5ad39a;
  --ok-soft: #16301f;
  --warn: #e6b54d;
  --warn-soft: #332a12;
  --err: #ff8b80;
  --err-soft: #351c1a;

  --d1: #5ad39a;
  --d2: #e6b54d;
  --d3: #ff8b80;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 10px rgba(0, 0, 0, 0.3);
}