/* CSS Variables - Design Tokens */
:root {
    /* Color Palette */
    --primary-hue: 260;
    --primary-rgb: 124, 58, 237;
    --secondary-hue: 320;

    /* Background Colors */
    --bg-dark: hsl(240, 20%, 8%);
    --bg-darker: hsl(240, 25%, 5%);

    /* Text Colors */
    --text-light: hsl(0, 0%, 95%);
    --text-muted: hsl(0, 0%, 70%);

    /* Accent Colors */
    --accent-1: hsl(var(--primary-hue), 85%, 65%);
    --accent-2: hsl(var(--secondary-hue), 80%, 60%);

    /* Glass Morphism */
    --glass-bg: hsla(0, 0%, 100%, 0.05);
    --glass-border: hsla(0, 0%, 100%, 0.1);

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.4);

    /* Z-index layers — order: background < normal < header/sidebar < modal */
    --z-background: -1;
    --z-normal: 1;
    --z-header: 3000;
    --z-modal: 4000;

    /* Layout Tokens */
    --container-width-full: 100%;
    --container-width-form: 85%;
    --grid-gap-standard: var(--spacing-lg);

    /* Sidebar & Main Content Widths */
    --sidebar-width: 280px;
    --main-content-width: calc(100% - var(--sidebar-width));
}