/**** default code ****/
html {
    scroll-behavior: smooth;
    scroll-padding-top: 107px;
}

body {
    /* sizing */
    height: unset;

    /* spacing */
    margin: 0;
    overflow-x: hidden;

    /* styling */
    background-color: var(--primary-color);

    /* transition*/
    transition: background-color var(--transition-duration) var(--transition-method);
}

body.noscroll {
    overflow: hidden !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

/*** Colors ***/
@media (prefers-color-scheme: light) {
    html {
        /* Colours */
        --primary-color: #e7e7e7;
        --secondary-color: #dedede;
        --tertiary-color: #cfcecb;

        /* Text Colours */
        --primary-text-color: black;
        --secondary-text-color: black;
        --tertiary-text-color: black;

        /* Image Colors */
        --image-background: #c7c7c7;
    }
}

@media (prefers-color-scheme: dark) {
    html {
        /* Colours */
        --primary-color: #181818;
        --secondary-color: #212121;
        --tertiary-color: #303134;

        /* Text Colours */
        --primary-text-color: white;
        --secondary-text-color: white;
        --tertiary-text-color: white;

        /* Image Colors */
        --image-background: #535353;
    }
}

/** Brand Colors **/
html {
    --brand-text-color: #F6F4F3;
}

@media (prefers-color-scheme: light) {
    html {
        /* Brand Colours */
        --brand-color-background: #F03A47;
        --brand-color-foreground: #AF5B5B;
    }
}

@media (prefers-color-scheme: dark) {
    html {
        /* Brand Colours */
        --brand-color-background: #183059;
        --brand-color-foreground: #276FBF;
    }
}


/*** Transitions ***/
html {
    --transition-duration: 0.25s;
    --transition-method: ease-in-out;

    --transition-button-duration: 0.1s;
    --transition-button-method: ease-in-out;

    --backlog-text-transition: transform var(--transition-duration) var(--transition-method), color var(--transition-duration) var(--transition-method), text-shadow var(--transition-duration) var(--transition-method)
}

@media (prefers-reduced-motion) {
    html {
        --transition-duration: 0s;
        --transition-method: none;

        --transition-button-duration: 0s;
        --transition-button-method: none;
    }
}

/*** Radius ***/
html {
    --border-radius: 5px;
    --hero-radius: var(--border-radius);
    --favroites-radius: var(--border-radius);
    --backlog-radius: var(--border-radius);
    --recipe-radius: var(--border-radius);
    --faq-radius: var(--border-radius);
    --social-radius: var(--border-radius);
    --footer-radius: var(--border-radius);
}

/*** Widths ***/
html {
    --page-max-width: 1500px;
    --page-width: min(var(--page-max-width), calc(100% - max(8vw, 20px)));
}

/*** Shadows ***/
html {
    --text-shadow: 0 5px 10px black;
}

/*** Filters ***/
html {
    --hover-filter: brightness(.65) blur(3px) opacity(1);
    --drop-shadow: drop-shadow(0px 5px 15px black);
}