:root {
    /* --- COLORS: PALETTE --- */
    --color-brand: #AD0151;
    --color-primary: #000000;
    --color-secondary: #FFFFFF;

    /* --- COLORS: GRAYSCALE --- */
    --color-white: #FFFFFF;
    --color-gray-light: #F9F9F9;
    --color-gray-medium: #C0C0C0;
    --color-gray-dark: #808080;
    --color-black: #000000;

    /* --- SHADOWS --- */
    --shadow-element: 0 0 20px 0 rgb(0 0 0 / 0.25);
    --shadow-overlay: inset 0 0 0 50vw rgb(0 0 0 / 0.5);

    /* --- DURATIONS --- */
    --duration-transition: 0.3s;

    /* --- DIMENSIONS --- */
    --page-max-width: 140rem;
    --content-max-width: 70rem; /* midnight-fix */
    --header-full-height: 9rem;
    --header-compact-height: 7rem;
    --hero-full-height: 100%;
    --hero-compact-height: 30rem;

    /* --- SIZES --- */
    --size-xxs: 0.5rem;
    --size-xs: 1rem;
    --size-s: 1.5rem;
    --size-m: 2rem;
    --size-l: 2.5rem;
    --size-xl: 3rem;
    --size-xxl: 6rem;
}