/* ── 1. Design Tokens ─────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-app: #F2F4F7;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F7F8FA;
  --bg-subtle: #EEF0F4;
  --bg-overlay: rgba(0, 0, 0, 0.04);

  /* Borders */
  --border-light: rgba(0, 0, 0, 0.06);
  --border-medium: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);
  --border-brand: rgba(29, 185, 84, 0.35);
  --border-indigo: rgba(99, 102, 241, 0.3);

  /* Brand Accent — Emotiv Emerald */
  --brand: #1DB954;
  --brand-dark: #16A34A;
  --brand-light: #F0FDF4;
  --brand-dim: rgba(29, 185, 84, 0.10);
  --brand-glow: 0 0 0 3px rgba(29, 185, 84, 0.15);

  /* Secondary — Indigo (data, states) */
  --indigo: #6366F1;
  --indigo-dark: #4F46E5;
  --indigo-light: #EEF2FF;
  --indigo-dim: rgba(99, 102, 241, 0.10);

  /* Semantic */
  --danger: #E5473D;
  --danger-light: #FEF2F2;
  --danger-dim: rgba(229, 71, 61, 0.10);
  --danger-glow: 0 0 0 3px rgba(229, 71, 61, 0.15);

  --warning: #D97706;
  --warning-light: #FFFBEB;
  --warning-dim: rgba(217, 119, 6, 0.10);

  --success: var(--brand);
  --success-light: var(--brand-light);
  --success-dim: var(--brand-dim);

  /* Text */
  --text-primary: #0F1117;
  --text-secondary: #4B5563;
  --text-tertiary: #9CA3AF;
  --text-disabled: #D1D5DB;
  --text-on-brand: #FFFFFF;
  --text-on-indigo: #FFFFFF;

  /* Layout */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --detail-w: 360px;

  /* Radius */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Elevation (shadows) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 32px 80px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Transitions */
  --t-fast: 100ms ease;
  --t-base: 200ms ease;
  --t-spring: 460ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index */
  --z-sidebar: 100;
  --z-topbar: 2000;
  --z-panel: 3000;
  --z-modal: 4000;
  --z-toast: 5000;
}