:root {
    --hsl-ink: #161616;
    --hsl-ink-inverse: #f4f4f4;
    --hsl-blue: hsl(218 78% 54%);
    --hsl-blue-hover: hsl(218 78% 44%);

    --color-canvas: hsl(none 0% 98%);
    --color-canvas-listbox: #f4f4f4;
    --color-canvas-hover: #e8e8e8;
    --color-ink: var(--hsl-ink);
    --color-ink-inverse: var(--hsl-ink-inverse);
    --color-ink-secondary: hsl(none 0% 32%);
    --color-border-strong: hsl(none 0% 55%);
    --color-border-subtle: hsl(none 0% 88%);

    --color-white: hsl(none 0% 100%);

    --color-blue: var(--hsl-blue);
    --color-blue-hover: var(--hsl-blue-hover);

    --color-txt-primary: hsl(219 99% 43%);

    --color-bg-primary: hsl(219 99% 53%);
    --color-bg-primary-hover: hsl(219 99% 43%);

    --color-bg-secondary: hsl(none 0% 22%);
    --color-bg-secondary-hover: hsl(180 1% 12%);

    --font-family-plex: 'IBM Plex Mono', 'Segoe UI', Helvetica Neue, Arial, sans-serif;

    --font-size: clamp(1em, 1vw, 1.5rem);
    --font-size-small: 90%;
    --font-size-medium: 100%;

    --line-height: 1.5;
    --space-small: 0.5em;
    --space-medium: 1em;

    --transition: 0.125s cubic-bezier(0.37, 1, 0.74, 1);
}

@media(min-width: 48em) {
    :root {
        --font-size-medium: 110%;
    }
}

@media(prefers-color-scheme: dark) {
    :root {
        --color-canvas: hsl(none 0% 15%);
        --color-canvas-listbox: #393939;
        --color-canvas-hover: #4c4c4c;
        --hsl-ink: #f4f4f4;
        --hsl-ink-inverse: #161616;
        --color-ink-secondary: hsl(none 0% 66%);
        --color-border-strong: hsl(none 0% 45%);
        --color-border-subtle: hsl(none 0% 24%);
        --hsl-blue: hsl(214 94% 62%);
        --hsl-blue-hover: hsl(214 94% 72%);

        --color-bg-primary: hsl(219 99% 43%);
        --color-bg-primary-hover: hsl(219 99% 53%);

        --color-bg-secondary: hsl(none 0% 44%);
        --color-bg-secondary-hover: hsl(none 0% 54%);
    }
}