/* ═══════════════════════════════════════════════════════════════
   LEARNINGPORTAL — CENTRALIZED DESIGN TOKEN SYSTEM
   
   Purpose: Unified theme architecture using CSS Custom Properties
   Theme: Premium Slate Gray + Orange Gradient (Modern SaaS)
   Approach: Single source of truth for all colors and design tokens
   
   IMPORTANT: All hardcoded colors must migrate to these variables
   Change the theme globally by modifying only this file
   
   Inspired by: Linear, Notion, Vercel, Atlassian, Modern AI Products
═══════════════════════════════════════════════════════════════ */

:root {
    /* ══════════════════════════════════════════════════════════
       1. PRIMARY BRAND COLORS - Slate Gray + Orange Gradient
    ══════════════════════════════════════════════════════════ */
    --primary-orange: #FF7A00;
    /* Primary orange - vibrant */
    --secondary-orange: #FF9F1C;
    /* Light orange for accents */
    --tertiary-orange: #E95F02;
    /* Chart accent orange */
    --orange-dark: #C2410C;
    /* Dark orange for hover */
    --orange-darker: #9A3412;
    /* Darker orange */
    --orange-light: #FDBA74;
    /* Light orange */
    --orange-lighter: #FED7AA;
    /* Lightest orange */
    --orange-pale: #FFF7ED;
    /* Pale orange background */

    /* ══════════════════════════════════════════════════════════
       2. GRADIENTS (Linear & Radial) - Modern SaaS Gradients
    ══════════════════════════════════════════════════════════ */
    --gradient-primary: linear-gradient(90deg, #FF7A00 0%, #E95F02 100%);
    --gradient-primary-vertical: linear-gradient(180deg, #FF9F1C 0%, #E95F02 100%);
    --gradient-primary-diagonal: linear-gradient(135deg, #FF9F1C 0%, #FF7A00 48%, #C2410C 100%);
    --gradient-soft: linear-gradient(135deg, #FFF7ED 0%, #FED7AA 45%, #FDBA74 100%);
    --gradient-hero: linear-gradient(135deg, #FF9F1C 0%, #FF7A00 45%, #C2410C 100%);
    --gradient-radial: radial-gradient(circle at center, #FFCF8A 0%, #FF7A00 52%, #C2410C 100%);
    --gradient-dark: linear-gradient(180deg, #7C2D12 0%, #431407 100%);

    /* ══════════════════════════════════════════════════════════
       3. GLASSMORPHISM & TRANSLUCENT OVERLAYS
       Optimized for Light/Vibrant Theme
    ══════════════════════════════════════════════════════════ */
    --white-100: rgba(255, 255, 255, 1);
    --white-95: rgba(255, 255, 255, 0.95);
    --white-90: rgba(255, 255, 255, 0.9);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-15: rgba(255, 255, 255, 0.15);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-08: rgba(255, 255, 255, 0.08);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-02: rgba(255, 255, 255, 0.02);

    --black-100: rgba(0, 0, 0, 1);
    --black-90: rgba(0, 0, 0, 0.9);
    --black-80: rgba(0, 0, 0, 0.8);
    --black-70: rgba(0, 0, 0, 0.7);
    --black-60: rgba(0, 0, 0, 0.6);
    --black-50: rgba(0, 0, 0, 0.5);
    --black-40: rgba(0, 0, 0, 0.4);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-15: rgba(0, 0, 0, 0.15);
    --black-10: rgba(0, 0, 0, 0.1);
    --black-08: rgba(0, 0, 0, 0.08);
    --black-05: rgba(0, 0, 0, 0.05);
    --black-03: rgba(0, 0, 0, 0.03);

    /* Orange translucent variants - For warm glow effects */
    --orange-alpha-90: rgba(255, 122, 0, 0.9);
    --orange-alpha-80: rgba(255, 122, 0, 0.8);
    --orange-alpha-70: rgba(255, 122, 0, 0.7);
    --orange-alpha-60: rgba(255, 122, 0, 0.6);
    --orange-alpha-50: rgba(255, 122, 0, 0.5);
    --orange-alpha-40: rgba(255, 122, 0, 0.4);
    --orange-alpha-35: rgba(255, 122, 0, 0.35);
    --orange-alpha-30: rgba(255, 122, 0, 0.3);
    --orange-alpha-20: rgba(255, 122, 0, 0.2);
    --orange-alpha-15: rgba(255, 122, 0, 0.15);
    --orange-alpha-10: rgba(255, 122, 0, 0.1);
    --orange-alpha-05: rgba(255, 122, 0, 0.05);

    /* ══════════════════════════════════════════════════════════
       4. SEMANTIC MAPPINGS
       Clean architecture - use these instead of direct colors
    ══════════════════════════════════════════════════════════ */
    --theme-accent: var(--primary-orange);
    --theme-accent-hover: var(--orange-dark);
    --theme-accent-active: var(--orange-darker);
    --theme-accent-light: var(--secondary-orange);
    --theme-accent-pale: var(--orange-pale);
    --theme-gradient: var(--gradient-primary);

    /* Glass effects */
    --glass-bg: var(--white-50);
    --glass-bg-strong: var(--white-70);
    --glass-bg-weak: var(--white-30);
    --glass-border: var(--white-20);
    --glass-border-strong: var(--white-40);

    /* ══════════════════════════════════════════════════════════
       5. NEUTRAL COLORS (Grayscale Foundation) - Slate Gray System
    ══════════════════════════════════════════════════════════ */
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-150: #E5E7EB;
    --gray-200: #E5E7EB;
    --gray-250: #D1D5DB;
    --gray-300: #CBD5E1;
    --gray-350: #9CA3AF;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-850: #111827;
    --gray-900: #111827;
    --gray-950: #030712;

    /* Slate System for Sidebar (Modern SaaS Look) */
    --slate-dark: #1F2937;
    --slate-darker: #111827;
    --slate-light: #374151;
    --slate-lighter: #4B5563;
    --slate-widget: #2D3748;

    /* ══════════════════════════════════════════════════════════
       6. BACKGROUND SYSTEM - Modern SaaS
    ══════════════════════════════════════════════════════════ */
    --bg-app: #F9FAFB;
    /* App-level background */
    --bg-page: #FFFFFF;
    /* Page/container background */
    --bg-surface: #FFFFFF;
    /* Card/surface background */
    --bg-surface-2: #F9FAFB;
    /* Alternate surface */
    --bg-surface-3: #F3F4F6;
    /* Tertiary surface */
    --bg-elevated: #FFFFFF;
    /* Elevated components (modals, dropdowns) */
    --bg-overlay: var(--black-50);
    /* Modal/overlay backdrop */
    --bg-hover: #F3F4F6;
    /* Hover state background */
    --bg-active: #E5E7EB;
    /* Active state background */
    --bg-disabled: #E5E7EB;
    /* Disabled state */

    /* Accent backgrounds */
    --bg-accent: var(--primary-orange);
    --bg-accent-hover: var(--orange-dark);
    --bg-accent-light: var(--orange-pale);
    --bg-accent-subtle: var(--orange-alpha-05);

    /* ══════════════════════════════════════════════════════════
       7. TEXT COLORS - Modern SaaS
    ══════════════════════════════════════════════════════════ */
    --text-primary: #111827;
    /* Primary text (headings) */
    --text-secondary: #4B5563;
    /* Secondary text (body) */
    --text-tertiary: #6B7280;
    /* Tertiary text */
    --text-muted: #9CA3AF;
    /* Muted/placeholder text */
    --text-disabled: #D1D5DB;
    /* Disabled text */
    --text-inverse: #FFFFFF;
    /* Text on dark backgrounds */
    --text-accent: var(--primary-orange);
    --text-accent-dark: var(--orange-dark);
    --text-link: var(--primary-orange);
    --text-link-hover: var(--orange-dark);
    --text-highlight: var(--primary-orange);

    /* ══════════════════════════════════════════════════════════
       8. BORDER COLORS
    ══════════════════════════════════════════════════════════ */
    --border-color: #E5E7EB;
    --border-light: #F3F4F6;
    --border-medium: #D1D5DB;
    --border-strong: #9CA3AF;
    --border-accent: var(--primary-orange);
    --border-accent-light: var(--secondary-orange);
    --border-focus: var(--primary-orange);

    /* ══════════════════════════════════════════════════════════
       9. SEMANTIC STATUS COLORS
    ══════════════════════════════════════════════════════════ */
    /* Success */
    --success: #16A34A;
    --success-dark: #15803D;
    --success-light: #86EFAC;
    --success-pale: #F0FDF4;
    --success-alpha-10: rgba(22, 163, 74, 0.1);
    --success-alpha-20: rgba(22, 163, 74, 0.2);

    /* Error/Danger */
    --error: #DC2626;
    --error-dark: #B91C1C;
    --error-light: #FCA5A5;
    --error-pale: #FEF2F2;
    --error-alpha-10: rgba(220, 38, 38, 0.1);
    --error-alpha-20: rgba(220, 38, 38, 0.2);

    /* Warning */
    --warning: #F59E0B;
    --warning-dark: #D97706;
    --warning-light: #FCD34D;
    --warning-pale: #FFFBEB;
    --warning-alpha-10: rgba(245, 158, 11, 0.1);
    --warning-alpha-20: rgba(245, 158, 11, 0.2);

    /* Info */
    --info: #3B82F6;
    --info-dark: #2563EB;
    --info-light: #93C5FD;
    --info-pale: #EFF6FF;
    --info-alpha-10: rgba(59, 130, 246, 0.1);
    --info-alpha-20: rgba(59, 130, 246, 0.2);

    /* ══════════════════════════════════════════════════════════
       10. SHADOWS & ELEVATION
    ══════════════════════════════════════════════════════════ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.05);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* Orange-tinted shadows */
    --shadow-orange: 0 4px 16px var(--orange-alpha-20);
    --shadow-orange-lg: 0 10px 30px var(--orange-alpha-30);
    --shadow-orange-xl: 0 20px 40px var(--orange-alpha-35);

    /* Glow effects */
    --glow-orange: 0 0 20px var(--orange-alpha-40);
    --glow-orange-strong: 0 0 30px var(--orange-alpha-60);

    /* ══════════════════════════════════════════════════════════
       11. BORDER RADIUS SCALE
    ══════════════════════════════════════════════════════════ */
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;

    /* ══════════════════════════════════════════════════════════
       12. SPACING SCALE (Fluid Design)
    ══════════════════════════════════════════════════════════ */
    --space-px: 1px;
    --space-0: 0;
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-7: 1.75rem;
    /* 28px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */

    /* ══════════════════════════════════════════════════════════
       13. TYPOGRAPHY SCALE (Fluid)
    ══════════════════════════════════════════════════════════ */
    --font-xs: 0.75rem;
    /* 12px */
    --font-sm: 0.875rem;
    /* 14px */
    --font-base: 1rem;
    /* 16px */
    --font-md: 1.125rem;
    /* 18px */
    --font-lg: 1.25rem;
    /* 20px */
    --font-xl: 1.5rem;
    /* 24px */
    --font-2xl: 1.875rem;
    /* 30px */
    --font-3xl: 2.25rem;
    /* 36px */
    --font-4xl: 3rem;
    /* 48px */
    --font-5xl: 3.75rem;
    /* 60px */

    /* Line heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Font weights */
    --font-thin: 100;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* ══════════════════════════════════════════════════════════
       14. TRANSITIONS & ANIMATIONS
    ══════════════════════════════════════════════════════════ */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Easing functions */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ══════════════════════════════════════════════════════════
       15. Z-INDEX SCALE
    ══════════════════════════════════════════════════════════ */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    --z-maximum: 999;

    /* ══════════════════════════════════════════════════════════
       16. BUTTON SYSTEM
    ══════════════════════════════════════════════════════════ */
    --btn-height-sm: 32px;
    --btn-height-md: 40px;
    --btn-height-lg: 48px;
    --btn-height-xl: 56px;

    --btn-padding-x-sm: var(--space-3);
    --btn-padding-x-md: var(--space-4);
    --btn-padding-x-lg: var(--space-6);
    --btn-padding-x-xl: var(--space-8);

    /* ══════════════════════════════════════════════════════════
       17. BREAKPOINTS (For Reference in JS/Comments)
    ══════════════════════════════════════════════════════════ */
    /* 
    --breakpoint-xs: 0px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    */
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL INPUT FIXES - Selection & Autocomplete
   Fixes blue highlight on search boxes and form inputs
═══════════════════════════════════════════════════════════════ */

/* Fix browser autocomplete/autofill styling - Light Mode */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px white inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ✅ Fix specific search input class (sks-input-element) */
.sks-input-element,
input.sks-input-element {
    background: transparent !important;
    color: inherit !important;
}

.sks-input-element::placeholder,
input.sks-input-element::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1 !important;
}

.sks-input-element::selection,
input.sks-input-element::selection {
    background: var(--theme-accent) !important;
    color: white !important;
}

.sks-input-element::-webkit-autofill,
input.sks-input-element:-webkit-autofill {
    -webkit-box-shadow: none !important;
    -webkit-text-fill-color: inherit !important;
    background: transparent !important;
}

/* Fix selection/highlight color to use theme */
::selection {
    background: var(--theme-accent) !important;
    color: white !important;
}

::-moz-selection {
    background: var(--theme-accent) !important;
    color: white !important;
}

input::selection,
textarea::selection {
    background: var(--theme-accent) !important;
    color: white !important;
}

input::-moz-selection,
textarea::-moz-selection {
    background: var(--theme-accent) !important;
    color: white !important;
}

/* Remove blue highlight from focused inputs */
input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--bg-accent-subtle) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE SUPPORT - Enhanced Modern Dark Theme
═══════════════════════════════════════════════════════════════ */

[data-mode="dark"],
.dark-mode {
    /* ══════════════════════════════════════════════════════════
       BACKGROUNDS - Premium Obsidian Palette
    ══════════════════════════════════════════════════════════ */
    --bg-app: #080A10;
    /* Luxury obsidian background (deep, velvety dark) */
    --bg-page: #0E1017;
    /* Sleek dark page body background */
    --bg-surface: #141724;
    /* Card surface - rich contrast */
    --bg-surface-2: #1B1E2E;
    /* Nested panel background - elegant elevation */
    --bg-surface-3: #23273C;
    /* Highlighted elements */
    --bg-elevated: #181B27;
    /* Modals and dropdown menus with depth */
    --bg-hover: rgba(255, 255, 255, 0.04);
    /* Subtle hover lift */
    --bg-active: rgba(255, 255, 255, 0.08);
    /* Active feedback */
    --bg-disabled: #10121B;
    /* Disabled state */

    /* Accent backgrounds in dark mode - THEME AWARE */
    --bg-accent: var(--theme-accent);
    --bg-accent-hover: var(--theme-accent-hover);
    --bg-accent-light: var(--theme-accent-pale);
    /* Uses theme color with alpha */
    --bg-accent-subtle: var(--bg-accent-light);
    /* Very subtle */

    /* ══════════════════════════════════════════════════════════
       TEXT COLORS - Clean, Soft Contrast Typography
    ══════════════════════════════════════════════════════════ */
    --text-primary: #F8FAFC;
    /* High-visibility pure off-white */
    --text-secondary: #CBD5E1;
    /* Slate-gray for standard text */
    --text-tertiary: #94A3B8;
    /* Medium slate for supporting info */
    --text-muted: #64748B;
    /* Dimmed placeholder/muted text */
    --text-disabled: #475569;
    /* Inactive text */
    --text-inverse: #080A10;
    /* Opposite contrast text */

    /* Keep accent colors - THEME AWARE (will inherit from theme switcher) */
    --text-accent: var(--theme-accent-light);
    /* Inherits theme color */
    --text-accent-dark: var(--theme-accent-hover);
    --text-link: var(--theme-accent-light);
    --text-link-hover: var(--theme-accent);
    --text-highlight: var(--theme-accent-light);

    /* ══════════════════════════════════════════════════════════
       BORDERS - Elegant Crisp Lines
    ══════════════════════════════════════════════════════════ */
    --border-color: rgba(255, 255, 255, 0.06);
    /* Clean, extremely thin card boundaries */
    --border-light: rgba(255, 255, 255, 0.03);
    /* Barely visible separators */
    --border-medium: rgba(255, 255, 255, 0.12);
    /* Stronger boundaries for headers */
    --border-strong: rgba(255, 255, 255, 0.25);
    /* Heavy contrast borders */
    --border-accent: var(--theme-accent);
    --border-accent-light: var(--theme-accent-light);
    --border-focus: var(--theme-accent);

    /* ══════════════════════════════════════════════════════════
       SHADOWS - Enhanced Depth with Glow (THEME AWARE)
    ══════════════════════════════════════════════════════════ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.65), 0 4px 8px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 24px 38px rgba(0, 0, 0, 0.75), 0 8px 16px rgba(0, 0, 0, 0.55);
    --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.85);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.5);

    /* Theme-specific shadows - will be overridden by theme switcher for other themes */
    --shadow-orange: 0 4px 16px rgba(255, 122, 0, 0.18), 0 2px 8px rgba(255, 122, 0, 0.1);
    --shadow-orange-lg: 0 10px 30px rgba(255, 122, 0, 0.28), 0 4px 12px rgba(255, 122, 0, 0.15);
    --shadow-orange-xl: 0 20px 40px rgba(255, 122, 0, 0.35), 0 8px 16px rgba(255, 122, 0, 0.2);

    /* Glow effects - theme aware */
    --glow-orange: 0 0 20px var(--theme-accent), 0 0 40px var(--theme-accent);
    --glow-orange-strong: 0 0 30px var(--theme-accent), 0 0 60px var(--theme-accent);

    /* ══════════════════════════════════════════════════════════
       SLATE COLORS - Richer Depth
    ══════════════════════════════════════════════════════════ */
    --slate-dark: #080A10;
    --slate-darker: #040508;
    --slate-light: #0E1017;
    --slate-lighter: #141724;
    --slate-widget: #1B1E2E;

    /* ══════════════════════════════════════════════════════════
       GRAY SCALE - Inverted & Enhanced
    ══════════════════════════════════════════════════════════ */
    --gray-50: #141724;
    --gray-100: #1B1E2E;
    --gray-150: #23273C;
    --gray-200: #23273C;
    --gray-250: #334155;
    --gray-300: #475569;
    --gray-350: #64748B;
    --gray-400: #64748B;
    --gray-500: #94A3B8;
    --gray-600: #CBD5E1;
    --gray-700: #E2E8F0;
    --gray-800: #F8FAFC;
    --gray-850: #FFFFFF;
    --gray-900: #FFFFFF;
    --gray-950: #FFFFFF;

    /* ══════════════════════════════════════════════════════════
       GRADIENTS - Darker variants for dark mode
    ══════════════════════════════════════════════════════════ */
    --gradient-dark: linear-gradient(180deg, #0E1017 0%, #080A10 100%);
    --gradient-hero: linear-gradient(135deg, rgba(255, 159, 28, 0.18) 0%, rgba(255, 122, 0, 0.1) 45%, rgba(194, 65, 12, 0.05) 100%);

    /* ══════════════════════════════════════════════════════════
       GLASSMORPHISM - Premium Dark Mode Glass Effects
    ══════════════════════════════════════════════════════════ */
    --glass-bg: rgba(20, 23, 36, 0.45);
    --glass-bg-strong: rgba(20, 23, 36, 0.75);
    --glass-bg-weak: rgba(20, 23, 36, 0.2);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-border-strong: rgba(255, 255, 255, 0.12);

    /* ══════════════════════════════════════════════════════════
       STATUS COLORS - Adjusted for dark mode visibility
    ══════════════════════════════════════════════════════════ */
    --success: #10B981;
    --success-dark: #059669;
    --success-light: #A7F3D0;
    --success-pale: rgba(16, 185, 129, 0.12);

    --error: #EF4444;
    --error-dark: #DC2626;
    --error-light: #FCA5A5;
    --error-pale: rgba(239, 68, 68, 0.12);

    --warning: #F59E0B;
    --warning-dark: #D97706;
    --warning-light: #FCD34D;
    --warning-pale: rgba(245, 158, 11, 0.12);

    --info: #3B82F6;
    --info-dark: #2563EB;
    --info-light: #93C5FD;
    --info-pale: rgba(59, 130, 246, 0.12);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE COMPONENT ENHANCEMENTS
   Specific fixes for components that need extra dark mode love
═══════════════════════════════════════════════════════════════ */

[data-mode="dark"],
.dark-mode {

    /* ── Welcome Strips (Obsidian Gradient Styling) ── */
    .sg-welcome-strip,
    .rc-welcome-strip,
    .ca-welcome-strip,
    .qz-welcome-strip,
    .ml-welcome-strip,
    .pg-welcome-strip,
    .wi-hero-strip,
    .wt-header,
    .st-header,
    .as-hero,
    .sg-hero,
    .ah-header,
    .al-header {
        background: linear-gradient(135deg, var(--orange-alpha-20) 0%, rgba(8, 10, 16, 0.4) 100%), var(--bg-surface) !important;
        border: 1.5px solid var(--border-color) !important;
    }

    /* ── Search Inputs - Fix autocomplete/selection highlights ── */
    input[type="search"],
    input[type="text"],
    input.search-input,
    .search-box input,
    .search-bar input {
        background: transparent !important;
        /* ✅ Remove background */
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    input[type="search"]::placeholder,
    input[type="text"]::placeholder,
    input.search-input::placeholder,
    .search-box input::placeholder,
    .search-bar input::placeholder {
        color: var(--text-tertiary) !important;
        /* ✅ Lighter, more visible */
        opacity: 0.7 !important;
    }

    /* Fix browser autocomplete styling */
    input[type="search"]:-webkit-autofill,
    input[type="text"]:-webkit-autofill,
    input.search-input:-webkit-autofill,
    .search-box input:-webkit-autofill,
    .search-bar input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 50px transparent inset !important;
        /* ✅ Transparent background */
        -webkit-text-fill-color: var(--text-primary) !important;
        caret-color: var(--theme-accent) !important;
        /* ✅ Theme colored cursor */
    }

    /* Fix selection/highlight color */
    input[type="search"]::selection,
    input[type="text"]::selection,
    input.search-input::selection,
    .search-box input::selection,
    .search-bar input::selection {
        background: var(--theme-accent) !important;
        color: white !important;
    }

    input[type="search"]::-moz-selection,
    input[type="text"]::-moz-selection,
    input.search-input::-moz-selection {
        background: var(--theme-accent) !important;
        color: white !important;
    }

    /* ── Cards & Surfaces ── */
    .card,
    .sg-surface,
    .wc-card,
    .dashboard-card {
        background: var(--bg-surface) !important;
        border: 1.5px solid var(--border-color) !important;
        box-shadow: var(--shadow-sm) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, box-shadow 0.3s ease !important;
    }

    /* ── Enhanced card hover states ── */
    .card:hover,
    .sg-surface:hover,
    .wc-card:hover,
    .dashboard-card:hover {
        transform: translateY(-4px) !important;
        border-color: var(--theme-accent) !important;
        box-shadow: var(--shadow-orange-lg) !important;
    }

    /* ── Headers ── */
    .card-header,
    .sg-header {
        background: var(--bg-surface-2) !important;
        border-bottom: 1.5px solid var(--border-color) !important;
    }

    /* ── Inputs & Form Elements ── */
    input,
    textarea,
    select,
    .form-control {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1.5px solid var(--border-color) !important;
        color: var(--text-primary) !important;
        transition: all 0.2s ease-in-out !important;
    }

    input:focus,
    textarea:focus,
    select:focus,
    .form-control:focus {
        background: rgba(255, 255, 255, 0.06) !important;
        border-color: var(--theme-accent) !important;
        box-shadow: 0 0 0 3px var(--orange-alpha-20), 0 4px 12px var(--orange-alpha-10) !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--text-muted) !important;
        /* ✅ Better visibility */
        opacity: 0.7 !important;
    }

    /* ── Buttons ── */
    .btn-secondary,
    .sg-btn-secondary {
        background: var(--bg-surface-2) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    .btn-secondary:hover,
    .sg-btn-secondary:hover {
        background: var(--bg-surface-3) !important;
        border-color: var(--border-medium) !important;
    }

    /* ── Progress Bars ── */
    .progress {
        background: var(--bg-surface-2) !important;
    }

    /* ── Badges ── */
    .badge-light,
    .sg-badge {
        background: var(--bg-surface-2) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-color) !important;
    }

    /* ── Tooltips & Popovers ── */
    .tooltip-inner,
    .popover {
        background: var(--bg-surface-3) !important;
        color: var(--text-primary) !important;
        box-shadow: var(--shadow-xl) !important;
    }

    /* ── Modals ── */
    .modal-content {
        background: var(--bg-surface) !important;
        border-color: var(--border-color) !important;
        box-shadow: var(--shadow-2xl) !important;
    }

    .modal-header {
        border-bottom-color: var(--border-color) !important;
    }

    .modal-footer {
        border-top-color: var(--border-color) !important;
    }

    /* ── Dropdowns ── */
    .dropdown-menu {
        background: var(--bg-elevated) !important;
        border-color: var(--border-color) !important;
        box-shadow: var(--shadow-xl) !important;
    }

    .dropdown-item {
        color: var(--text-primary) !important;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background: var(--bg-hover) !important;
        color: var(--text-accent) !important;
    }

    /* ── Navigation ── */
    .nav-tabs {
        border-bottom-color: var(--border-color) !important;
    }

    .nav-tabs .nav-link {
        color: var(--text-secondary) !important;
    }

    .nav-tabs .nav-link:hover {
        color: var(--text-accent) !important;
        border-color: var(--border-medium) !important;
    }

    .nav-tabs .nav-link.active {
        background: var(--bg-surface) !important;
        border-color: var(--border-color) !important;
        color: var(--text-accent) !important;
    }

    /* ── Tables ── */
    .table {
        color: var(--text-primary) !important;
    }

    .table thead th {
        background: var(--bg-surface-2) !important;
        border-bottom-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    .table tbody tr {
        border-bottom-color: var(--border-color) !important;
    }

    .table tbody tr:hover {
        background: var(--bg-hover) !important;
    }

    /* ── Sidebar (if present) ── */
    .sidebar,
    .side-nav {
        background: var(--slate-light) !important;
        border-right-color: var(--border-color) !important;
    }

    /* ── Chart Container ── */
    .chart-container,
    .sg-chart-wrap {
        background: var(--bg-surface-2) !important;
        border-radius: var(--radius-xl);
        padding: var(--space-4);
    }

    /* ── Scrollbars (Webkit) ── */
    *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    *::-webkit-scrollbar-track {
        background: var(--bg-surface-2);
    }

    *::-webkit-scrollbar-thumb {
        background: var(--bg-surface-3);
        border-radius: var(--radius-full);
    }

    *::-webkit-scrollbar-thumb:hover {
        background: var(--text-muted);
    }

    /* ── Image placeholders get subtle border ── */
    img[src=""],
    img:not([src]) {
        border: 1px solid var(--border-color);
        background: var(--bg-surface-2);
    }

    /* ── Empty states ── */
    .sg-empty,
    .empty-state {
        background: var(--bg-surface-2) !important;
        border: 1px dashed var(--border-medium) !important;
    }

    /* ── Dividers ── */
    hr,
    .divider {
        border-color: var(--border-color) !important;
        opacity: 1;
    }

    /* ── Code blocks ── */
    code,
    pre {
        background: var(--bg-surface-2) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    /* ── Welcome Banner Actions & Resume button glow ── */
    .sg-resume-strip-btn,
    .ml-enrol-cta,
    .ca-action-btn,
    .rc-action-btn {
        background: var(--theme-gradient) !important;
        box-shadow: 0 4px 12px var(--orange-alpha-25) !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
    }

    .sg-resume-strip-btn:hover:not([disabled]),
    .ml-enrol-cta:hover:not([disabled]) {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px var(--orange-alpha-40) !important;
        opacity: 1 !important;
    }
}

@media (prefers-color-scheme: dark) {
    .theme-auto {
        /* Inherits from [data-mode="dark"] */
    }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES — MAPPED TO DESIGN TOKENS
   Use these classes instead of hardcoded inline styles
═══════════════════════════════════════════════════════════════ */

/* Background Colors */
.bg-accent {
    background-color: var(--bg-accent) !important;
}

.bg-accent-hover {
    background-color: var(--bg-accent-hover) !important;
}

.bg-accent-light {
    background-color: var(--bg-accent-light) !important;
}

.bg-accent-subtle {
    background-color: var(--bg-accent-subtle) !important;
}

.bg-surface {
    background-color: var(--bg-surface) !important;
}

.bg-surface-2 {
    background-color: var(--bg-surface-2) !important;
}

.bg-surface-3 {
    background-color: var(--bg-surface-3) !important;
}

.bg-elevated {
    background-color: var(--bg-elevated) !important;
}

.bg-glass {
    background-color: var(--glass-bg) !important;
}

.bg-glass-strong {
    background-color: var(--glass-bg-strong) !important;
}

/* Text Colors */
.text-accent {
    color: var(--text-accent) !important;
}

.text-accent-dark {
    color: var(--text-accent-dark) !important;
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.text-tertiary {
    color: var(--text-tertiary) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-inverse {
    color: var(--text-inverse) !important;
}

/* Gradients */
.gradient-primary {
    background: var(--gradient-primary) !important;
}

.gradient-hero {
    background: var(--gradient-hero) !important;
}

.gradient-soft {
    background: var(--gradient-soft) !important;
}

/* Borders */
.border-accent {
    border-color: var(--border-accent) !important;
}

.border-light {
    border-color: var(--border-light) !important;
}

.border-medium {
    border-color: var(--border-medium) !important;
}

/* Shadows */
.shadow-xs {
    box-shadow: var(--shadow-xs) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

.shadow-xl {
    box-shadow: var(--shadow-xl) !important;
}

.shadow-orange {
    box-shadow: var(--shadow-orange) !important;
}

.shadow-orange-lg {
    box-shadow: var(--shadow-orange-lg) !important;
}

/* Status Colors */
.text-success {
    color: var(--success) !important;
}

.text-error {
    color: var(--error) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-info {
    color: var(--info) !important;
}

.bg-success-pale {
    background-color: var(--success-pale) !important;
}

.bg-error-pale {
    background-color: var(--error-pale) !important;
}

.bg-warning-pale {
    background-color: var(--warning-pale) !important;
}

.bg-info-pale {
    background-color: var(--info-pale) !important;
}

/* Glassmorphism Effect */
.glass-card {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

.glass-card-strong {
    background: var(--glass-bg-strong) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border-strong);
}

/* ═══════════════════════════════════════════════════════════════
   AUTH PAGES DARK MODE - Login & Register Pages
   Theme-aware dark mode styling for authentication pages
═══════════════════════════════════════════════════════════════ */

[data-mode="dark"],
.dark-mode {
    /* ✅ Override auth page CSS variables for dark mode */
    --lp-auth-surface-2: rgba(255, 255, 255, 0.05);
    /* Dark mode: subtle translucent white */

    /* Auth page background and shell */
    .lp-auth-page {
        background:
            radial-gradient(circle at 11% 8%, var(--orange-alpha-15), transparent 28%),
            radial-gradient(circle at 90% 20%, var(--orange-alpha-20), transparent 22%),
            var(--bg-app) !important;
    }

    .lp-auth-page::before {
        background:
            linear-gradient(115deg, rgba(26, 35, 50, 0.7) 0%, transparent 42%),
            radial-gradient(circle at 24% 30%, var(--orange-alpha-20), transparent 30%) !important;
    }

    /* Hero section */
    .lp-auth-hero {
        background: var(--bg-surface) !important;
        border-color: var(--border-color) !important;
    }

    /* Auth surface cards */
    .lp-auth-surface {
        background: var(--bg-surface) !important;
        border-color: var(--border-color) !important;
    }

    /* ✅✅✅ Input controls - CRITICAL FIX with !important */
    .lp-auth-control,
    .lp-auth-input-wrap input,
    .lp-auth-input-wrap select,
    .lp-auth-input-wrap textarea {
        background: rgba(255, 255, 255, 0.05) !important;
        /* ✅ Very subtle dark background */
        border-color: rgba(148, 163, 184, 0.2) !important;
        /* ✅ Subtle border */
        color: var(--text-primary) !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
        /* ✅ Subtle inner shadow */
    }

    .lp-auth-control:focus,
    .lp-auth-input-wrap input:focus,
    .lp-auth-input-wrap select:focus,
    .lp-auth-input-wrap textarea:focus {
        background: rgba(255, 255, 255, 0.08) !important;
        /* ✅ Slightly lighter on focus */
        border-color: var(--theme-accent) !important;
        box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.15), 0 0 12px var(--theme-accent) !important;
        /* ✅ Theme glow */
    }

    .lp-auth-control::placeholder,
    .lp-auth-input-wrap input::placeholder,
    .lp-auth-input-wrap textarea::placeholder {
        color: var(--text-tertiary) !important;
        opacity: 0.7 !important;
    }

    /* Labels and text */
    .lp-auth-label,
    .lp-auth-card-title,
    .lp-auth-text {
        color: var(--text-primary) !important;
    }

    .lp-auth-card-copy,
    .lp-auth-muted-text {
        color: var(--text-secondary) !important;
    }

    .lp-auth-hero-copy,
    .lp-auth-feature {
        color: var(--text-secondary) !important;
    }

    /* Buttons */
    .lp-auth-primary-btn,
    .lp-auth-form .base-button {
        background: var(--theme-accent) !important;
        color: white !important;
    }

    .lp-auth-primary-btn:hover,
    .lp-auth-form .base-button:hover {
        background: var(--theme-accent-hover) !important;
    }

    .lp-auth-secondary-btn {
        background: var(--bg-surface-2) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    /* Badge and stats */
    .lp-auth-badge {
        background: rgba(var(--theme-accent), 0.15) !important;
        border-color: var(--border-color) !important;
        color: var(--theme-accent-light) !important;
    }

    .lp-auth-stat {
        background: var(--bg-surface-2) !important;
        border-color: var(--border-color) !important;
    }

    .lp-auth-stat strong {
        color: var(--text-primary) !important;
    }

    .lp-auth-stat span {
        color: var(--text-tertiary) !important;
    }

    /* Radio cards */
    .lp-auth-radio-card span {
        background: var(--bg-surface-2) !important;
        border-color: var(--border-color) !important;
        color: var(--text-secondary) !important;
    }

    .lp-auth-radio-card input:checked+span {
        background: rgba(var(--theme-accent), 0.15) !important;
        border-color: var(--theme-accent) !important;
        color: var(--theme-accent-light) !important;
    }

    /* Logo border */
    .lp-auth-logo {
        border-bottom-color: var(--border-color) !important;
    }

    /* Footer and links */
    .lp-auth-footer,
    .lp-auth-form {
        border-color: var(--border-color) !important;
    }

    .lp-auth-muted-link,
    .lp-auth-footer a {
        color: var(--text-accent) !important;
    }

    .lp-auth-muted-link:hover,
    .lp-auth-footer a:hover {
        color: var(--theme-accent-light) !important;
    }

    /* Password toggle */
    .lp-auth-password-toggle {
        color: var(--theme-accent) !important;
    }

    .lp-auth-password-toggle:hover {
        background: rgba(var(--theme-accent), 0.1) !important;
        color: var(--theme-accent-light) !important;
    }

    /* Icons */
    .lp-auth-icon {
        color: var(--theme-accent) !important;
    }

    .lp-auth-feature i {
        color: var(--theme-performance-text) !important;
    }

    /* Alerts */
    .lp-auth-alert-success {
        background: rgba(34, 197, 94, 0.15) !important;
        border-color: rgba(34, 197, 94, 0.3) !important;
        color: var(--success-light) !important;
    }

    .lp-auth-alert-error {
        background: rgba(239, 68, 68, 0.15) !important;
        border-color: rgba(239, 68, 68, 0.3) !important;
        color: var(--error-light) !important;
    }

    /* Checkboxes */
    .lp-auth-check {
        color: var(--text-secondary) !important;
    }

    .lp-auth-check input {
        accent-color: var(--theme-accent) !important;
    }

    .lp-auth-check a {
        color: var(--text-accent) !important;
    }

    .lp-auth-check a:hover {
        color: var(--theme-accent-light) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES (1280px Viewport Optimization)
   Optimizes welcome banners when sidebar is open at desktop width
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    /* Reduce padding on all welcome strips to make them more compact */
    .sg-welcome-strip,
    .ml-welcome-strip,
    .rc-welcome-strip,
    .ca-welcome-strip,
    .pg-welcome-strip {
        padding: 24px 28px !important;
        gap: 20px !important;
    }

    /* Headline font size adjustment */
    .sg-welcome-headline,
    .ml-welcome-headline,
    .rc-welcome-headline,
    .ca-welcome-headline,
    .pg-welcome-headline {
        font-size: 1.8rem !important;
    }

    /* Tag adjustments */
    .sg-welcome-tag,
    .ml-welcome-tag,
    .rc-welcome-tag,
    .ca-welcome-tag,
    .pg-welcome-tag {
        font-size: 0.65rem !important;
        margin-bottom: 6px !important;
    }

    /* Description max-width and font size */
    .sg-welcome-desc,
    .ml-welcome-desc,
    .rc-welcome-desc,
    .ca-welcome-desc,
    .pg-welcome-desc {
        font-size: 0.78rem !important;
        max-width: 340px !important;
        line-height: 1.5 !important;
    }

    /* Flex row for right columns to sit side-by-side horizontally */
    .ml-welcome-right,
    .rc-welcome-right,
    .ca-welcome-right,
    .pg-welcome-right {
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        width: auto !important;
    }

    /* Align chips and elements to the end */
    .ml-welcome-chips,
    .rc-welcome-chips,
    .ca-welcome-chips,
    .pg-welcome-chips {
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    /* Reduce search box widths to fit horizontally */
    .rc-search-wrap,
    .pg-search-wrap,
    .ca-search-wrap {
        min-width: 240px !important;
        width: 240px !important;
        padding: 8px 12px !important;
    }

    /* Optimize user pill in Course list */
    .ml-user-pill {
        margin-top: 0 !important;
        padding: 6px 12px !important;
    }

    /* Adjust metric chips size in Dashboard */
    .sg-welcome-chips {
        gap: 10px !important;
    }
    .sg-metric-chip {
        padding: 8px 12px !important;
        border-radius: 10px !important;
    }
    .sg-mc-icon {
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
        font-size: 0.7rem !important;
    }
    .sg-mc-val {
        font-size: 0.8rem !important;
    }
    .sg-resume-strip-btn {
        padding: 9px 18px !important;
        font-size: 0.75rem !important;
    }
}