:root {
    /* ------------------------------------------------------------------ */
    /* Color palette                                                      */
    /* Refined from the original neon set: slightly desaturated cyan /    */
    /* indigo / violet so the surface reads "premium dark" rather than    */
    /* "neon". Each accent has a 3-step scale for hover / active states.  */
    /* ------------------------------------------------------------------ */
    --primary-color: #4fc3f7;
    --primary-color-light: #81d4fa;
    --primary-400: #6fd0fb;
    --primary-500: #4fc3f7;
    --primary-600: #2aa7e6;

    --secondary-color: #667eea;
    --secondary-400: #889aef;
    --secondary-500: #667eea;
    --secondary-600: #4f63d8;

    --tertiary-color: #764ba2;
    --tertiary-400: #8e63bd;
    --tertiary-500: #764ba2;
    --tertiary-600: #5d3784;

    /* Unified accent gradient + glow reused everywhere */
    --accent-gradient: linear-gradient(120deg, var(--primary-500) 0%, var(--secondary-500) 50%, var(--tertiary-500) 100%);
    --accent-gradient-text: linear-gradient(135deg, var(--primary-500) 0%, var(--secondary-500) 60%, var(--tertiary-400) 100%);
    --accent-glow: rgba(79, 195, 247, 0.35);
    --accent-glow-soft: rgba(118, 75, 162, 0.22);
    --accent-glow-ring: 0 0 0 1px rgba(79, 195, 247, 0.45), 0 0 18px -2px rgba(79, 195, 247, 0.45);

    /* Surfaces / glass */
    --background-color: #000000;
    --glass-background: rgba(6, 4, 14, 0.34);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-border-strong: rgba(255, 255, 255, 0.20);
    --glass-shadow: rgba(31, 38, 135, 0.36);

    --surface-raised: rgba(255, 255, 255, 0.045);
    --surface-raised-hover: rgba(255, 255, 255, 0.075);
    --surface-divider: rgba(255, 255, 255, 0.08);

    /* Text */
    --text-color: #ffffff;
    --text-color-light: rgba(255, 255, 255, 0.82);
    --text-color-mid: rgba(255, 255, 255, 0.62);
    --text-color-dark: rgba(255, 255, 255, 0.52);

    /* Buttons */
    --button-gradient: linear-gradient(120deg, rgba(30, 10, 50, 0.45), rgba(10, 12, 36, 0.36));
    --button-hover-gradient: linear-gradient(120deg, rgba(40, 16, 66, 0.7), rgba(12, 14, 44, 0.5));

    /* ------------------------------------------------------------------ */
    /* Typography                                                         */
    /* ------------------------------------------------------------------ */
    --font-family: "Lexend", sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", "Cascadia Mono", ui-monospace, monospace;

    --text-xs: clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem);
    --text-sm: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
    --text-base: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
    --text-md: clamp(1.05rem, 1rem + 0.2vw, 1.2rem);
    --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-xl: clamp(1.6rem, 1.3rem + 1.5vw, 2rem);
    --text-2xl: clamp(2rem, 1.6rem + 2.2vw, 2.8rem);
    --text-3xl: clamp(2.4rem, 1.9rem + 2.8vw, 3.2rem);

    /* ------------------------------------------------------------------ */
    /* Spacing scale                                                      */
    /* ------------------------------------------------------------------ */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.75rem;
    --space-3xl: 3.5rem;

    /* ------------------------------------------------------------------ */
    /* Radii                                                              */
    /* ------------------------------------------------------------------ */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --border-radius: var(--radius-lg);
    --border-radius-large: var(--radius-xl);

    /* ------------------------------------------------------------------ */
    /* Shadow tiers                                                       */
    /* ------------------------------------------------------------------ */
    --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px -6px var(--glass-shadow);
    --shadow-lg: 0 18px 48px -12px rgba(0, 0, 0, 0.55), 0 4px 16px -4px rgba(0, 0, 0, 0.35);
    --inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --shadow-glow-accent: 0 8px 24px -6px var(--accent-glow), 0 0 0 1px rgba(79, 195, 247, 0.18);

    /* Semi-transparent helpers for animated shadows */
    --primary-color-16: rgba(79, 195, 247, 0.16);
    --tertiary-color-20: rgba(118, 75, 162, 0.2);
    --dark-shadow-15: rgba(0, 0, 0, 0.15);
    --dark-shadow-18: rgba(0, 0, 0, 0.18);
    --dark-shadow-20: rgba(0, 0, 0, 0.20);

    /* ------------------------------------------------------------------ */
    /* Motion                                                             */
    /* ------------------------------------------------------------------ */
    --dur-fast: 0.18s;
    --dur-med: 0.3s;
    --dur-slow: 0.55s;
    --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}