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

@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
    font-style: italic;
    font-display: swap;
}

/* Global Variables */

:root {
    /* Layout */
    --site-margin-vertical: 5vh;
    --site-margin-horizontal: 10vw;

    /* Palette */
    --brand-color: hsl(116, 40%, 26%);
    --base-col-hue: 116;
    --base-col-sat: 40%;

    --brand-color-2: hsla(var(--base-col-hue), var(--base-col-sat), 15%, 90%);
    --brand-color-lighter: hsl(var(--base-col-hue), var(--base-col-sat), 34%);
    --brand-color-darker: hsl(var(--base-col-hue), var(--base-col-sat), 18%);
    --brand-color-text: hsl(var(--base-col-hue), var(--base-col-sat), 10%);
    --brand-color-text-muted: hsl(var(--base-col-hue), var(--base-col-sat), 26%);

    --accent-color: hsl(32, 88%, 50%);
    --accent-color-lighter: hsl(32, 100%, 57%);
    --accent-color-darker: hsl(28, 77%, 44%);

    --basecol-100: hsl(var(--base-col-hue), var(--base-col-sat), 100%);
    --basecol-95: hsl(var(--base-col-hue), var(--base-col-sat), 95%);
    --basecol-90: hsl(var(--base-col-hue), var(--base-col-sat), 90%);
    --basecol-80: hsl(var(--base-col-hue), var(--base-col-sat), 80%);
    --basecol-70: hsl(var(--base-col-hue), var(--base-col-sat), 70%);
    --basecol-50: hsl(var(--base-col-hue), var(--base-col-sat), 50%);
    --basecol-30: hsl(var(--base-col-hue), var(--base-col-sat), 30%);
    --basecol-20: hsl(var(--base-col-hue), var(--base-col-sat), 20%);
    --basecol-10: hsl(var(--base-col-hue), var(--base-col-sat), 10%);
    --basecol-5: hsl(var(--base-col-hue), var(--base-col-sat), 5%);
    --basecol-0: hsl(var(--base-col-hue), var(--base-col-sat), 0%);

    --adaptivecol-100: var(--basecol-100);
    --adaptivecol-95: var(--basecol-95);
    --adaptivecol-90: var(--basecol-90);
    --adaptivecol-80: var(--basecol-80);
    --adaptivecol-70: var(--basecol-70);
    --adaptivecol-50: var(--basecol-50);
    --adaptivecol-30: var(--basecol-30);
    --adaptivecol-20: var(--basecol-20);
    --adaptivecol-10: var(--basecol-10);
    --adaptivecol-5: var(--basecol-5);
    --adaptivecol-0: var(--basecol-0);

    --google-blue: hsl(217, 89%, 61%);
    --google-active-blue: hsl(221, 67%, 55%);

    --error-color: hsl(5, 81%, 56%);
    --error-color-highlight: hsl(5, 91%, 60%);
    --warning-color: hsl(45, 90%, 50%);
    --warning-color-highlight: hsl(45, 100%, 54%);
    --success-color: hsl(136, 53%, 43%);
    --success-color-highlight: hsl(136, 63%, 47%);
}

/* Light-/Dark-dependent Variables */
:root {
    --bg: var(--basecol-80);
    --bg-dark: var(--basecol-70);
    --bg-light: var(--basecol-95);

    --border-card: solid 1px hsl(0, 0%, 80%);
    --shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.07), 0px 4px 4px hsla(0, 0%, 0%, 0.15);
    --highlight-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.15),
        0px 8px 8px hsla(0, 0%, 0%, 0.30);
    --light-shadow: var(--shadow);

    --text: var(--brand-color-text);
    --text-muted: var(--brand-color-text-muted);
    --text-greyed-out: hsl(0, 0%, 60%);

    --anchor-text-color: var(--accent-color-darker);
    --anchor-text-color-hover: var(--accent-color);

    --btn-bg: hsl(0, 0%, 95%);
    --btn-color: var(--accent-color);
    --btn-highlight-bg: var(--accent-color-lighter);
    --btn-highlight-color: var(--btn-bg);
    --btn-border: solid 1px var(--accent-color-lighter);
    --btn-shadow: var(--shadow);

    --btn-cta-bg: var(--accent-color);
    --btn-cta-highlight-bg: var(--accent-color-lighter);
    --btn-cta-color: hsl(0, 0%, 100%);

    --scrollbar-track-col: transparent;
    --scrollbar-bar-col: var(--basecol-10);
}

html.dark {
    --adaptivecol-100: var(--basecol-0);
    --adaptivecol-95: var(--basecol-5);
    --adaptivecol-90: var(--basecol-10);
    --adaptivecol-80: var(--basecol-20);
    --adaptivecol-70: var(--basecol-30);
    --adaptivecol-30: var(--basecol-70);
    --adaptivecol-20: var(--basecol-80);
    --adaptivecol-10: var(--basecol-90);
    --adaptivecol-5: var(--basecol-95);
    --adaptivecol-0: var(--basecol-100);

    --bg: var(--basecol-5);
    --bg-dark: var(--basecol-0);
    --bg-light: var(--basecol-10);

    --border: transparent;
    --border-card: solid 1px var(--border);

    --anchor-text-color: var(--accent-color);
    --anchor-text-color-hover: var(--accent-color-darker);

    --text: hsl(var(--base-col-hue), var(--base-col-sat), 95%);
    --text-muted: hsl(var(--base-col-hue), var(--base-col-sat), 90%);

    --shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.42), 0px 4px 4px hsla(0, 0%, 0%, 0.70);
    --highlight-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.84),
        0px 8px 8px hsla(0, 0%, 0%, 0.95);
    --light-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.42),
        0px 4px 4px hsla(0, 0%, 0%, 0.40);

    --scrollbar-track-col: transparent;
    --scrollbar-bar-col: var(--basecol-90);
}

/* Typography Variables */
:root {
    --ff: "Inter", sans-serif;

    --h1: bold 1.75rem/1.4em var(--ff);
    --h2: bold 1.5rem/1.4em var(--ff);
    --h3: bold 1.125rem/1.4em var(--ff);
    --h4: bold 1rem/1.4em var(--ff);

    --p: 1rem/1.4em var(--ff);
    --p2: 0.875rem/1.4em var(--ff);
    --p3: 0.75rem/1.4em var(--ff);
}