* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --text-dark: #000000;
    --text-light: #ffffff;
    --color-primary: #ff6e2c;
    --color-light: #ffffff;
    --bg-primary: #ff6e2c;
    --bg-light: #ffffff;
    --bg-dark: #1a1a1a;
    --color-error: #ff4d4f;
    --color-disabled: #555555;
}


:root {
    --font-family-h1: "Inter-Tight", -apple-system, sans-serif;
    --font-family-h2: "Inter-Tight", -apple-system, sans-serif;
    --font-family-h3: "OpenSans", -apple-system, sans-serif;
    --font-family-h4: "OpenSans", -apple-system, sans-serif;
    --font-family-body: "OpenSans", -apple-system, sans-serif;
    --font-family-base: "Inter-Tight", -apple-system, sans-serif;
    --font-family-button: "OpenSans", -apple-system, sans-serif;
    --font-family-li: "OpenSans", -apple-system, sans-serif;
    --font-family-span: "OpenSans", -apple-system, sans-serif;
}

:root {
    --h1-size: 32px;
    --h2-size: 28px;
    --h3-size: 20px;
    --h4-size: 16px;
    --body-size: 14px;
    --subtitle-size: 12px;
}

@media (min-width: 768px) {
    :root {
        --h1-size: 36px;
        --h2-size: 36px;
        --h3-size: 20px;
        --h4-size: 20px;
        --body-size: 16px;
        --subtitle-size: 14px;
    }
}

@media (min-width: 1280px) {
    :root {
        --h1-size: 48px;
        --h2-size: 40px;
        --h3-size: 24px;
        --h4-size: 22px;
        --body-size: 16px;
    }
}

@media (min-width: 1920px) {
    :root {
        --h1-size: 54px;
        --h2-size: 48px;
        --h3-size: 23px;
        --h4-size: 20px;
        --body-size: 16px;
    }
}