html {
    background: #111;
    color: #ccc;
    font-size: 12pt;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

:root {
    --scrollbar-flavour: var(--flavour-accent);
    --style-base-slate: hsl(210, 12%, 44%); /* Default/Neutral blue-gray (rebased: s×1.2, l×0.8) */
    --style-base-red: hsl(4, 45%, 50%); /* Red (rebased: s×1.2, l×0.8) */
    --style-base-orange: hsl(17, 50%, 55%); /* Yellow/Orange (rebased: s×1.2, l×0.8) */
    --style-base-yellow: hsl(40, 60%, 60%); /* Yellow/Orange (rebased: s×1.2, l×0.8) */
    --style-base-green: hsl(140, 45%, 50%); /* Green (rebased: s×1.2, l×0.8) */
    --style-base-blue: hsl(215, 65%, 50%); /* Blue (rebased: s×1.2, l×0.8) */
    --style-base-purple: hsl(280, 45%, 55%); /* Purple (rebased: s×1.2, l×0.8) */

    --flavour-base: hsl(210, 0%, 33%);
    --flavour-accent: hsl(210, 13%, 33%);
    --flavour-danger: hsl(4, 40%, 40%);
    --flavour-emphasis: hsl(35, 40%, 40%);
    --flavour-confirm: hsl(160, 22%, 40%);
    --flavour-help: hsl(280, 35%, 40%);
    --flavour-info: hsl(215, 44%, 40%);

    --icon-base: oklch(from var(--flavour-base) 0.8 calc(c * 0.9) h);
    --icon-accent: oklch(from var(--flavour-accent) 0.8 calc(c * 0.9) h);
    --icon-danger: oklch(from var(--flavour-danger) 0.8 calc(c * 0.9) h);
    --icon-emphasis: oklch(from var(--flavour-emphasis) 0.8 calc(c * 0.9) h);
    --icon-confirm: oklch(from var(--flavour-confirm) 0.8 calc(c * 0.9) h);
    --icon-help: oklch(from var(--flavour-help) 0.8 calc(c * 0.9) h);
    --icon-info: oklch(from var(--flavour-info) 0.8 calc(c * 0.9) h);

    --icon: currentColor;
    --flavour: var(--flavour-base);
}

[data-flavour="base"] {
    --flavour: var(--flavour-base);
    --scrollbar-flavour: var(--flavour-accemt);
    --icon-flavour: var(--icon-base);
}

[data-flavour="inherit"] {
    --flavour: inherit;
    --scrollbar-flavour: inherit;
    --icon-flavour: inherit;
}

[data-flavour="accent"] {
    --flavour: var(--flavour-accent);
    --scrollbar-flavour: var(--flavour);
    --icon-flavour: var(--icon-accent);
}

[data-flavour="danger"] {
    --flavour: var(--flavour-danger);
    --scrollbar-flavour: var(--flavour);
    --icon-flavour: var(--icon-danger);
}
[data-flavour="emphasis"] {
    --flavour: var(--flavour-emphasis);
    --scrollbar-flavour: var(--flavour);
    --icon-flavour: var(--icon-emphasis);
}
[data-flavour="confirm"] {
    --flavour: var(--flavour-confirm);
    --scrollbar-flavour: var(--flavour);
    --icon-flavour: var(--icon-confirm);
}
[data-flavour="help"] {
    --flavour: var(--flavour-help);
    --scrollbar-flavour: var(--flavour);
    --icon-flavour: var(--icon-help);
}
[data-flavour="info"] {
    --flavour: var(--flavour-info);
    --scrollbar-flavour: var(--flavour);
    --icon-flavour: var(--icon-info);
}

/* Scrollbar Styles */

*::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

*::-webkit-scrollbar-track {
    corner-shape: bevel;
    background: oklch(from var(--scrollbar-flavour) 0.23 calc(c * 0.1) h);
    overflow: hidden;
    border-radius: 100vw;
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-flavour);
    background-clip: padding-box;
    border: 2px solid transparent;
    corner-shape: bevel;
    border-radius: 100vw;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: oklch(from var(--scrollbar-flavour) calc(l + 0.1) c h);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}