/* ============================================================================
   THEME.CSS - Global Color Token System

   Centralized color management for light and dark modes.
   All colors are defined as semantic CSS variables for easy theming.
   ============================================================================ */

:root {
    /* ========================================
       LESSON THEME ACCENT COLORS
       Used for hero icons, callout borders, and themed emphasis
       ======================================== */

    --accent-blue: #3498db;
    --accent-purple: #9b59b6;
    --accent-red: #e74c3c;
    --accent-orange: #e67e22;
    --accent-green: #27ae60;
    --accent-teal: #1abc9c;
    --accent-dark-red: #c0392b;

    /* ========================================
       STEP/STAGE BACKGROUND COLORS
       Used for pedagogical step-by-step visualizations
       ======================================== */

    --step-bg-orange: #fef5e7;   /* Original/first step */
    --step-bg-blue: #ebf5fb;     /* Split step */
    --step-bg-teal: #e8f8f5;     /* Split again step */
    --step-bg-purple: #f4ecf7;   /* Merge pairs step */
    --step-bg-green: #d5f4e6;    /* Final/success step */
    --step-border-gray: #bdc3c7; /* Step/table borders */

    /* ========================================
       WARNING & ALERT COLORS
       ======================================== */

    --warning-orange: #f39c12;
    --warning-bg: #fff3cd;
    --warning-border: #ffc107;
    --warning-text: #856404;

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

    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --text-muted: #95a5a6;
    --text-heading: var(--text-primary);  /* Lesson headings (same as body in light mode) */

    /* ========================================
       SURFACE & BACKGROUND COLORS
       ======================================== */

    --surface: #ffffff;
    --surface-muted: #ecf0f1;
    --surface-highlight: #f8f9fa;

    /* ========================================
       BORDER COLORS
       ======================================== */

    --border-light: #e0e0e0;
    --border-muted: #bdc3c7;

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

    --heading-blue: #2980b9;
    --success-green: #27ae60;
    --success-dark: #16a085;

    /* ========================================
       CODE & TABLE BACKGROUNDS
       ======================================== */

    --code-bg-dark: #2c3e50;
    --code-text-light: #ecf0f1;  /* Light text for dark code blocks */
    --hint-code-bg: #2c3e50;     /* V2 alias — keeps lesson-27 slide 7 correct in V1 */
    --hint-code-text: #ecf0f1;   /* V2 alias — keeps lesson-27 slide 7 correct in V1 */
    --table-header-bg: #34495e;

    /* ========================================
       OUTPUT SURFACE (Success/Result Panels)
       ======================================== */

    --output-bg: rgba(16, 185, 129, 0.1);
    --output-border: rgba(16, 185, 129, 0.3);

    /* ========================================
       CHALLENGE & IDE MODE COLORS
       ======================================== */

    --challenge-objective-bg: #f0f9ff;
    --challenge-objective-border: #3b82f6;
    --challenge-objective-heading: #1e40af;

    --challenge-success-bg: #f3f4f6;
    --challenge-text: #334155;

    --challenge-hint-bg: #ffffff;
    --challenge-hint-border: #8b5cf6;
    --challenge-hint-text: #7c3aed;
    --challenge-hint-hover: #f5f3ff;

    --panel-bg: rgba(255, 255, 255, 0.95);

    /* ========================================
       LAYOUT SIZING VARIABLES
       Foundation layer for responsive layout system
       ======================================== */

    /* Base spacing units */
    --header-height: 60px;
    --container-padding: 30px;
    --container-padding-top: 80px; /* Top padding for header clearance (60px header + 20px gap) */
    --grid-gap: 20px;

    /* Responsive padding overrides (applied via media queries) */
    --container-padding-tablet: 20px;
    --container-padding-top-tablet: 80px;
    --container-padding-mobile: 15px;
    --container-padding-top-mobile: 75px;

    /* Output panel - "Guarded Flex" minimums */
    --output-default-height: 220px;
    --output-min-height: 180px;
    --output-max-height: 400px;

    /* Editor minimums */
    --editor-min-height: 150px;

    /* Code panel minimums (desktop/tablet/mobile) */
    --code-panel-min-desktop: 500px;
    --code-panel-min-tablet: 350px; /* Reduced from 450px to prevent vertical squish on landscape screens */
    --code-panel-min-mobile: 400px;

    /* User-controlled variable (JS/CSS bridge) */
    --user-output-height: var(--output-default-height);

    /* Computed available height (eliminates calc() magic numbers)
       NOTE: Header is position:fixed, so doesn't occupy layout space.
       Container padding-top (100px) already provides header clearance. */
    --available-height: calc(100vh - var(--container-padding-top) - var(--container-padding));
}

/* ============================================================================
   DARK MODE OVERRIDES

   When body.dark-mode is active, all color tokens are redefined
   for optimal dark mode appearance.
   ============================================================================ */

body.dark-mode {
    /* ========================================
       LESSON THEME ACCENT COLORS (Dark Mode)
       Slightly brightened for better contrast on dark backgrounds
       ======================================== */

    --accent-blue: #5dade2;
    --accent-purple: #af7ac5;
    --accent-red: #ec7063;
    --accent-orange: #f39c12;
    --accent-green: #52be80;
    --accent-teal: #48c9b0;
    --accent-dark-red: #e74c3c;

    /* ========================================
       WARNING & ALERT COLORS (Dark Mode)
       ======================================== */

    --warning-orange: #f39c12;
    --warning-bg: #3e2f1f;
    --warning-border: #f39c12;
    --warning-text: #f39c12;

    /* ========================================
       BASE TEXT COLORS (Dark Mode)
       ======================================== */

    --text-primary: #e8e8e8;
    --text-secondary: #b0b0b0;
    --text-muted: #808080;
    --text-heading: #f7fafc;  /* Lesson headings (high contrast in dark mode) */

    /* ========================================
       SURFACE & BACKGROUND COLORS (Dark Mode)
       ======================================== */

    --surface: #2d3748;
    --surface-muted: #3a3a3a;
    --surface-highlight: #404040;

    /* ========================================
       BORDER COLORS (Dark Mode)
       ======================================== */

    --border-light: #4a4a4a;
    --border-muted: #555555;

    /* ========================================
       SEMANTIC UI COLORS (Dark Mode)
       ======================================== */

    --heading-blue: #5dade2;
    --success-green: #52be80;
    --success-dark: #48c9b0;

    /* ========================================
       CODE & TABLE BACKGROUNDS (Dark Mode)
       ======================================== */

    --code-bg-dark: #1a202c;
    --code-text-light: #f0f3f4;  /* Slightly brighter in dark mode */
    --hint-code-bg: #1a202c;     /* V2 alias — keeps lesson-27 slide 7 correct in V1 */
    --hint-code-text: #f0f3f4;   /* V2 alias — keeps lesson-27 slide 7 correct in V1 */
    --table-header-bg: #2a2a2a;

    /* ========================================
       OUTPUT SURFACE (Dark Mode)
       ======================================== */

    --output-bg: rgba(16, 135, 129, 0.12);
    --output-border: rgba(16, 135, 129, 0.3);

    /* ========================================
       CHALLENGE & IDE MODE COLORS (Dark Mode)
       ======================================== */

    --challenge-objective-bg: rgba(30, 30, 46, 0.8);
    --challenge-objective-border: rgba(139, 92, 246, 0.3);
    --challenge-objective-heading: #e2e8f0;

    --challenge-success-bg: rgba(30, 30, 46, 0.8);
    --challenge-text: #cbd5e1;

    --challenge-hint-bg: rgba(139, 92, 246, 0.2);
    --challenge-hint-border: rgba(139, 92, 246, 0.4);
    --challenge-hint-text: #c9d1d9;
    --challenge-hint-hover: rgba(139, 92, 246, 0.3);

    --panel-bg: rgba(30, 27, 75, 0.95);
}