:root {

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

    --color-bg: #08090d;
    --color-bg-secondary: #0d0f15;
    --color-surface: #11141c;
    --color-surface-light: #171b25;

    --color-white: #ffffff;
    --color-text: #f5f7fa;
    --color-text-secondary: #a7adb8;
    --color-text-muted: #6f7683;

    --color-primary: #8b5cf6;
    --color-primary-light: #a78bfa;
    --color-accent: #22d3ee;

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


    /* =========================
       TYPOGRAPHY
    ========================== */

    --font-heading: "Manrope", sans-serif;
    --font-body: "DM Sans", sans-serif;


    /* =========================
       CONTAINER
    ========================== */

    --container-width: 1280px;
    --container-padding: clamp(20px, 4vw, 60px);


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

    --section-space: clamp(80px, 10vw, 150px);

    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 80px;


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

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;


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

    --transition-fast: 180ms ease;
    --transition-normal: 350ms cubic-bezier(.22,1,.36,1);
    --transition-smooth: 600ms cubic-bezier(.22,1,.36,1);


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

    --shadow-soft:
        0 10px 40px rgba(0,0,0,0.18);

    --shadow-premium:
        0 20px 80px rgba(0,0,0,0.35);


    /* =========================
       Z-INDEX
    ========================== */

    --z-background: -10;
    --z-content: 1;
    --z-header: 1000;
    --z-floating: 1500;
    --z-loader: 9999;
}