:root {
  /* Primary — Indigo */
  --primary-50:  #EEF2FF;
  --primary-100: #E0E7FF;
  --primary-200: #C7D2FE;
  --primary-500: #f0b59a;
  --primary-600: #5865F2;
  --primary-700: #4338CA;

  /* Neutrals */
  --gray-50:  #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Semantic */
  --success:      #10B981;
  --success-bg:   #ECFDF5;
  --warning:      #F59E0B;
  --warning-bg:   #FFFBEB;
  --danger:       #EF4444;
  --danger-bg:    #FEF2F2;
  --info:         #3B82F6;
  --info-bg:      #EFF6FF;

  /* Surfaces */
  --bg-body:      #F9FAFB;
  --bg-surface:   #FFFFFF;
  --bg-muted:     #F3F4F6;
  --border:       #E5E7EB;
  --border-focus: #6366F1;

  /* Typography */
  --text-primary:   #111827;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.05);

  /* Sidebar */
  --sidebar-w:        240px;
  --sidebar-bg:       #1F2937;
  --sidebar-text:     #D1D5DB;
  --sidebar-text-active: #FFFFFF;
  --sidebar-active-bg: rgba(99,102,241,.2);
  --sidebar-hover-bg:  rgba(255,255,255,.05);
  --sidebar-border:   rgba(255,255,255,.08);

  /* Spacing & Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Transitions */
  --transition: 150ms ease;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-body:      #111827;
    --bg-surface:   #1F2937;
    --bg-muted:     #374151;
    --border:       #374151;
    --text-primary:   #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-muted:     #9CA3AF;
  }
}