/**
 * Global CSS Variables System
 * Modern Minimalist + Glassmorphism Design Language
 * For IGCSE/A-Level Platform Refactoring
 * 
 * Design Principles:
 * - Clean & Professional: Light, airy design with significant white space
 * - Soft Depth: 1rem+ rounded corners, subtle shadows, glassmorphism
 * - Sophisticated Palette: Indigo gradient primary, high contrast text
 * - ESL-Friendly: Visual scaffolding, progressive disclosure
 */

:root {
   /* ============================================
     PRIMARY COLORS & GRADIENTS
     ============================================ */

   /* Primary Indigo Gradient - Much Brighter & More Vibrant */
   --primary: #6366F1;
   --primary-dark: #4F46E5;
   --primary-light: #818CF8;
   --primary-lighter: #A5B4FC;
   --primary-lightest: #C7D2FE;

   /* Gradient System - Enhanced Vibrancy */
   --gradient-main: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
   --gradient-main-hover: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
   --gradient-subtle: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
   --gradient-overlay: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);

   /* Secondary Purple - More Vibrant */
   --secondary: #8B5CF6;
   --secondary-dark: #7C3AED;
   --secondary-light: #A78BFA;

   /* ============================================
     BACKGROUND COLORS
     ============================================ */

   --background: #FFFFFF;
   --bg-secondary: #FCFCFD;
   --bg-tertiary: #F8F9FB;
   --bg-hover: #FAFBFC;
   --bg-active: #F4F6F8;

   /* Glassmorphism Backgrounds */
   --glass: rgba(255, 255, 255, 0.7);
   --glass-strong: rgba(255, 255, 255, 0.85);
   --glass-weak: rgba(255, 255, 255, 0.5);
   --glass-dark: rgba(15, 23, 42, 0.7);

   /* ============================================
     TEXT COLORS
     ============================================ */

   /* High Contrast for Headers */
   --text-main: #0F172A;
   --text-heading: #0F172A;
   --text-title: #1E293B;

   /* Muted for Subtext - Much Brighter */
   --text-muted: #475569;
   --text-subtle: #64748B;
   --text-disabled: #CBD5E1;

   /* Interactive Text - More Vibrant */
   --text-link: #6366F1;
   --text-link-hover: #4F46E5;
   --text-link-active: #4338CA;

   /* Inverse Text (for dark backgrounds) */
   --text-inverse: #FFFFFF;
   --text-inverse-muted: rgba(255, 255, 255, 0.8);

   /* ============================================
     ACCENT COLORS
     ============================================ */

   /* Premium Features - Gold/Orange */
   --accent-premium: #F59E0B;
   --accent-premium-dark: #D97706;
   --accent-premium-light: #FBBF24;
   --accent-premium-bg: rgba(245, 158, 11, 0.1);

   /* New Features - Teal */
   --accent-new: #06B6D4;
   --accent-new-dark: #0891B2;
   --accent-new-light: #22D3EE;
   --accent-new-bg: rgba(6, 182, 212, 0.1);

   /* Success */
   --success: #10B981;
   --success-dark: #059669;
   --success-light: #34D399;
   --success-bg: rgba(16, 185, 129, 0.1);

   /* Warning */
   --warning: #F59E0B;
   --warning-dark: #D97706;
   --warning-light: #FBBF24;
   --warning-bg: rgba(245, 158, 11, 0.1);

   /* Error/Danger */
   --error: #EF4444;
   --error-dark: #DC2626;
   --error-light: #F87171;
   --error-bg: rgba(239, 68, 68, 0.1);

   /* Info */
   --info: #3B82F6;
   --info-dark: #2563EB;
   --info-light: #60A5FA;
   --info-bg: rgba(59, 130, 246, 0.1);

   /* ============================================
     BORDER & DIVIDER
     ============================================ */

   --border-color: #E2E8F0;
   --border-color-light: #F1F5F9;
   --border-color-dark: #CBD5E1;
   --border-color-focus: #6366F1;

   --divider: #E2E8F0;
   --divider-light: #F1F5F9;

   /* ============================================
     SHADOWS
     ============================================ */

   /* Subtle Depth */
   --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
   --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);

   /* Colored Shadows (for interactive elements) - Enhanced */
   --shadow-primary: 0 4px 12px rgba(99, 102, 241, 0.2);
   --shadow-primary-hover: 0 8px 24px rgba(99, 102, 241, 0.3);
   --shadow-premium: 0 4px 12px rgba(245, 158, 11, 0.25);
   --shadow-new: 0 4px 12px rgba(6, 182, 212, 0.25);

   /* Glassmorphism Shadow */
   --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);

   /* ============================================
     BORDER RADIUS
     ============================================ */

   --radius: 0.75rem;
   /* 12px - Standard rounded corners */
   --radius-sm: 0.5rem;
   /* 8px - Small elements */
   --radius-md: 1rem;
   /* 16px - Cards, modals */
   --radius-lg: 1.25rem;
   /* 20px - Large containers */
   --radius-xl: 1.5rem;
   /* 24px - Hero sections */
   --radius-full: 9999px;
   /* Full circle */

   /* ============================================
     SPACING SYSTEM
     ============================================ */

   --spacing-xs: 0.25rem;
   /* 4px */
   --spacing-sm: 0.5rem;
   /* 8px */
   --spacing-md: 1rem;
   /* 16px */
   --spacing-lg: 1.5rem;
   /* 24px */
   --spacing-xl: 2rem;
   /* 32px */
   --spacing-2xl: 3rem;
   /* 48px */
   --spacing-3xl: 4rem;
   /* 64px */

   /* ============================================
     TYPOGRAPHY
     ============================================ */

   /* Font Families */
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

   /* Font Sizes */
   --text-xs: 0.75rem;
   /* 12px */
   --text-sm: 0.875rem;
   /* 14px */
   --text-base: 1rem;
   /* 16px */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.25rem;
   /* 20px */
   --text-2xl: 1.5rem;
   /* 24px */
   --text-3xl: 1.875rem;
   /* 30px */
   --text-4xl: 2.25rem;
   /* 36px */
   --text-5xl: 3rem;
   /* 48px */

   /* Font Weights */
   --font-light: 300;
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;
   --font-extrabold: 800;

   /* Line Heights */
   --leading-tight: 1.25;
   --leading-normal: 1.5;
   --leading-relaxed: 1.75;
   --leading-loose: 2;

   /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */

   --transition-fast: 150ms ease;
   --transition-base: 200ms ease;
   --transition-slow: 300ms ease;
   --transition-slower: 500ms ease;

   /* 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);

   /* ============================================
     Z-INDEX SCALE
     ============================================ */

   --z-base: 0;
   --z-dropdown: 1000;
   --z-sticky: 1020;
   --z-fixed: 1030;
   --z-modal-backdrop: 1040;
   --z-modal: 1050;
   --z-popover: 1060;
   --z-tooltip: 1070;
   --z-toast: 1080;

   /* ============================================
     GLASSMORPHISM EFFECTS
     ============================================ */

   --backdrop-blur: blur(10px);
   --backdrop-blur-sm: blur(4px);
   --backdrop-blur-md: blur(8px);
   --backdrop-blur-lg: blur(16px);
   --backdrop-blur-xl: blur(24px);

   /* ============================================
     INTERACTIVE STATES
     ============================================ */

   /* Hover States */
   --hover-scale: 1.02;
   --hover-scale-sm: 1.01;
   --hover-scale-lg: 1.05;

   /* Focus States - Enhanced */
   --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.15);
   --focus-ring-offset: 0 0 0 3px rgba(99, 102, 241, 0.15), 0 0 0 1px rgba(99, 102, 241, 0.3);

   /* ============================================
     LAYOUT
     ============================================ */

   --container-max-width: 1400px;
   --container-padding: 1.5rem;
   /* 24px */

   /* Grid System */
   --grid-gap: 1.5rem;
   /* 24px */
   --grid-gap-sm: 1rem;
   /* 16px */
   --grid-gap-lg: 2rem;
   /* 32px */

   /* ============================================
     COMPONENT-SPECIFIC VARIABLES
     ============================================ */

   /* Cards */
   --card-bg: var(--background);
   --card-border: var(--border-color);
   --card-radius: var(--radius-md);
   --card-padding: var(--spacing-xl);
   --card-shadow: var(--shadow);
   --card-shadow-hover: var(--shadow-lg);

   /* Buttons */
   --btn-radius: var(--radius);
   --btn-padding-x: 1rem;
   --btn-padding-y: 0.625rem;
   --btn-font-weight: var(--font-medium);

   /* Inputs */
   --input-radius: var(--radius);
   --input-border: 1px solid var(--border-color);
   --input-border-focus: 1px solid var(--border-color-focus);
   --input-padding-x: 0.75rem;
   --input-padding-y: 0.625rem;

   /* Modals */
   --modal-backdrop: rgba(15, 23, 42, 0.5);
   --modal-radius: var(--radius-lg);
   --modal-shadow: var(--shadow-xl);

   /* Navigation */
   --nav-height: 72px;
   --nav-bg: var(--glass-strong);
   --nav-border: var(--border-color-light);
}

/* ============================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================ */

@media (prefers-color-scheme: dark) {
   :root {
      /* Dark mode variables can be added here when needed */
   }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
   :root {
      --background: #FFFFFF;
      --text-main: #000000;
      --shadow: none;
      --shadow-lg: none;
   }
}