:root {
  /* Colors */
  --primary: #4F7CFF;
  --primary-hover: #3F68DF;
  --secondary: #7C5CFC;
  --success: #16C784;
  --danger: #EA3943;
  --warning: #F5B942;

  /* Spacing */
  --sp-4: 4px; --sp-8: 8px; --sp-12: 12px; --sp-16: 16px;
  --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-40: 40px;
  --sp-48: 48px; --sp-64: 64px; --sp-80: 80px; --sp-96: 96px;

  /* Radius */
  --rad-8: 8px; --rad-12: 12px; --rad-16: 16px;
  --rad-20: 20px; --rad-24: 24px; --rad-full: 999px;

  /* Z-index */
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;

  /* Motion */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

/* Light Theme */
[data-theme="light"] {
  color-scheme: light;
  --bg-main: #F7F9FC;
  --surface: #FFFFFF;
  --surface-elevated: #F1F4F9;
  --border: #DFE5EE;
  --text-primary: #101828;
  --text-secondary: #667085;
  --overlay: rgba(0,0,0,0.4);
  --focus-ring: rgba(79, 124, 255, 0.4);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --header-backdrop: rgba(255,255,255,0.85);
}

/* Dark Theme */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-main: #070B12;
  --surface: #0F1520;
  --surface-elevated: #151D2B;
  --border: #263044;
  --text-primary: #F5F7FB;
  --text-secondary: #95A1B5;
  --overlay: rgba(0,0,0,0.7);
  --focus-ring: rgba(79, 124, 255, 0.6);
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --header-backdrop: rgba(7,11,18,0.85);
}

/* Breakpoints (Documented per instructions)
   Mobile: < 768px
   Tablet: 768px - 1024px
   Desktop: > 1024px
*/