/* =========================================================
|--------------------------------------------------------------------------
| DESIGN SYSTEM
|--------------------------------------------------------------------------
========================================================= */

:root
{
    /* =====================================================
    SITE
    ===================================================== */

    --site-background:
    #1e1a1a;


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

    --color-primary:
    #1d2c49;

    --color-secondary:
    #a1a928;

    --color-accent:
    #111522;

    --color-accent-hover:
    #05060b;

    --color-success:
    #3167a0;

    --color-danger:
    #dc2626;

    --color-warning:
    #f59e0b;

    --color-white:
    #130606;

    --color-light:
    #04080b;

    --color-gray-100:
    #05080a;

    --color-gray-200:
    #e2e8f0;

    --color-gray-300:
    #cbd5e1;

    --color-gray-400:
    #94a3b8;

    --color-gray-500:
    #64748b;

    --color-gray-600:
    #475569;

    --color-gray-700:
    #334155;

    --color-gray-800:
    #1e293b;

    --color-gray-900:
    #0f172a;

    --color-dark:
    #0b0507;


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

    --font-primary:
    'Poppins', sans-serif;

    --font-size-xs: 12px;

    --font-size-sm: 14px;

    --font-size-md: 16px;

    --font-size-lg: 18px;

    --font-size-xl: 22px;

    --font-size-2xl: 32px;

    --font-size-3xl: 48px;

    --font-size-4xl: 64px;

    --font-weight-light: 300;

    --font-weight-regular: 400;

    --font-weight-medium: 500;

    --font-weight-semibold: 600;

    --font-weight-bold: 700;


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

    --spacing-xs: 4px;

    --spacing-sm: 8px;

    --spacing-md: 16px;

    --spacing-lg: 24px;

    --spacing-xl: 40px;

    --spacing-2xl: 64px;

    --spacing-3xl: 96px;


    /* =====================================================
    CONTAINERS
    ===================================================== */

    --container-width: 1280px;

    --container-padding: 20px;


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

    --radius-sm: 6px;

    --radius-md: 12px;

    --radius-lg: 18px;

    --radius-xl: 24px;

    --radius-full: 999px;


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

    --shadow-sm: 0 2px 8px rgba(0,0,0,.08);

    --shadow-md: 0 8px 24px rgba(0,0,0,.12);

    --shadow-lg: 0 18px 40px rgba(0,0,0,.18);


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

    --transition-fast: .2s ease;

    --transition-normal: .3s ease;

    --transition-slow: .5s ease;


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

    --z-dropdown: 1000;

    --z-fixed: 1100;

    --z-modal: 1200;

    --z-loader: 9999;
}