:root{

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

    --primary:#0F172A;
    --primary-light:#1E293B;

    --secondary:#2563EB;
    --secondary-hover:#1D4ED8;

    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;

    --white:#FFFFFF;
    --black:#000000;

    --background:#F5F7FA;
    --surface:#FFFFFF;

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

    --border:#E5E7EB;

    --shadow:
        0 15px 35px rgba(0,0,0,.08);

    --shadow-hover:
        0 20px 45px rgba(0,0,0,.12);

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

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:30px;
    --radius-full:999px;

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

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-7:32px;
    --space-8:40px;
    --space-9:48px;
    --space-10:64px;
    --space-11:80px;
    --space-12:100px;

    /* ========= FONT ========= */

    --font-family:
    Tahoma,
    sans-serif;

    --fs-12:12px;
    --fs-13:13px;
    --fs-14:14px;
    --fs-15:15px;
    --fs-16:16px;
    --fs-18:18px;
    --fs-20:20px;
    --fs-24:24px;
    --fs-28:28px;
    --fs-32:32px;
    --fs-40:40px;
    --fs-48:48px;

    --fw-300:300;
    --fw-400:400;
    --fw-500:500;
    --fw-600:600;
    --fw-700:700;
    --fw-800:800;

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

    --container:1300px;

    /* ========= HEADER ========= */

    --header-height:80px;

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

    --transition-fast:.2s ease;

    --transition:
    .35s ease;

    --transition-slow:
    .5s ease;

}