:root {
    /* Colors */
    --primary: #98AB3F;
    --primary-light: #EAEED9;
    --secondary: #A50B18;
    --background-color: #FFFFFF;
    --light-gray: #F8F8F8;
    --dark-gray: #8F8F8F;
    --yellow: #F3A208;
    --black: #000;
    --white: #FFF;
    --white-5: #ffffff0d;
    --white-20: #ffffff33;
    --white-60: #ffffff99;

    --gradient: linear-gradient(90deg, #F1F5DA 0%, #FDE2C4 100%);

    /* Borders */
    --border-radius: 16px;
    --border-color: #D8D8D8;
    --border-width: 1px;
    --border-style: solid;
    --border: var(--border-width) var(--border-style) var(--border-color);

    /* Dimensions */
    --section-gap: 64px;
    --page-padding: 256px;

    /* Animations */
    --transition-property: all;
    --transition-duration: .1s;
    --transition-timing-function: ease-in-out;
    --transition: var(--transition-property) var(--transition-duration) var(--transition-timing-function);

    /* Typography */
    --global-font-family: 'Rubik', sans-serif;
    --text-color: #333333;
    --text-size: 16px;
    --text-line-height: 22px;

    --secondary-text-color: #555555;
    --secondary-text-size: 12px;
    --secondary-text-line-height: 16px;

    --sm-title-size: 22px;
    --sm-title-line-height: 30px;

    --title-size: 36px;
    --title-line-height: 48px;
}

@media only screen and (max-width: 1800px) {
    :root {
        --page-padding: 128px;
    }
}

@media only screen and (max-width: 1600px) {
    :root {
        --page-padding: 80px;
    }
}

@media only screen and (max-width: 1200px) {
    :root {
        --page-padding: 48px;
    }
}

@media only screen and (max-width: 767px) {
    :root {
        --page-padding: 32px;
    }
}

@media only screen and (max-width: 600px) {
    :root {
        --page-padding: 24px;

        --sm-title-size: 18px;
        --sm-title-line-height: 22px;
    
        --title-size: 24px;
        --title-line-height: 36px;
    }
}