:root {

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

    --color-background: #080a0f;
    --color-background-soft: #0b0e14;
    --color-background-elevated: #0f131b;

    --color-surface: #11151e;
    --color-surface-secondary: #161b26;
    --color-surface-hover: #1b2230;

    --color-primary: #7c5cff;
    --color-primary-hover: #8b73ff;
    --color-primary-active: #6b4af0;

    --color-primary-soft: rgba(124, 92, 255, 0.12);
    --color-primary-border: rgba(124, 92, 255, 0.28);

    --color-text: #f7f8fb;
    --color-text-secondary: #a5adbb;
    --color-text-muted: #717b8c;

    --color-success: #3ed6a0;
    --color-warning: #f5b94c;
    --color-danger: #ef626c;
    --color-info: #4da8ff;

    --color-border: rgba(255, 255, 255, 0.075);
    --color-border-hover: rgba(255, 255, 255, 0.15);


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

    --gradient-primary:
        linear-gradient(
            135deg,
            #a18aff 0%,
            #7c5cff 48%,
            #4fb8ff 100%
        );

    --gradient-background:
        radial-gradient(
            circle at 50% -10%,
            rgba(124, 92, 255, 0.13),
            transparent 42%
        );


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

    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;
    --spacing-24: 96px;


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

    --radius-xs: 6px;
    --radius-sm: 9px;
    --radius-md: 13px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-pill: 999px;


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

    --shadow-small:
        0 5px 20px rgba(0, 0, 0, 0.15);

    --shadow-medium:
        0 20px 60px rgba(0, 0, 0, 0.25);

    --shadow-large:
        0 35px 100px rgba(0, 0, 0, 0.38);


    /* =====================================================
       LAYOUT
       ===================================================== */

    --container-width: 1200px;
    --header-height: 72px;


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

    --transition-fast:
        140ms cubic-bezier(.2, .8, .2, 1);

    --transition-normal:
        220ms cubic-bezier(.2, .8, .2, 1);

}