:root {

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

    --color-background: #09090b;
    --color-surface: #101114;
    --color-surface-light: #17181d;
    --color-surface-hover: #1d1f25;

    --color-border: rgba(255,255,255,.07);
    --color-border-light: rgba(255,255,255,.10);

    --color-white: #ffffff;
    --color-text: #f5f5f7;
    --color-text-secondary: #b5b8c2;
    --color-text-muted: #7b808c;

    --color-primary: #f5a524;
    --color-primary-hover: #ffb740;
    --color-primary-light: rgba(245,165,36,.15);

    --color-success: #16c784;
    --color-danger: #ef4444;

    /* ===========================
       GRADIENTS
    =========================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #f5a524 0%,
            #ffcb52 100%
        );

    --gradient-dark:
        linear-gradient(
            180deg,
            #0b0b0d,
            #09090b
        );

    --gradient-glow:
        radial-gradient(
            circle,
            rgba(245,165,36,.18),
            transparent 70%
        );

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

    --font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        sans-serif;

    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.35rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    --font-size-4xl: 4.5rem;

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

    --space-4:4px;
    --space-8:8px;
    --space-12:12px;
    --space-16:16px;
    --space-20:20px;
    --space-24:24px;
    --space-32:32px;
    --space-40:40px;
    --space-48:48px;
    --space-64:64px;
    --space-80:80px;
    --space-96:96px;
    --space-120:120px;

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

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:18px;
    --radius-xl:24px;

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

    --shadow-xs:
        0 2px 6px rgba(0,0,0,.15);

    --shadow-sm:
        0 10px 30px rgba(0,0,0,.25);

    --shadow-md:
        0 20px 60px rgba(0,0,0,.35);

    --shadow-xl:
        0 40px 120px rgba(0,0,0,.45);

    --shadow-glow:
        0 0 80px rgba(245,165,36,.18);

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

    --container:1320px;

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

    --transition-fast:.18s ease;

    --transition:
        .30s cubic-bezier(.4,0,.2,1);

    --transition-slow:
        .6s cubic-bezier(.16,1,.3,1);

}