/* Learning Lens Design System - CSS Custom Properties */
/* Based on Material Design and ADHD-friendly principles */

:root {
    /* ============================================ */
    /* FOUNDATION COLORS */
    /* ============================================ */

    /* Dark Theme Base - From Design Guide Color Palette */
    --bg-primary: #0a0a0a;        /* Primary Background - Main app background */
    --bg-secondary: #1E1E1E;      /* Surface Background - Elevated surfaces, cards, modals */
    --bg-tertiary: #2A2A2A;       /* Tertiary surface for nested elements */
    --bg-surface: #1E1E1E;        /* Surface Background alias */
    --bg-hover: #2A2A2A;          /* Hover state background */

    /* Light backgrounds (for light mode or specific components) */
    --bg-light: #FFFFFF;
    --bg-light-secondary: #F5F5F5;
    --bg-light-tertiary: #EEEEEE;

    /* Opacity-based backgrounds */
    --bg-white-2: rgba(255, 255, 255, 0.02);   /* 2% white overlay */
    --bg-white-3: rgba(255, 255, 255, 0.03);   /* 3% white overlay */
    --bg-white-4: rgba(255, 255, 255, 0.04);   /* 4% white overlay */
    --bg-white-5: rgba(255, 255, 255, 0.05);   /* 5% white overlay */
    --bg-white-6: rgba(255, 255, 255, 0.06);   /* 6% white overlay */
    --bg-white-8: rgba(255, 255, 255, 0.08);   /* 8% white overlay */
    --bg-white-10: rgba(255, 255, 255, 0.1);   /* 10% white overlay */
    --bg-white-15: rgba(255, 255, 255, 0.15);  /* 15% white overlay */
    --bg-white-20: rgba(255, 255, 255, 0.2);   /* 20% white overlay */
    --bg-black-30: rgba(0, 0, 0, 0.3);         /* 30% black overlay */
    --bg-black-50: rgba(0, 0, 0, 0.5);         /* 50% black overlay */
    --bg-black-60: rgba(0, 0, 0, 0.6);         /* 60% black overlay */
    --bg-black-70: rgba(0, 0, 0, 0.7);         /* 70% black overlay */
    --bg-black-85: rgba(0, 0, 0, 0.85);        /* 85% black overlay */

    /* Accent Colors - From Design Guide */
    --accent-blue: #5873CB;       /* Accent/CTA - Primary buttons, links, timers */
    --accent-green: #367C28;      /* Success - Task completion, positive feedback */
    --accent-orange: #D96B8A;     /* Warning - Upcoming deadlines, alerts */
    --accent-red: #B00020;        /* Error/Destructive - Error messages, delete actions */
    --accent-purple: #8b5cf6;     /* Brand/Quest - Purple for brand elements, quest features */
    --accent-yellow: #FBC02D;     /* Attention - Highlights, notifications */

    /* Brand Primary (alias) */
    --brand-primary: #5873CB;     /* Main brand color - same as accent-blue */
    --brand-primary-light: #6b84d9; /* Lighter primary for hover states */

    /* Primary Color Opacity Variants */
    --primary-5: rgba(88, 115, 203, 0.05);   /* 5% primary overlay */
    --primary-10: rgba(88, 115, 203, 0.1);   /* 10% primary overlay */
    --primary-15: rgba(88, 115, 203, 0.15);  /* 15% primary overlay */
    --primary-20: rgba(88, 115, 203, 0.2);   /* 20% primary overlay */
    --primary-30: rgba(88, 115, 203, 0.3);   /* 30% primary overlay */

    /* Alert Color Backgrounds */
    --alert-bg: rgba(217, 107, 138, 0.15);   /* 15% alert background */
    --alert-bg-10: rgba(217, 107, 138, 0.1); /* 10% alert background */

    /* Text Colors - From Design Guide */
    --text-primary: #E0E0E0;      /* Primary Text - Body copy, standard labels */
    --text-secondary: #A0A0A0;    /* Secondary Text - Sub-text, hints, disabled */
    --text-tertiary: #808080;     /* Tertiary Text - Very subtle text */
    --text-muted: #A0A0A0;        /* Muted text alias */
    --text-accent: #5873CB;       /* Accent text color */
    --text-inverse: #0a0a0a;      /* Text on light backgrounds */
    --text-white: #FFFFFF;        /* Pure white text */

    /* Additional Gray Text Colors */
    --text-gray-600: #666666;     /* Common gray */
    --text-gray-700: #707070;     /* Common gray */
    --text-gray-800: #888888;     /* Common gray */
    --text-gray-900: #999999;     /* Common gray */
    --text-gray-b0: #B0B0B0;      /* Common gray */

    /* Light mode text colors */
    --text-light-primary: #212121;
    --text-light-secondary: #757575;
    --text-light-tertiary: #9E9E9E;

    /* Border Colors */
    --border-primary: #333333;    /* Default borders */
    --border-secondary: #404040;  /* Subtle borders */
    --border-focus: #5873CB;      /* Focus state borders */
    --border-light: #DDDDDD;      /* Light mode borders */

    /* ============================================ */
    /* SEMANTIC COLORS */
    /* ============================================ */

    /* Status Colors */
    --success: #4CAF50;           /* Success green */
    --success-light: #66BB6A;     /* Lighter success */
    --success-dark: #388E3C;      /* Darker success */
    --success-bg: rgba(76, 175, 80, 0.15);

    --warning: #FF9800;           /* Warning orange */
    --warning-light: #FFB74D;     /* Lighter warning */
    --warning-dark: #F57C00;      /* Darker warning */
    --warning-bg: rgba(255, 152, 0, 0.15);

    --error: #F44336;             /* Error red */
    --error-light: #EF5350;       /* Lighter error */
    --error-dark: #D32F2F;        /* Darker error */
    --error-bg: rgba(244, 67, 54, 0.15);

    --info: #2196F3;              /* Info blue */
    --info-light: #64B5F6;        /* Lighter info */
    --info-dark: #1976D2;         /* Darker info */
    --info-darker: #1E40AF;       /* Even darker info (navy) */
    --info-bg: rgba(33, 150, 243, 0.15);
    --info-bg-10: rgba(59, 130, 246, 0.1);    /* 10% info background */
    --info-bg-30: rgba(59, 130, 246, 0.3);    /* 30% info background */
    --info-darker-bg: rgba(30, 64, 175, 0.15); /* Darker info background */

    /* ============================================ */
    /* QUEST SYSTEM COLORS */
    /* ============================================ */

    /* Quest Primary Color */
    --quest-primary: #8b5cf6;     /* Main quest color (purple) */
    --quest-primary-light: #a78bfa;
    --quest-primary-dark: #7c3aed;

    /* Quest State Colors */
    --quest-pending: #9E9E9E;     /* Gray - Not started */
    --quest-in-progress: #2196F3; /* Blue - Currently working */
    --quest-completed: #4CAF50;   /* Green - Finished */
    --quest-approved: #FFD700;    /* Gold - Parent approved */

    /* Quest State Backgrounds */
    --quest-pending-bg: rgba(158, 158, 158, 0.15);
    --quest-in-progress-bg: rgba(33, 150, 243, 0.15);
    --quest-completed-bg: rgba(76, 175, 80, 0.15);
    --quest-approved-bg: rgba(255, 215, 0, 0.15);

    /* ============================================ */
    /* PRIORITY SYSTEM COLORS */
    /* ============================================ */

    /* Priority Levels (task importance, not urgency) */
    --priority-critical: #F44336;  /* Red - Must do immediately */
    --priority-high: #FF9800;      /* Orange - Important */
    --priority-medium: #2196F3;    /* Blue - Normal priority */
    --priority-low: #9E9E9E;       /* Gray - Can wait */

    /* Priority Backgrounds */
    --priority-critical-bg: rgba(244, 67, 54, 0.15);
    --priority-high-bg: rgba(255, 152, 0, 0.15);
    --priority-medium-bg: rgba(33, 150, 243, 0.15);
    --priority-low-bg: rgba(158, 158, 158, 0.15);

    /* ============================================ */
    /* TIME URGENCY SYSTEM */
    /* ============================================ */

    /* ADHD-Friendly Time Perception */
    /* Semantic colors for time-based urgency */
    --urgency-overdue: #D32F2F;      /* Red - Critical, overdue */
    --urgency-today: #D32F2F;        /* Red - Due today, urgent */
    --urgency-tomorrow: #F57C00;     /* Orange - Due tomorrow */
    --urgency-this-week: #FBC02D;    /* Yellow - Due this week */
    --urgency-soon: #4CAF50;         /* Green - Due 1-2 weeks */
    --urgency-future: #66BB6A;       /* Light green - Due 2+ weeks */

    /* Urgency background variants (subtle, for badges) */
    --urgency-overdue-bg: rgba(211, 47, 47, 0.15);
    --urgency-today-bg: rgba(211, 47, 47, 0.15);
    --urgency-tomorrow-bg: rgba(245, 124, 0, 0.15);
    --urgency-this-week-bg: rgba(251, 192, 45, 0.15);
    --urgency-soon-bg: rgba(76, 175, 80, 0.15);
    --urgency-future-bg: rgba(102, 187, 106, 0.15);

    /* ============================================ */
    /* COGNITIVE LOAD / DIFFICULTY COLORS */
    /* ============================================ */

    /* Difficulty Spectrum (1-10 scale) */
    --difficulty-very-easy: #66BB6A;   /* Green - 1-2 */
    --difficulty-easy: #81C784;        /* Light green - 3-4 */
    --difficulty-medium: #FDD835;      /* Yellow - 5-6 */
    --difficulty-hard: #FFB74D;        /* Orange - 7-8 */
    --difficulty-very-hard: #EF5350;   /* Red - 9-10 */

    /* Difficulty Gradients */
    --gradient-difficulty-easy: linear-gradient(135deg, #66BB6A, #4CAF50);
    --gradient-difficulty-medium: linear-gradient(135deg, #FDD835, #FBC02D);
    --gradient-difficulty-hard: linear-gradient(135deg, #FFB74D, #F57C00);
    --gradient-difficulty-very-hard: linear-gradient(135deg, #EF5350, #D32F2F);

    /* ============================================ */
    /* AI FEATURES COLORS */
    /* ============================================ */

    /* AI Primary Color */
    --ai-primary: #8b5cf6;            /* Purple - AI-generated content */
    --ai-secondary: #a78bfa;          /* Light purple - AI suggestions */
    --ai-accent: #7c3aed;             /* Dark purple - AI badges */

    /* AI Confidence Levels */
    --ai-confidence-high: #4CAF50;    /* Green - 85%+ confidence */
    --ai-confidence-medium: #FF9800;  /* Orange - 70-85% confidence */
    --ai-confidence-low: #F44336;     /* Red - <70% confidence */

    /* AI Backgrounds */
    --ai-bg: rgba(139, 92, 246, 0.15);
    --ai-bg-10: rgba(139, 92, 246, 0.1);     /* 10% AI background */
    --ai-bg-15: rgba(139, 92, 246, 0.15);    /* 15% AI background */
    --ai-confidence-high-bg: rgba(76, 175, 80, 0.15);
    --ai-confidence-medium-bg: rgba(255, 152, 0, 0.15);
    --ai-confidence-low-bg: rgba(244, 67, 54, 0.15);

    /* ============================================ */
    /* SUBJECT/COURSE COLORS */
    /* ============================================ */

    /* Academic Subject Colors */
    --subject-math: #E91E63;          /* Pink/Red */
    --subject-science: #4CAF50;       /* Green */
    --subject-english: #2196F3;       /* Blue */
    --subject-social-studies: #FF9800; /* Orange */
    --subject-language: #9C27B0;      /* Purple */
    --subject-arts: #FF5722;          /* Deep Orange */
    --subject-pe: #00BCD4;            /* Cyan */
    --subject-elective: #607D8B;      /* Blue Gray */
    --subject-other: #9E9E9E;         /* Gray */

    /* Subject Backgrounds */
    --subject-math-bg: rgba(233, 30, 99, 0.15);
    --subject-science-bg: rgba(76, 175, 80, 0.15);
    --subject-english-bg: rgba(33, 150, 243, 0.15);
    --subject-social-studies-bg: rgba(255, 152, 0, 0.15);
    --subject-language-bg: rgba(156, 39, 176, 0.15);
    --subject-arts-bg: rgba(255, 87, 34, 0.15);
    --subject-pe-bg: rgba(0, 188, 212, 0.15);
    --subject-elective-bg: rgba(96, 125, 139, 0.15);
    --subject-other-bg: rgba(158, 158, 158, 0.15);

    /* ============================================ */
    /* ASSIGNMENT STATUS COLORS */
    /* ============================================ */

    /* Assignment States */
    --status-not-started: #9E9E9E;    /* Gray */
    --status-in-progress: #2196F3;    /* Blue */
    --status-submitted: #4CAF50;      /* Green */
    --status-graded: #8b5cf6;         /* Purple */
    --status-missing: #F44336;        /* Red */
    --status-late: #FF9800;           /* Orange */
    --status-exempt: #757575;         /* Dark gray */

    /* Status Backgrounds */
    --status-not-started-bg: rgba(158, 158, 158, 0.15);
    --status-in-progress-bg: rgba(33, 150, 243, 0.15);
    --status-submitted-bg: rgba(76, 175, 80, 0.15);
    --status-graded-bg: rgba(139, 92, 246, 0.15);
    --status-missing-bg: rgba(244, 67, 54, 0.15);
    --status-late-bg: rgba(255, 152, 0, 0.15);
    --status-exempt-bg: rgba(117, 117, 117, 0.15);

    /* ============================================ */
    /* GRADIENTS */
    /* ============================================ */

    /* Brand Gradients */
    --gradient-primary: linear-gradient(135deg, #5873CB, #4A63B8);
    --gradient-blue: linear-gradient(135deg, #5873CB, #4A63B8);
    --gradient-green: linear-gradient(135deg, #4CAF50, #388E3C);
    --gradient-orange: linear-gradient(135deg, #FF9800, #F57C00);
    --gradient-purple: linear-gradient(135deg, #8b5cf6, #7c3aed);
    --gradient-red: linear-gradient(135deg, #F44336, #D32F2F);
    --gradient-bg: linear-gradient(135deg, #0a0a0a 0%, #1E1E1E 100%);

    /* Quest Gradient */
    --gradient-quest: linear-gradient(135deg, #8b5cf6, #d946ef);

    /* AI Gradient */
    --gradient-ai: linear-gradient(135deg, #8b5cf6, #a78bfa);

    /* Success/Warning/Error Gradients */
    --gradient-success: linear-gradient(135deg, #4CAF50, #388E3C);
    --gradient-warning: linear-gradient(135deg, #FF9800, #F57C00);
    --gradient-error: linear-gradient(135deg, #F44336, #D32F2F);

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

    /* Base 8px spacing scale */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-2-5: 10px;            /* Added for common 10px */
    --space-3: 12px;
    --space-3-5: 14px;            /* Added for common 14px */
    --space-4: 16px;
    --space-4-5: 18px;            /* Added for common 18px */
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;              /* Added for gap between 24-32 */
    --space-8: 32px;
    --space-9: 36px;              /* Added for gap between 32-40 */
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

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

    --radius-none: 0;
    --radius-xs: 2px;              /* Extra small radius */
    --radius-sm: 4px;              /* Small radius (was 6px, standardized) */
    --radius-sm-md: 6px;           /* Between small and medium */
    --radius-md: 8px;              /* Medium radius (was 12px, standardized) */
    --radius-md-lg: 10px;          /* Between medium and large */
    --radius-lg: 12px;             /* Large radius (was 16px, standardized) */
    --radius-lg-xl: 14px;          /* Between large and extra-large */
    --radius-xl: 16px;             /* Extra large (was 24px, standardized) */
    --radius-xl-2xl: 20px;         /* Between XL and 2XL */
    --radius-2xl: 24px;            /* 2X large radius */
    --radius-full: 9999px;         /* Pills and circles */

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

    --shadow-none: none;
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Focus Shadow */
    --shadow-focus: 0 0 0 3px rgba(88, 115, 203, 0.5);

    /* ============================================ */
    /* 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-notification: 1080;
    --z-max: 10000;  /* Environment banners, critical overlays */

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

    /* Font Families */
    --font-primary: 'Lexend', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* 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 */
    --text-6xl: 3.75rem;    /* 60px */

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

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

    /* ============================================ */
    /* TRANSITIONS */
    /* ============================================ */

    /* Duration */
    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 350ms;
    --duration-slower: 500ms;

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

    /* ============================================ */
    /* BREAKPOINTS (for reference in JS) */
    /* ============================================ */

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}