:root {

    /* =========================
       COLORS
    ========================== */

    --color-background: #0D0D0D;
    --color-surface: #181A24;
    --color-surface-light: #222533;

    --color-primary: #7B2FF7;
    --color-secondary: #FF2D75;
    --color-accent: #00B4FF;

    --gradient-primary: linear-gradient(
        135deg,
        #7B2FF7 0%,
        #FF2D75 50%,
        #00B4FF 100%
    );

    /* =========================
       TEXT
    ========================== */

    --text-primary: #E8ECF3;
    --text-secondary: #B8C2D1;
    --text-muted: #8D98AA;

    /* =========================
       BORDER
    ========================== */

    --border-color: rgba(255,255,255,0.08);

    /* =========================
       GLASS EFFECT
    ========================== */

    --glass-background: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.10);
    --glass-blur: 18px;

    /* =========================
       SHADOWS
    ========================== */

    --shadow-small: 0 4px 12px rgba(0,0,0,.20);
    --shadow-medium: 0 8px 20px rgba(0,0,0,.30);
    --shadow-large: 0 16px 40px rgba(0,0,0,.45);

    /* =========================
       BORDER RADIUS
    ========================== */

    --radius-small: 12px;
    --radius-medium: 18px;
    --radius-large: 28px;
    --radius-circle: 999px;

    /* =========================
       SPACING
    ========================== */

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* =========================
       FONT
    ========================== */

    --font-family: "Inter", sans-serif;

    --font-xs: .75rem;
    --font-sm: .875rem;
    --font-md: 1rem;
    --font-lg: 1.25rem;
    --font-xl: 1.75rem;
    --font-xxl: 2.5rem;

    /* =========================
       TRANSITIONS
    ========================== */

    --transition-fast: .2s ease;
    --transition-normal: .35s ease;
    --transition-slow: .6s ease;

}