:root {
    /* Colors - Modern Indigo & Teal Palette */
    --color-primary: #4F46E5;
    --color-primary-dark: #4338CA;
    --color-primary-light: #EEF2FF;

    --color-secondary: #0EA5E9;
    /* Sky Blue */
    --color-accent: #10B981;
    /* Emerald */
    --color-danger: #EF4444;
    --color-warning: #F59E0B;

    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-glass: rgba(255, 255, 255, 0.85);

    --color-text-main: #0F172A;
    --color-text-muted: #64748B;
    --color-text-light: #94A3B8;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);
    --gradient-surface: linear-gradient(145deg, #ffffff, #f1f5f9);
    --gradient-glow: radial-gradient(circle at top right, rgba(79, 70, 229, 0.1), transparent 40%);

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-colored: 0 10px 30px -10px rgba(79, 70, 229, 0.3);

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    /* Layout */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    --header-height: 70px;
    --sidebar-width: 260px;
}

/* Dark Mode Variables - (Optional Implementation) */
@media (prefers-color-scheme: dark) {
    /* Kept light for now as per Education tool standard, 
       but set up structure for easy switch */
}