/* tokens.css — the only place colours, type, spacing and radii are defined.
   Components reference these; they never declare raw values. */

:root {
  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --leading: 1.45;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Layout */
  --content-max: 1280px;
  --table-row-h: 2.25rem;

  /* Colour — light */
  --bg: #f7f7f5;
  --surface: #ffffff;
  --border: #e3e3df;
  --text: #1a1a1a;
  --text-muted: #6b6b66;
  --accent: #0f6b5c;
  --accent-soft: #e2f1ed;

  /* Status — the only semantic colours */
  --ok: #1f8a4c;
  --warn: #c78a00;
  --bad: #c2362b;
  --idle: #8a8a85;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131312;
    --surface: #1c1c1a;
    --border: #2e2e2b;
    --text: #ececea;
    --text-muted: #9a9a94;
    --accent: #4fb39f;
    --accent-soft: #163d36;
    --ok: #3fb56f;
    --warn: #e0a72a;
    --bad: #e2574b;
    --idle: #7a7a75;
  }
}
:root[data-theme="dark"] {
  --bg: #131312; --surface: #1c1c1a; --border: #2e2e2b; --text: #ececea; --text-muted: #9a9a94;
  --accent: #4fb39f; --accent-soft: #163d36; --ok: #3fb56f; --warn: #e0a72a; --bad: #e2574b; --idle: #7a7a75;
}

/* Base — the only global styles allowed outside components */
*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font-sans); font-size: 15px; line-height: var(--leading); color-scheme: light dark; }
body { margin: 0; background: var(--bg); color: var(--text); }