:root {

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

    --color-primary: #2563EB;
    --color-primary-hover: #1D4ED8;

    --color-success: #22C55E;
    --color-danger: #EF4444;
    --color-warning: #F59E0B;

    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;

    --color-text: #111827;
    --color-text-light: #6B7280;

    --color-border: #E5E7EB;

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

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* ===========
       SHADOW
    =========== */

    --shadow-sm: 0 2px 6px rgba(15, 23, 42, .05);

    --shadow-md: 0 10px 30px rgba(15, 23, 42, .08);

    --shadow-lg: 0 20px 50px rgba(15, 23, 42, .12);

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

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

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

    --container-width: 1200px;

    /* ===========
       TRANSITION
    =========== */

    --transition: .25s ease;

}