:root {
    /* ========================================
       COLORS
    ======================================== */

    --color-black: #111111;
    --color-white: #ffffff;
    --color-orange: #ff7900;

    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-500: #737373;


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

    --font-primary:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --font-size-body: 18px;
    --line-height-body: 1.5;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;


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

    --container-width: 1400px;

    --container-padding-desktop: 40px;
    --container-padding-mobile: 20px;


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

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;


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

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;


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

    --transition-fast: 180ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;


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

    --z-base: 1;
    --z-header: 100;
    --z-overlay: 200;
    --z-modal: 300;

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

:root {
    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;

    --heading-sm: clamp(2rem, 3vw, 3rem);
    --heading-md: clamp(2.75rem, 4.5vw, 4.5rem);
    --heading-lg: clamp(3.5rem, 6vw, 6.5rem);
    --display: clamp(4rem, 8vw, 8.5rem);
}

}

/* ========================================
   LOCAL FONT — INTER
======================================== */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}