:root {
    /** Core variables **/
    --color-white: #fdfcff;

    --color-grey-1: #efeff8;
    --color-grey-2: #cfcedb;
    --color-grey-3: #aeadbe;
    --color-grey-4: #8e8ca1;
    --color-grey-5: #7e7c92;
    --color-grey-6: #6e6d81;
    --color-grey-7: #4f4e5e;
    --color-grey-8: #2f2e3b;
    --color-grey-9: #100f18;

    --color-orange-1: #fff1e7;
    --color-orange-2: #ffdcc3;
    --color-orange-3: #ffcca7;
    --color-orange-4: #ffb381;
    --color-orange-5: #fa934e;
    --color-orange-6: #f76808;
    --color-orange-7: #ed5f00;
    --color-orange-8: #bd4b00;
    --color-orange-9: #451e11;

    --color-red-1: #f9dfe4;
    --color-red-2: #ed9fad;
    --color-red-3: #e26076;
    --color-red-4: #d6203f;
    --color-red-5: #d00023;
    --color-red-6: #b6001f;
    --color-red-7: #820016;
    --color-red-8: #4e000d;
    --color-red-9: #1a0004;

    --size-base: calc(1.6em + 0.5vw);
    --size-smaller: 0.75em;
    --size-small: 0.85em;
    --size-normal: 1em;
    --size-large: 1.2em;

    --space-base: 2rem;
    --space-smaller: calc(var(--space-base) / 4);
    --space-small: calc(var(--space-base) / 2);
    --space-medium: var(--space-base);
    --space-large: calc(var(--space-base) * 2);
    --space-larger: calc(var(--space-base) * 4);

    --font-family-text: "Raleway", system-ui, sans-serif;
    --font-family-title: "Raleway", system-ui, sans-serif;

    /** Semantic variables **/
    --color-back-warning: var(--color-orange-1);

    --color-border: var(--color-grey-6);
    --color-border-disabled: var(--color-grey-3);
    --color-border-error: var(--color-red-5);
    --color-border-search: var(--color-grey-3);

    --color-text-error: var(--color-red-6);
    --color-text-secondary: var(--color-grey-7);
    --color-text-disabled: var(--color-grey-6);
    --color-text-warning: var(--color-orange-9);

    --width-border: 0.1em;
    --width-border-bold: 0.2em;

    --radius: var(--border-radius);
    --radius-button: var(--border-radius);

    --width-content: 1100px;

    --height-header: 6rem;
    --height-separator: var(--width-border);
}

@media (min-width: 48em) {
    :root {
        --size-base: 2.2em;
    }
}
