:root {
    /* breakpoints */
    --screen-s: 576px;
    --screen-m: 768px;
    --screen-l: 992px;
    --screen-xl: 1200px;
    --screen-xxl: 1400px;
    --screen-4k: 2560px;

    /* fonts */
    --font-family-base: 'inter';
    --font-family-accent: 'Playfair';
    --font-family-icons: Phosphor-Bold;

    /*font sizes*/
    --font-size-base: 1rem;
    --font-size-lead: calc(var(--font-size-base) * 1.25);
    --font-size-h1: calc(var(--font-size-base) * 3);
    --font-size-h2: calc(var(--font-size-base) * 2.125);
    --font-size-h3: var(--font-size-lead);
    /* typographic variables */
    --line-height: calc(var(--font-size-base) * 1.46);

    /*basic distances*/
    --gutter-width: 1rem;
    --border-width: 2px;
    --border-radius: 0;
    --border-radius-form: var(--border-radius);
    --button-border-width: 2px;

    /* colors */
    --black: #000000;
    --white: #ffffff;
    --primary: #be1729;
    --primary-medium: #8c111e;
    --primary-dark: #610c15;
    --secondary: #f9ba11;
    --secondary-medium: #bc8d0e;
    --secondary-dark: #6c5007;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #0dcaf0;
    --light: var(--white);
    --dark: var(--black);
    --grey-light: #f8f8f8;
    --grey-medium: #eaeaea;
    --grey-dark: #707070;

    --cosmic-latte: #fff8e7;
    --cosmic-spectrum-green: #9cffce;

    /* animation stuff */
    --animation-duration: 0.33s;
    --animation-timing: ease-in-out;

    /* grid variables */
    --grid-gap: var(--gutter-width);
    --column-count: 4;

    --header-height: 85px;
}

@media(min-width: 992px) {
    :root {
        --font-size-base: 1.125rem;
        --font-size-h1: calc(var(--font-size-base) * 3.5);
    }
}