:root, :root[data-theme="light"] {
  /* --- Premium Header Palette Tokens (Ivory & Brass) --- */
  --surface-ivory: #FBF8F2;
  --ink-950: #12192B;
  --ink-500: #6E6A62;
  --brass-500: #B08A2E;
  --brass-100: #EFE3C7;
  --maroon-600: #7A2E2E;
  --surface-ivory-dark: #0D1626;
  --ink-950-dark: #F3EFE6;
  --brass-500-dark: #D4AF63;
  --radius-md: 12px;
  --shadow-header: 0 1px 2px rgba(18,25,43,0.05), 0 8px 20px rgba(18,25,43,0.04);

  /* --- Brand palette (Default Light Mode) --- */
  --color-bg: #F8F9FA; /* Crisp white-gray background */
  --color-surface: #FFFFFF; /* Pure white cards */
  --color-surface-2: #F1F3F5; /* Ultra light gray for inputs */
  --color-border: #E9ECEF; /* Soft border */
  
  --color-yellow: #F59E0B; /* Amber/Gold for text and icons */
  --color-yellow-hover: #D97706;
  --color-yellow-dim: #FEF3C7;
  --color-on-primary: #000000;
  
  --sidebar-bg: #111827; /* Deep Black */
  --sidebar-border: #1F2937;
  --sidebar-text: #FFFFFF; /* Unselected options in white */
  --sidebar-text-hover: #FFFFFF;
  --sidebar-item-hover-bg: rgba(255, 255, 255, 0.1);
  --sidebar-item-active-bg: rgba(245, 158, 11, 0.15); /* Translucent gold */
  --sidebar-item-active-text: var(--color-yellow); /* Selected option in yellow */
  --sidebar-label: #9CA3AF;
  --sidebar-brand: #FFFFFF;
  
  /* Custom Gradients and Black Accents */
  --bg-primary: linear-gradient(135deg, #FDE047 0%, #F59E0B 100%);
  --bg-primary-hover: linear-gradient(135deg, #FEF08A 0%, #D97706 100%);
  
  --bg-secondary: #FFFFFF;
  --color-on-secondary: #111827;
  --border-secondary: #111827; /* Strong black border */
  --bg-secondary-hover: #111827;
  --color-on-secondary-hover: #FFFFFF;
  --border-secondary-hover: #111827;

  --color-text: #111827; /* Deep Black */
  --color-text-dim: #4B5563; /* Dark Gray */
  --color-text-faint: #9CA3AF;
  
  --color-success: #059669; 
  --color-success-dim: #D1FAE5; 
  --color-danger: #E11D48; 
  --color-danger-dim: #FFE4E6; 
  --color-warning: #D97706; 
  --color-warning-dim: #FEF3C7; 
  --color-info: #0284C7; 
  --color-info-dim: #E0F2FE; 
  
  --ill-stroke: var(--color-text);

  /* --- Typography --- */
  --font-display: 'Bebas Neue', 'Poppins', sans-serif;
  --font-body: 'Outfit', 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* --- Spacing scale (8px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;

  /* --- Radii & shadows --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --shadow-soft: 0 4px 16px -2px rgba(17, 24, 39, 0.05), 0 0 3px rgba(17, 24, 39, 0.02);
  --shadow-hover: 0 12px 24px -4px rgba(17, 24, 39, 0.08), 0 4px 8px -2px rgba(17, 24, 39, 0.03);
  --shadow-modal: 0 20px 40px -8px rgba(17, 24, 39, 0.12), 0 0 3px rgba(17, 24, 39, 0.04);
  --shadow-glow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.06);

  --glass-filter: blur(12px);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-med: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  --sidebar-width: 260px;

  --topbar-bg: rgba(255, 255, 255, 0.85);
  --topbar-border: rgba(0, 0, 0, 0.06);
  --topbar-text: #111827;
  --topbar-height: 80px;
  --topbar-blur: blur(20px);
}

:root[data-theme="dark"] {
  /* --- Brand palette (Modern Dark Mode) --- */
  --color-bg: #09090b; /* Zinc 950 */
  --color-surface: rgba(24, 24, 27, 0.7); /* Zinc 900 with opacity */
  --color-surface-2: rgba(39, 39, 42, 0.8); /* Zinc 800 with opacity */
  --color-border: rgba(63, 63, 70, 0.4); /* Zinc 700 with opacity */
  
  --color-yellow: #facc15; /* Modern vibrant yellow */
  --color-yellow-hover: #fef08a;
  --color-yellow-dim: rgba(250, 204, 21, 0.15);
  --color-on-primary: #0a0a0a;
  
  --sidebar-bg: var(--color-surface);
  --sidebar-border: var(--color-border);
  --sidebar-text: var(--color-text-dim);
  --sidebar-text-hover: var(--color-text);
  --sidebar-item-hover-bg: var(--color-surface-2);
  --sidebar-item-active-bg: var(--color-yellow-dim);
  --sidebar-item-active-text: var(--color-yellow);
  --sidebar-label: var(--color-text-faint);
  --sidebar-brand: var(--color-text);
  
  --color-text: #f8fafc;
  --color-text-dim: #94a3b8;
  --color-text-faint: #64748b;
  
  --color-success: #10b981;
  --color-success-dim: rgba(16, 185, 129, 0.15);
  --color-danger: #ef4444;
  --color-danger-dim: rgba(239, 68, 68, 0.15);
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  
  --ill-stroke: var(--color-yellow);

  --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 15px rgba(250, 204, 21, 0.3);
  --shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.2);

  --topbar-bg: rgba(9, 9, 11, 0.85);
  --topbar-border: rgba(63, 63, 70, 0.4);
  --topbar-text: #f8fafc;
}