/* ===========================================
   DESIGN TOKENS
=========================================== */

:root{

    /* Colors */

    --primary:#2563EB;
    --primary-dark:#1D4ED8;
    --secondary:#0F172A;

    --background:#F8FAFC;
    --surface:#FFFFFF;

    --text:#334155;
    --text-light:#64748B;

    --border:#E2E8F0;

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

    /* Typography */

    --font-main:'Inter',sans-serif;

    /* Spacing */

    --space-xs:.5rem;
    --space-sm:1rem;
    --space-md:2rem;
    --space-lg:4rem;
    --space-xl:7rem;

    /* Radius */

    --radius-sm:8px;
    --radius-md:14px;
    --radius-lg:24px;

    /* Shadows */

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

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

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

    /* Animation */

    --transition:.3s ease;
}