/* Design tokens: colour, spacing, motion, typography.
   The dashboard's only theme switch point; components never hard-code a colour. */
:root {
  /* Colour — neutral dark theme, high contrast */
  --bg: #0b0d10;
  --bg-elevated: #111418;
  --bg-hover: #1a1e24;
  --fg: #e8eaed;
  --fg-muted: #8a8f98;
  --fg-subtle: #5a5f66;
  --border: #2a2f36;
  --border-focus: #3b82f6;
  --accent: #22d3ee;      /* cyan — primary actions */
  --accent-dim: #06b6d4;
  --success: #22c55e;
  --warning: #fbbf24;
  --danger: #ef4444;
  --strata: #8b5cf6;      /* purple — Strata backend */
  --ollama: #f97316;      /* orange — Ollama backend */

  /* Spacing scale */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-8: 48px;

  /* Radius */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 350ms;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 28px rgba(0,0,0,.5);

  /* Typography */
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px;

  /* Derived: layout metrics used by several components */
  --topbar-h: 48px;
  --card-min-h: 132px;
  --touch: 44px;              /* min touch target (mobile usability risk line) */
  --gauge-size: 168px;
  --stack: 0;                --layer: 0; --z-toast: 900;

  /* Semantic aliases, so components read intent not hex */
  --ok: var(--success); --warn: var(--warning); --bad: var(--danger);
  --idle: var(--fg-subtle); --busy: var(--success); --transit: var(--accent);
}

/* Light theme: swap the custom properties, keep component CSS untouched.
   Enabled by the Settings tab toggle; prefers-scheme is the default. */
.theme-light, :root[data-theme="light"] {
  --bg: #f7f8fa;
  --bg-elevated: #ffffff;
  --bg-hover: #eceff3;
  --fg: #12161b;
  --fg-muted: #545b64;
  --fg-subtle: #6f7680;
  --border: #d4d9e0;
  --accent: #0874a0;
  --accent-dim: #065a7c;
  --success: #158f3f;
  --warning: #8a6a12;
  --danger: #b91c1c;
  --strata: #6d3ec9;
  --ollama: #b4530b;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms;
    --ease-out: linear; --ease-spring: linear;
  }
}