/* ── Design tokens ────────────────────────────────────────────── */
:root {
  /* Layout */
  --sidebar-width: 200px;
  --topbar-height: 44px;

  /* Colors — light mode */
  --color-bg: #f8f9fc;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f7fb;
  --color-border: rgba(31, 32, 59, 0.08);
  --color-text: #1f203b;
  --color-text-muted: #9aa0b4;
  --color-text-subtle: #8890a4;

  /* Sidebar / topbar */
  --color-sidebar: #0d0e1a;
  --color-sidebar-hover: rgba(255, 255, 255, 0.06);
  --color-sidebar-active: rgba(255, 255, 255, 0.1);
  --color-sidebar-text: rgba(255, 255, 255, 0.7);
  --color-sidebar-text-active: #ffffff;
  --color-topbar: #1a1b2e;

  /* Accent */
  --color-accent: #3b82f6;
  --color-accent-light: #93c5fd;

  /* Status */
  --color-live: #3b82f6;
  --color-live-text: #1d4ed8;
  --color-error: #ef4444;
  --color-error-text: #dc2626;

  /* Cards */
  --radius-card: 18px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 3px rgba(31, 32, 59, 0.05), 0 4px 16px rgba(31, 32, 59, 0.04);
  --shadow-card-hover: 0 8px 28px rgba(31, 32, 59, 0.11);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-card: 0.3s ease;
}