/* Design tokens. Dark theme is the default; [data-theme="light"] overrides. */
:root {
  /* Accent / brand */
  --accent: #4f7cff;
  --accent-600: #3a63e0;
  --accent-soft: rgba(79, 124, 255, 0.14);

  /* Semantic status colors */
  --ok: #2fbf71;
  --warn: #f5a623;
  --danger: #ef4d5a;
  --info: #38bdf8;
  --ok-soft: rgba(47, 191, 113, 0.15);
  --warn-soft: rgba(245, 166, 35, 0.15);
  --danger-soft: rgba(239, 77, 90, 0.15);

  /* Surfaces (dark default) */
  --bg: #0d1117;
  --bg-elev: #151b24;
  --surface: #1a212c;
  --surface-2: #212a37;
  --border: #2b3543;
  --border-soft: #222b38;

  /* Text */
  --text: #e6edf3;
  --text-muted: #9aa7b5;
  --text-faint: #6b7785;

  /* Charts palette */
  --c1: #4f7cff; --c2: #2fbf71; --c3: #f5a623; --c4: #ef4d5a;
  --c5: #a78bfa; --c6: #38bdf8; --c7: #fb7185; --c8: #34d399;

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

  /* Radii */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;

  /* Typography */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px;
  --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h: 60px;

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme='light'] {
  --bg: #f3f5f8;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --border: #e2e7ee;
  --border-soft: #eceff4;
  --text: #1a2230;
  --text-muted: #5a6675;
  --text-faint: #8a96a5;
  --accent-soft: rgba(79, 124, 255, 0.1);
  --ok-soft: rgba(47, 191, 113, 0.12);
  --warn-soft: rgba(245, 166, 35, 0.14);
  --danger-soft: rgba(239, 77, 90, 0.1);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.12);
}