/*** FONTS ***/


@font-face {
    font-family: "Baloo 2";
    src: url("../assets/fonts/Baloo2.woff2") format("woff2-variations");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../assets/fonts/SchibstedGrotesk.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Schibsted Grotesk";
    src: url("../assets/fonts/SchibstedGrotesk-Italic.woff2") format("woff2-variations");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}



:root {
    /*** BASE COLORS ***/


    --light-green: #95C143;
    --dark-green: #155A2C;
    --teal: #00AB8E;

    --orange: #E4572E;

    --paper: #F6F4EC;

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

    --lines: #EEEADB;



    /*** THEME COLORS ***/
    --prim-color: var(--dark-green);
    --prim-color-darker: color-mix(in srgb, var(--prim-color) 92%, black);
    --prim-color-lighter: color-mix(in srgb, var(--prim-color) 90%, white);

    --sec-color: var(--teal);
    --sec-color-darker: color-mix(in srgb, var(--sec-color) 95%, black);
    --sec-color-lighter: color-mix(in srgb, var(--sec-color) 90%, white);

    --tert-color: var(--light-green);
    --tert-color-darker: color-mix(in srgb, var(--tert-color) 95%, black);
    --tert-color-lighter: color-mix(in srgb, var(--tert-color) 90%, white);

    --focus-color: var(--orange);
    --focus-color-darker: color-mix(in srgb, var(--focus-color) 95%, black);
    --focus-color-lighter: color-mix(in srgb, var(--focus-color) 90%, white);

    --buttons-color: var(--orange);
    --buttons-background-color: var(--buttons-color);
    --buttons-text-color: var(--white);
    --buttons-color-darker: color-mix(in srgb, var(--buttons-background-color) 95%, black);
    --buttons-color-lighter: color-mix(in srgb, var(--buttons-background-color) 90%, white);

    --headings-color: var(--dark-green);
    --subheadings-color: var(--dark-green);

    --text-color: var(--black);
    --text-color-light: var(--gray);

    --line-color: var(--lines);
    --divider-color: var(--lines);
    --dark-line-color: #47803C;

    --border-color: var(--lines);

    --background-color: var(--paper);
    --background-color-light: var(--white);
    --background-color-alternate: var(--prim-color);
    --background-color-focus: var(--focus-color);


    --box-background-color: var(--background-color-light);
    --card-background-color: var(--background-color-light);
    --submenu-background-color: var(--white);

    --form-background-color: var(--white);
    --field-background-color: var(--paper);
    --field-line-color: var(--line-color);

    --selection-font-color: var(--white);
    --selection-color: var(--dark-green);



    /*** SIZE SPECIFICATIONS ***/

    --border-radius: 50px;
    --border-width: 2px;

    --box-padding: 50px;
    --content-section-padding: 60px;
    --body-padding: 0;



    /*** FONTS ***/
    --font-family-body: "Schibsted Grotesk", system-ui;
    --font-family-heading: "Baloo 2", system-ui;

    --font-size-h1: 5rem;
    --font-size-h2: 3.75rem;
    --font-size-h3: 3rem;
    --font-size-h4: 2.25rem;
    --font-size-h5: 1.75rem;
    --font-size-h6: 1.5rem;

    --font-size-intro: 1.5rem;
    --font-size-body: 1.25rem;
    --font-size-small: 1.125rem;
    --font-size-meta: 1rem;
    --font-size-pre-heading: 0.875rem;

    --line-height-headings: 125%;
    --line-height-body: 150%;

    --font-weight-heading: 800;
    --font-weight-heading-light: 400;

    --font-size-buttons: 1.25rem;
    --line-height-buttons: 150%;
    --font-weight-buttons: 800;
    --border-radius-buttons: 30px;
    --padding-buttons: 14px 30px 14px 30px;



    /*** ICONS ***/
    --icon-bullet: url("../assets/images/li.svg");
    --icon-bullet-white: url("../assets/images/li-white.svg");
    --icon-search: url("../assets/images/icon-search.svg");
    --icon-chevron-down: url("../assets/images/chevron-down-green.svg");
    --icon-chevron-up: url("../assets/images/chevron-up-green.svg");
    --icon-chevron-right: url("../assets/images/chevron-right-green.svg");





    /*** MISC ***/

    --button-hover-scale: 1.05;
    --button-hover-transition: all 0.1s ease-in-out !important;



}

@media screen and (max-width: 767px) {

    /* different sizings for mobile */
    :root {
        --box-padding: 30px;
        --content-section-padding: 30px;

        --font-size-h1: 3rem;
        --font-size-h2: 2.5rem;
        --font-size-h3: 2.25rem;
        --font-size-h4: 2rem;
        --font-size-h5: 1.5rem;
        --font-size-h6: 1.125rem;
        --font-size-intro: 1.25rem;
        --font-size-body: 1.125rem;
    }
}