$mobile-breakpoint: "max-width: 768px";

:root {
    --background-dark: url("/img/background-black-red.jpg");

    --color-text: #161616;

    --color-primary: #DB2937;
    --color-on-primary: white;

    --color-accent: #303030;
    --color-on-accent: #EA8189;

    --color-dark: #161616;
    --color-dark-gradient: linear-gradient(0deg, var(--color-accent) 0%, var(--color-dark) 22%);
    --color-on-dark: #E35965;

    --color-surface: #fff3f3;

    --color-link: var(--color-primary);

    --space-xsmall: 5px;
    --space-small: 10px;
    --space-medium: 20px;
    --space-large: 30px;
    --space-xlarge: 60px;

    --width: 1100px;

    --fz-1: 4rem;
    --fz-2: 2rem;
    --fz-3: 1.5rem;
    --fz-4: 1.125rem;

    --border-radius-small: 3px;
    --border-radius-medium: 7px;
    --elevation-high: 0px 5px 5px 0px rgba(22, 22, 22, 0.5);
    --elevation-medium: 0px 2px 7px 0px rgba(22, 22, 22, 0.3);

    --transitions-duration: 0.2s;
    
    @media ($mobile-breakpoint) {
        --fz-1: 2.8rem;
        --fz-2: 1.825rem;
        --fz-3: 1.5rem;
        --fz-4: 1.125rem;
    }
}