/* colors.css */

@layer reset, base, components, modules, utilities;

@layer base {

    :root {

        /* ============================================================================
           TIER 1: PRIMITIVES (Raw LCH Values)
           ============================================================================ */

        /* Ocean Blues (Background Hierarchy) */
        --lch-ocean-950: 10% 0.02 240;
        --lch-ocean-900: 15% 0.03 240;
        --lch-ocean-800: 22% 0.04 240;
        --lch-ocean-700: 30% 0.05 240;

        /* Avant Teal (Primary Brand) */
        --lch-teal: 78% 0.13 180;

        /* Neutral Grays */
        --lch-white: 98% 0 0;
        --lch-gray: 66% 0.01 240;

        /* Extra Accents */
        --lch-neon-teal: 88% 0.15 175;
        --lch-neon-blue: 68% 0.14 235;
        --lch-neon-pink: 58% 0.22 340;

        /* Level/Category Accents */
        --lch-accent-blue: 72% 0.14 235;
        --lch-accent-yellow: 88% 0.15 95;
        --lch-accent-pink: 62% 0.22 340;
        --lch-accent-purple: 72% 0.15 300;

        /* Status Colors */
        --lch-danger: 62% 0.22 25;
        --lch-success: 75% 0.16 165;
        --lch-warning: 82% 0.15 85;

        /* Admin Colors */
        --lch-admin-bg: 8% 0.02 240;
        --lch-admin-surface: 12% 0.03 240;
        --lch-admin-pink: 70% 0.18 340;
        --lch-admin-yellow: 85% 0.14 95;
        --lch-admin-gray: 48% 0.02 240;

        /* Tutorial Theme Colors */
        --lch-tutorial-bg: 14% 0.04 240;
        --lch-tutorial-surface: 18% 0.05 240;
        --lch-tutorial-teal: 72% 0.11 180;
        --lch-tutorial-blue: 35% 0.06 240;
        --lch-tutorial-pink: 62% 0.19 340;
        --lch-tutorial-muted: 62% 0.02 240;
        --lch-tutorial-gray-500: 48% 0.02 240;
        --lch-tutorial-gray-600: 40% 0.03 240;
        --lch-tutorial-danger: 58% 0.20 25;

        /* ============================================================================
           TIER 2: SEMANTICS (Keep your existing variable names)
           ============================================================================ */

        /* Color Palette (legacy compatibility) */
        --ocean-950: oklch(var(--lch-ocean-950));
        --ocean-900: oklch(var(--lch-ocean-900) / 0.95);
        --ocean-800: oklch(var(--lch-ocean-800));
        --ocean-700: oklch(var(--lch-ocean-700));

        --avant-teal: oklch(var(--lch-teal));
        --avant-teal-dim: oklch(var(--lch-teal) / 0.1);
        --avant-white: oklch(var(--lch-white));
        --avant-gray: oklch(var(--lch-gray));

        /* Semantic Mappings */
        --bg-main: var(--ocean-950);
        --bg-surface: var(--ocean-900);
        --bg-card: var(--ocean-800);

        --text-main: var(--avant-white);
        --text-muted: var(--avant-gray);

        --accent-primary: var(--avant-teal);
        --border-color: oklch(var(--lch-white) / 0.1);

        /* Fonts */
        --font-sans: 'Outfit', sans-serif;
        --font-display: 'Teko', sans-serif;

        /* Extra accents */
        --neon-teal: oklch(var(--lch-neon-teal));
        --neon-blue: oklch(var(--lch-neon-blue));
        --neon-pink: oklch(var(--lch-neon-pink));
        --ocean-dark: oklch(var(--lch-ocean-800) / 0.5);

        /* Level/Category Accents */
        --accent-blue: oklch(var(--lch-accent-blue));
        --accent-yellow: oklch(var(--lch-accent-yellow));
        --accent-pink: oklch(var(--lch-accent-pink));
        --accent-purple: oklch(var(--lch-accent-purple));

        /* Status Colors */
        --danger: oklch(var(--lch-danger));
        --success: oklch(var(--lch-success));
        --warning: oklch(var(--lch-warning));

        /* Admin palette */
        --admin-bg: oklch(var(--lch-admin-bg));
        --admin-surface: oklch(var(--lch-admin-surface));
        --admin-panel: oklch(var(--lch-admin-surface) / 0.7);
        --admin-border: oklch(var(--lch-white) / 0.05);
        --admin-teal: oklch(var(--lch-teal));
        --admin-pink: oklch(var(--lch-admin-pink));
        --admin-yellow: oklch(var(--lch-admin-yellow));
        --admin-text: oklch(var(--lch-white));
        --admin-text-muted: oklch(var(--lch-admin-gray));

        /* Tutorial palette */
        --tutorial-bg: oklch(var(--lch-tutorial-bg));
        --tutorial-surface: oklch(var(--lch-tutorial-surface));
        --tutorial-teal: oklch(var(--lch-tutorial-teal));
        --tutorial-blue: oklch(var(--lch-tutorial-blue));
        --tutorial-pink: oklch(var(--lch-tutorial-pink));
        --tutorial-muted: oklch(var(--lch-tutorial-muted));
        --tutorial-gray-500: oklch(var(--lch-tutorial-gray-500));
        --tutorial-gray-600: oklch(var(--lch-tutorial-gray-600));
        --tutorial-danger: oklch(var(--lch-tutorial-danger));

        /* Add Logo Semantics (for dynamic mode adjustment) */
        --logo-fill: var(--text-main);  /* Default: white in dark mode */

    }

    /* ============================================================================
       LIGHT MODE (Invert for Daytime Viewing)
       ============================================================================ */

    @media (prefers-color-scheme: light) {
        :root {
            /* Invert ocean backgrounds to light grays/whites */
            --lch-ocean-950: 98% 0 0;
            --lch-ocean-900: 95% 0.01 240;
            --lch-ocean-800: 92% 0.02 240;
            --lch-ocean-700: 85% 0.03 240;

            /* Increase teal saturation for visibility on light backgrounds */
            --lch-teal: 65% 0.16 180;

            /* Invert text colors (dark text on light backgrounds) */
            --lch-white: 20% 0.01 240;
            --lch-gray: 50% 0.02 240;

            /* Adjust neon accents to be darker/more saturated */
            --lch-neon-teal: 55% 0.18 175;
            --lch-neon-blue: 45% 0.17 235;
            --lch-neon-pink: 50% 0.24 340;

            /* Level/Category accents for light mode */
            --lch-accent-blue: 52% 0.16 235;
            --lch-accent-yellow: 68% 0.16 85;
            --lch-accent-pink: 52% 0.24 340;
            --lch-accent-purple: 52% 0.17 300;

            /* Status colors for light mode */
            --lch-danger: 52% 0.24 25;
            --lch-success: 55% 0.18 165;
            --lch-warning: 65% 0.16 85;

            /* Admin colors for light mode */
            --lch-admin-bg: 96% 0.01 240;
            --lch-admin-surface: 99% 0 0;
            --lch-admin-pink: 60% 0.20 340;
            --lch-admin-yellow: 70% 0.16 95;
            --lch-admin-gray: 45% 0.02 240;

            /* Tutorial theme light mode */
            --lch-tutorial-bg: 97% 0.01 240;
            --lch-tutorial-surface: 94% 0.02 240;
            --lch-tutorial-teal: 60% 0.14 180;
            --lch-tutorial-blue: 55% 0.08 240;
            --lch-tutorial-pink: 55% 0.21 340;
            --lch-tutorial-muted: 48% 0.02 240;
            --lch-tutorial-gray-500: 42% 0.02 240;
            --lch-tutorial-gray-600: 35% 0.03 240;
            --lch-tutorial-danger: 50% 0.22 25;
        }
    }

    /* ============================================================================
       MANUAL THEME TOGGLE (JavaScript Override)
       ============================================================================ */

    /* Dark Mode - Explicit (when user clicks toggle) */
    :root[data-theme="dark"] {
        --lch-ocean-950: 10% 0.02 240;
        --lch-ocean-900: 15% 0.03 240;
        --lch-ocean-800: 22% 0.04 240;
        --lch-ocean-700: 30% 0.05 240;
        --lch-teal: 78% 0.13 180;
        --lch-white: 98% 0 0;
        --lch-gray: 66% 0.01 240;
        --lch-neon-teal: 88% 0.15 175;
        --lch-neon-blue: 68% 0.14 235;
        --lch-neon-pink: 58% 0.22 340;
        --lch-accent-blue: 72% 0.14 235;
        --lch-accent-yellow: 88% 0.15 95;
        --lch-accent-pink: 62% 0.22 340;
        --lch-accent-purple: 72% 0.15 300;
        --lch-danger: 62% 0.22 25;
        --lch-success: 75% 0.16 165;
        --lch-warning: 82% 0.15 85;
        --lch-admin-bg: 8% 0.02 240;
        --lch-admin-surface: 12% 0.03 240;
        --lch-admin-pink: 70% 0.18 340;
        --lch-admin-yellow: 85% 0.14 95;
        --lch-admin-gray: 48% 0.02 240;
        --lch-tutorial-bg: 14% 0.04 240;
        --lch-tutorial-surface: 18% 0.05 240;
        --lch-tutorial-teal: 72% 0.11 180;
        --lch-tutorial-blue: 35% 0.06 240;
        --lch-tutorial-pink: 62% 0.19 340;
        --lch-tutorial-muted: 62% 0.02 240;
        --lch-tutorial-gray-500: 48% 0.02 240;
        --lch-tutorial-gray-600: 40% 0.03 240;
        --lch-tutorial-danger: 58% 0.20 25;
    }

    /* Light Mode - Explicit (when user clicks toggle) */
    :root[data-theme="light"] {
        --lch-ocean-950: 98% 0 0;
        --lch-ocean-900: 95% 0.01 240;
        --lch-ocean-800: 92% 0.02 240;
        --lch-ocean-700: 85% 0.03 240;
        --lch-teal: 65% 0.16 180;
        --lch-white: 20% 0.01 240;
        --lch-gray: 50% 0.02 240;
        --lch-neon-teal: 55% 0.18 175;
        --lch-neon-blue: 45% 0.17 235;
        --lch-neon-pink: 50% 0.24 340;
        --lch-accent-blue: 52% 0.16 235;
        --lch-accent-yellow: 68% 0.16 85;
        --lch-accent-pink: 52% 0.24 340;
        --lch-accent-purple: 52% 0.17 300;
        --lch-danger: 52% 0.24 25;
        --lch-success: 55% 0.18 165;
        --lch-warning: 65% 0.16 85;
        --lch-admin-bg: 96% 0.01 240;
        --lch-admin-surface: 99% 0 0;
        --lch-admin-pink: 60% 0.20 340;
        --lch-admin-yellow: 70% 0.16 95;
        --lch-admin-gray: 45% 0.02 240;
        --lch-tutorial-bg: 97% 0.01 240;
        --lch-tutorial-surface: 94% 0.02 240;
        --lch-tutorial-teal: 60% 0.14 180;
        --lch-tutorial-blue: 55% 0.08 240;
        --lch-tutorial-pink: 55% 0.21 340;
        --lch-tutorial-muted: 48% 0.02 240;
        --lch-tutorial-gray-500: 42% 0.02 240;
        --lch-tutorial-gray-600: 35% 0.03 240;
        --lch-tutorial-danger: 50% 0.22 25;
    }

    /* Tutorial / quiz theme (tutorials, quiz player, quiz builder) */
    .tutorial-theme {
        --bg-main: oklch(var(--lch-tutorial-bg));
        --bg-surface: oklch(var(--lch-tutorial-surface));
        --text-main: oklch(100% 0 0);
        --text-muted: oklch(var(--lch-tutorial-muted));
        --accent-primary: oklch(var(--lch-tutorial-teal));
        --accent-secondary: oklch(var(--lch-tutorial-blue));
        --accent-pink: oklch(var(--lch-tutorial-pink));
        --border-color: oklch(100% 0 0 / 0.1);
        --gray-500: oklch(var(--lch-tutorial-gray-500));
        --gray-600: oklch(var(--lch-tutorial-gray-600));
        --danger: oklch(var(--lch-tutorial-danger));
        --sidebar-width: 20rem;
    }

} /* End @layer base */

/* ============================================================================
   TIER 3: DYNAMIC UTILITIES (color-mix)
   ============================================================================ */

@layer utilities {
    /* Background Tints */
    .bg-teal-5 { background-color: color-mix(in srgb, var(--accent-primary) 5%, transparent); }
    .bg-teal-10 { background-color: color-mix(in srgb, var(--accent-primary) 10%, transparent); }
    .bg-teal-20 { background-color: color-mix(in srgb, var(--accent-primary) 20%, transparent); }

    /* Border Tints */
    .border-teal-20 { border-color: color-mix(in srgb, var(--accent-primary) 20%, transparent); }
    .border-teal-30 { border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent); }

    /* Text Colors */
    .text-teal { color: var(--accent-primary); }
    .text-muted { color: var(--text-muted); }

    /* Hover Glow */
    .glow-teal:hover {
        box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent);
    }
}

/* ============================================================================
   COMPONENTS (Reusable Patterns)
   ============================================================================ */

@layer components {
    /* Card System */
    .card {
        background-color: var(--bg-card);
        border: 1px solid color-mix(in srgb, var(--text-main) 5%, transparent);
        border-radius: 1rem;
        transition: all 0.3s ease;
    }

    .card:hover {
        border-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
        box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-primary) 10%, transparent);
        transform: translateY(-2px);
    }

    /* Button System */
    .btn-primary {
        background-color: var(--accent-primary);
        color: var(--bg-main);
        border: 1px solid var(--accent-primary);
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .btn-primary:hover {
        box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 40%, transparent);
        transform: translateY(-1px);
    }

    .btn-secondary {
        background-color: color-mix(in srgb, var(--accent-primary) 8%, transparent);
        color: var(--text-main);
        border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        font-weight: 600;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .btn-secondary:hover {
        background-color: color-mix(in srgb, var(--accent-primary) 15%, transparent);
        border-color: color-mix(in srgb, var(--accent-primary) 40%, transparent);
    }

    /* Badge System */
    .badge {
        padding: 0.25rem 0.75rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .badge-teal {
        background-color: color-mix(in srgb, var(--accent-primary) 10%, transparent);
        color: var(--accent-primary);
        border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
    }

    .badge-admin {
        background-color: color-mix(in srgb, var(--admin-yellow) 10%, transparent);
        color: var(--admin-yellow);
        border: 1px solid color-mix(in srgb, var(--admin-yellow) 25%, transparent);
    }

    /* Icon System (Auto-Switch Black/White) */
    .icon-mask {
        background-color: currentColor;
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
    }

    /* Focus States */
    :focus-visible {
        outline: 2px solid var(--accent-primary);
        outline-offset: 2px;
        border-radius: 0.25rem;
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 15%, transparent);
    }

    /* Selection Highlight */
    ::selection {
        background-color: color-mix(in srgb, var(--accent-primary) 30%, transparent);
        color: var(--text-main);
    }

}