:root {
    /* --- Base Palette — Vibrant Education Theme --- */
    --p-h: 45;
    /* Primary Gold */
    --s-h: 330;
    /* Secondary Pink */
    --a-h: 174;
    /* Success Teal */

    --primary: #F9CA24;
    --primary-hover: #F39C12;
    --primary-dark: #E67E22;
    --accent-teacher: #F39C12;
    --accent-student: #00CEC9;
    --accent-dynamic: #F9CA24;
    --danger: #E74C3C;

    /* Transitions */
    --tr-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --tr-smooth: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    --tr-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Spacing — Sharper, more professional */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;

    /* --- Layering (Z-Index Reference) --- */
    --z-negative: -1;
    --z-base: 0;
    --z-canvas: 1;
    --z-panel: 500;
    --z-floating: 1000;
    /* Small floating elements */
    --z-ui-controls: 5000;
    /* On-canvas buttons */
    --z-nav: 10000;
    /* Main sidebars */
    --z-toolbar: 20000;
    /* Bottom bars / Floating bars */
    --z-bulk-bar: 50000;
    /* Library multi-select toolbar */
    --z-overlay: 100000;
    /* UI Overlays */
    --z-modal: 200000;
    /* Standard app modals */
    --z-context-menu: 500000;
    /* Right click menus */

    /* Splash / System Layers (Above the main app) */
    --z-landing: 10000000;
    /* Landing / Welcome Page */
    --z-auth: 20000000;
    /* Login / Register / Join Modals */
    --z-loader: 30000000;
    /* Full screen loader */
    --z-dialog: 2147483646;
    /* System confirm/alert — MUST be above all custom modals */
    --z-notification: 2147483647;
    /* Toast notifications — highest, above everything */
    --z-max: 99999999;
    /* Absolute top layer */

    --z-dropdown: 1000;
    /* Default dropdown z-index */
}

/* DARK THEME (Default) — Deep Navy Education */
[data-theme="dark"],
:root:not([data-theme="light"]) {
    --bg-app: #2C3E50;
    --bg-surface: rgba(36, 55, 75, 0.88);
    --bg-surface-solid: #2C3E50;
    --bg-item: rgba(52, 73, 94, 0.5);
    --bg-item-hover: rgba(52, 73, 94, 0.8);

    --text-main: #ECF0F1;
    --text-muted: #95A5A6;
    --text-on-accent: #2C3E50;

    --border-glass: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.15);

    --shadow-main: 0 10px 40px rgba(0, 0, 0, 0.35);
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
    --shadow-paper: 0 15px 45px rgba(0, 0, 0, 0.55);

    --glass-blur: 20px;
    --workspace-bg: #1a2634;

    /* Dotted grid on workspace behind canvas */
    --dot-color: rgba(255, 255, 255, 0.08);
    --dot-size: 1.5px;
    --dot-spacing: 28px;

    /* Canvas shadow */
    --canvas-shadow: var(--shadow-paper);
}

/* LIGHT THEME — Warm Education palette */
[data-theme="light"] {
    /* App shell — soft warm grey */
    --bg-app: #E8ECEF;

    /* Surfaces — warm, clean */
    --bg-surface: rgba(245, 247, 250, 0.94);
    --bg-surface-solid: #F0F3F7;

    /* Cards / items */
    --bg-item: rgba(220, 228, 238, 0.80);
    --bg-item-hover: rgba(205, 215, 230, 0.98);

    /* Typography */
    --text-main: #2C3E50;
    --text-muted: #7F8C8D;
    --text-on-accent: #2C3E50;

    /* Borders */
    --border-glass: rgba(44, 62, 80, 0.1);
    --border-strong: rgba(44, 62, 80, 0.2);

    /* Shadows */
    --shadow-main: 0 8px 32px rgba(44, 62, 80, 0.1);
    --shadow-glass: 0 4px 20px rgba(44, 62, 80, 0.08);
    --shadow-paper: 0 14px 44px rgba(44, 62, 80, 0.12);

    /* Glassmorphism blur */
    --glass-blur: 20px;

    /* Canvas workspace */
    --workspace-bg: #D5DDE5;

    /* Dotted grid on workspace behind canvas */
    --dot-color: rgba(44, 62, 80, 0.12);
    --dot-size: 1.5px;
    --dot-spacing: 28px;

    /* Canvas shadow — elevated "paper on desk" look */
    --canvas-shadow: 0 8px 40px rgba(44, 62, 80, 0.18), 0 2px 12px rgba(44, 62, 80, 0.10);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    /* App-like feel */
}

body {
    font-family: 'Outfit', 'Inter', sans-serif;
    /* Modern, geometric sans */
    background-color: var(--bg-app);
    color: var(--text-main);
    overflow: hidden;
    /* Prevent scrolling */
    height: 100vh;
    width: 100vw;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
    border: 1px solid var(--border-glass);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}