:root{

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

    --white:#ffffff;
    --black:#000000;

    --background:#f5f5f7;

    --surface:#ffffff;

    --border:#d2d2d7;

    --text:#1d1d1f;

    --text-secondary:#6e6e73;

    --primary:#ef7d00;

    --primary-hover:#d86f00;

    --success:#34c759;



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

    --font-family:
        Inter,
        SF Pro Display,
        Helvetica,
        Arial,
        sans-serif;

    --fs-xs:12px;

    --fs-sm:14px;

    --fs-md:17px;

    --fs-lg:21px;

    --fs-xl:28px;

    --fs-2xl:42px;

    --fs-3xl:64px;



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

    --space-1:8px;

    --space-2:12px;

    --space-3:16px;

    --space-4:24px;

    --space-5:32px;

    --space-6:48px;

    --space-7:72px;

    --space-8:96px;



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

    --radius-sm:10px;

    --radius-md:16px;

    --radius-lg:22px;

    --radius-xl:30px;



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

    --shadow-small:

        0 4px 14px rgba(0,0,0,.06);

    --shadow-medium:

        0 12px 32px rgba(0,0,0,.08);

    --shadow-large:

        0 20px 50px rgba(0,0,0,.12);



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

    --transition:

        .28s cubic-bezier(.4,0,.2,1);




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

    --container:1280px;

}