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

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

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

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

    /* ========================================
       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;
    --table-header-bg: #2a2a2a;

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

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