:root {
    --color-primary-hue: 198;
    --color-primary-saturation: 50%;
    --color-primary-brightness: 25%;

    --color-accent-hue: 150;
    --color-accent-saturation: 100%;
    --color-accent-brightness: 40%;

    --color-error-hue: 330;
    --color-error-saturation: 100%;
    --color-error-brightness: 40%;

    --color-background-lightness: 98%;
    --color-background-dark-lightness: 12%;

    --transition-animation-ms: 100ms;
    --hover-color-brightness-multiplier: 1.07;

    --color-primary: hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-brightness));
    --color-primary-faint: hsl(var(--color-primary-hue), calc(var(--color-primary-saturation) * .5), calc(var(--color-primary-brightness) * 2));
    --color-primary-dark-background: hsl(var(--color-primary-hue), var(--color-primary-saturation), calc(var(--color-primary-brightness) * 3.5));
    --color-primary-dark-background-faint: hsl(var(--color-primary-hue), calc(var(--color-primary-saturation) * .5), calc(var(--color-primary-brightness) * 1.8));
    --color-background: hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-background-lightness));
    --color-accent: hsl(var(--color-accent-hue), var(--color-accent-saturation), var(--color-accent-brightness));
    --color-accent-high-contrast: hsl(var(--color-accent-hue), var(--color-accent-saturation), calc(var(--color-accent-brightness) * .9));

    --color-error: hsl(var(--color-error-hue), var(--color-error-saturation), var(--color-error-brightness));

    --color-background-dark: hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-background-dark-lightness));
    --color-background-faint: hsl(var(--color-primary-hue), 50%, 90%);

    --font-family-main: "IBM Plex Sans", sans-serif;
    --font-family-secondary: "IBM Plex Sans", sans-serif;
    /* --font-family-secondary: "Inconsolata", monospace; */

    --font-size: 12pt;
    --font-size-small: 11pt;

    --border-radius: 10px;
    --border-radius-inner: 8.5px;
    --border-radius-small: 5px;

    --border-radius-big: 20px;
    --border-radius-big-inner: 18px;

    --menu-height: 3.7em;

    --titles-font-family: var(--font-family-secondary);
    --titles-font-weight: 600;
    --titles-font-big-letter-spacing: -2px;

    --button-font-family: var(--font-family-main);
    --button-font-size: 11pt;
    --button-font-weight: 400;
}