:root {
    /* Font sizes */
    --font-xxs: clamp(0.64rem, -0.01vi + 0.64rem, 0.63rem);
    --font-xs: clamp(0.8rem, 0.08vi + 0.78rem, 0.84rem);
    --font-s-xs: clamp(0.9375rem, 0.09375vi + 0.84rem, 0.84rem);
    --font-s: clamp(1rem, 0.23vi + 0.94rem, 1.13rem);
    --font-m: clamp(1.25rem, 0.45vi + 1.14rem, 1.5rem);
    --font-l: clamp(1.56rem, 0.79vi + 1.36rem, 2rem);
    --font-xl: clamp(1.95rem, 1.29vi + 1.63rem, 2.66rem);
    --font-xxl: clamp(2.44rem, 2.02vi + 1.94rem, 3.55rem);
    --font-supersize: clamp(3.05rem, 3.06vi + 2.29rem, 4.73rem);
    --rhythm: 1lh;

    --font-body-family:
        system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
        'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body-size: var(--font-s);
    --font-body-line-height: 1.5;
    --font-body-weight: 400;
    --font-body-width: 80ch;

    --font-preamble-family: var(--font-body-family);
    --font-preamble-size: var(--font-m);
    --font-preamble-line-height: 1.4;
    --font-preamble-weight: 400;
    --font-preamble-width: 50ch;

    --font-heading-family: var(--font-body-family);
    --font-heading-line-height: 1.2;
    --font-heading-weight: 700;
    --font-heading-width: 40ch;

    /* Spacing */
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-s: 16px;
    --spacing-m: 24px;
    --spacing-l: 36px;
    --spacing-xl: 64px;
    --spacing-xxl: 96px;
    --spacing-default: var(--spacing-m);
    --spacing-item: var(--spacing-xs);

    /** Color palette */
    --color-palette-white: #fff;
    --color-palette-black: #000;

    /** Fuchsia Blue */
    --color-palette-main-0: var(--color-palette-white);
    --color-palette-main-10: #edebff;
    --color-palette-main-30: #b2aafb;
    --color-palette-main-50: #7255d9;
    --color-palette-main-70: #593fb7;
    --color-palette-main-90: #271a5b;

    /** Electric indigo */
    --color-palette-secondary-0: var(--color-palette-white);
    --color-palette-secondary-10: #edeafc;
    --color-palette-secondary-30: #a27bff;
    --color-palette-secondary-50: #8846ff;
    --color-palette-secondary-70: #7a21ff;
    --color-palette-secondary-90: #2e0471;

    /** Woodsmoke */
    --color-palette-black-0: var(--color-palette-white);
    --color-palette-black-10: #f5f5f5;
    --color-palette-black-30: #e7e7e7;
    --color-palette-black-40: #b7b7b7;
    --color-palette-black-50: #959595;
    --color-palette-black-60: #6c6c6c;
    --color-palette-black-70: #4f4f4f;
    --color-palette-black-90: #171717;

    /** Mandy */
    --color-palette-danger-0: var(--color-palette-white);
    --color-palette-danger-10: #fff1f3;
    --color-palette-danger-30: #f77591;
    --color-palette-danger-50: #ef476f;
    --color-palette-danger-70: #b30f3e;
    --color-palette-danger-90: #4a071e;

    /** Success */
    --color-palette-success-0: var(--color-palette-white);
    --color-palette-success-10: #ddfbec;
    --color-palette-success-30: #88edbd;
    --color-palette-success-50: #25c279;
    --color-palette-success-70: #198754;
    --color-palette-success-90: #062d1c;

    /** Info */
    --color-palette-info-0: var(--color-palette-white);
    --color-palette-info-10: #cef9ff;
    --color-palette-info-30: #64e6fc;
    --color-palette-info-50: #01b1d9;
    --color-palette-info-70: #0b7193;
    --color-palette-info-90: #073245;

    /** Warning */
    --color-palette-warning-0: var(--color-palette-white);
    --color-palette-warning-10: #fffbc5;
    --color-palette-warning-30: #ffee46;
    --color-palette-warning-50: #ffc107;
    --color-palette-warning-60: #eb9b00;
    --color-palette-warning-70: #bb6902;
    --color-palette-warning-90: #482200;

    /** Error */
    --color-palette-error-0: var(--color-palette-white);
    --color-palette-error-10: #ffedf0;
    --color-palette-error-30: #ff6b7b;
    --color-palette-error-50: #ff3e50;
    --color-palette-error-70: #b30f3e;
    --color-palette-error-90: #4a071e;

    /* Colors */
    --color-background: var(--color-palette-white);
    --color-background-overlay: rgba(250, 250, 250, 0.7);
    --color-paper: var(--color-palette-black-10);
    --color-muted: var(--color-palette-black-70);
    --color-disabled: var(--color-palette-black-40);
    --color-subtle: var(--color-palette-black-30);
    --color-text: var(--color-palette-black-90);
    --color-text-highlight: var(--color-palette-secondary-70);
    --color-muted-text: var(--color-palette-black-60);
    --color-border: var(--color-palette-main-30);
    --color-tab-highlight: #ff4069;

    /* Shape */
    --border-radius: 8px;

    /* Buttons */
    --button-color: var(--color-palette-main-50);
    --button-color-hover: var(--color-palette-main-70);
    --button-text-color: var(--color-palette-main-0);
    --button-text-color-hover: var(--color-palette-main-0);
    --button-border-color: var(--color-palette-main-50);
    --button-border-color-hover: var(--border-color-hover);

    --button-secondary-color: var(--color-palette-black-30);
    --button-secondary-color-hover: var(--color-palette-black-40);
    --button-secondary-text-color: var(--color-palette-black-90);
    --button-secondary-text-color-hover: var(--color-palette-black-90);
    --button-secondary-border-color: var(--color-palette-black-40);
    --button-secondary-border-hover-color: var(--color-palette-black-40);

    --button-border-color-alternate: var(--color-palette-main-50);
    --button-border-color-disabled: var(--color-palette-black-50);
    --button-size: 46px;
    --button-font-size: var(--font-s);
    --button-padding: var(--spacing-s);
    --button-size-small: 38px;
    --button-font-size-small: var(--font-xs);
    --button-padding-small: var(--spacing-s);
    --button-icon-size: var(--font-m);
    --button-icon-size-small: var(--font-s);

    /* Border */
    --border-color: var(--color-palette-main-50);
    --border-color-hover: var(--color-palette-main-70);

    /* Control */
    --control-size: 32px;
    --input-height: 46px;
    --input-height-small: 38px;

    /* Layout */
    --layout-width: 1440px;
    --layer-foreground: 1000;
    --layer-middleground: 500;
    --layer-background: 1;
    --gap: 0;
    --site-header-height: 75px;

    /* Breakpoints */
    /* NOTE: Media queries can't use CSS-variables but these are the values used in this project */
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

@media screen and (max-width: 1200px) {
    :root {
        --spacing-xxs: 4px;
        --spacing-xs: 8px;
        --spacing-s: 12px;
        --spacing-m: 16px;
        --spacing-l: 24px;
        --spacing-xl: 32px;
    }
}
