:root {
    /* Core Colors */
    --bg-color: #121212;
    --bg-gradient: linear-gradient(135deg, #0f0f13 0%, #1a1a2e 100%);
    --surface-color: #1e1e1e;
    --surface-hover: #2c2c2c;
    --surface-elevated: #262640;

    /* Glass Theme */
    --glass-bg: rgba(30, 30, 30, 0.65);
    --glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    --glass-blur: blur(12px);

    /* Brand Palette */
    --brand-purple: #7c4dff;
    --brand-purple-hover: #9e75ff;
    --brand-purple-subtle: rgba(124, 77, 255, 0.12);
    --accent-teal: #03dac6;
    --accent-teal-subtle: rgba(3, 218, 198, 0.12);
    --error-red: #cf6679;
    --error-red-subtle: rgba(207, 102, 121, 0.12);
    --warning-orange: #ff9800;
    --warning-orange-subtle: rgba(255, 152, 0, 0.12);
    --card-blue: #3B82F6;
    --card-green: #10B981;
    --card-slate: #64748B;

    /* Typography */
    --text-primary: #f3f3f3;
    --text-secondary: #a0a0a0;
    --text-tertiary: #6b6b6b;
    --font-family: 'Inter', Arial, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;

    /* Auth / Form Legacy Aliases */
    --card-bg: var(--glass-bg);
    --text-main: var(--text-primary);
    --text-muted: var(--text-secondary);
    --input-bg: rgba(0, 0, 0, 0.2);
    --input-border: rgba(255, 255, 255, 0.1);
    --danger: var(--error-red);
    --primary: var(--brand-purple);
    --primary-hover: var(--brand-purple-hover);

    /* Spacing (4px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s;
    --transition-base: 0.2s;
    --transition-slow: 0.3s;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.25);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.4);
    --shadow-glow-purple: 0 4px 15px rgba(124, 77, 255, 0.3);
    --shadow-glow-purple-lg: 0 8px 32px rgba(124, 77, 255, 0.25);
    --shadow-glow-teal: 0 4px 12px rgba(3, 218, 198, 0.15);
}

*, *::before, *::after {
    box-sizing: border-box;
}

:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: 2px;
}

::selection {
    background: rgba(124, 77, 255, 0.35);
    color: #fff;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}