:root {
  /* Colors — Light mode (default) */
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-rgb: 255,255,255;
  --surface-hover: #f0f2f5;
  --border: #d1d9e0;
  --border-rgb: 209,217,224;
  --text: #1a2233;
  --text-muted: #5f6b7a;
  --primary: #0091ea;
  --primary-rgb: 0,145,234;
  --primary-hover: #0077c2;
  --primary-dim: rgba(0, 145, 234, 0.1);
  --success: #00a844;
  --warning: #e6b800;
  --danger: #d50000;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;

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

  /* Shadows */
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
}

/* Dark mode overrides */
[data-theme="dark"] {
  --bg: #080c10;
  --surface: #0e1419;
  --surface-rgb: 14,20,25;
  --surface-hover: #161d24;
  --border: #1e2830;
  --border-rgb: 30,40,48;
  --text: #e8edf2;
  --text-muted: #8899a6;
  --primary: #00e5ff;
  --primary-rgb: 0,229,255;
  --primary-hover: #00b8d4;
  --primary-dim: rgba(0, 229, 255, 0.1);
  --success: #00c853;
  --warning: #ffd600;
  --danger: #ff1744;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
}

/* Light mode — explicit selector for specificity */
[data-theme="light"] {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-rgb: 255,255,255;
  --surface-hover: #f0f2f5;
  --border: #d1d9e0;
  --border-rgb: 209,217,224;
  --text: #1a2233;
  --text-muted: #5f6b7a;
  --primary: #0091ea;
  --primary-rgb: 0,145,234;
  --primary-hover: #0077c2;
  --primary-dim: rgba(0, 145, 234, 0.1);
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --success: #00a844;
  --warning: #e6b800;
  --danger: #d50000;
}