html {
    background: #222;
    color: #ccc;
    font-size: 11pt;
    font-family:
        "DM Sans",
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        "Helvetica Neue",
        Arial,
        "Noto Sans",
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        "Noto Color Emoji"; /* 4 */
}

: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);
    --contrast: 0.2;
}

[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;
}

/* Fantasy Fonts */

@font-face {
    font-family: "Anayanka";
    src: url("/fonts/anayanka.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Angerthas";
    src: url("/fonts/angerthas.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Aurebesh";
    src: url("/fonts/aurebesh.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Barazhad";
    src: url("/fonts/barazhad.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Cardosan";
    src: url("/fonts/cardosan.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Clynese";
    src: url("/fonts/clynese.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Coremaic";
    src: url("/fonts/coremaic.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Daedra";
    src: url("/fonts/daedra.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Davek";
    src: url("/fonts/davek.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Dottage";
    src: url("/fonts/dottage.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Dwemer";
    src: url("/fonts/dwemer.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Eladrin";
    src: url("/fonts/eladrin.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Exodite";
    src: url("/fonts/exodite.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Falmer";
    src: url("/fonts/falmer.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Futhark";
    src: url("/fonts/futhark.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Gargish";
    src: url("/fonts/gargish.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Huttese";
    src: url("/fonts/huttese.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Iokharic";
    src: url("/fonts/iokharic.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Kargi";
    src: url("/fonts/kargi.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Kehdrai";
    src: url("/fonts/kehdrai.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Kitisakkullian";
    src: url("/fonts/kitisakkullian.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Klinzhai";
    src: url("/fonts/klinzhai.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Mage";
    src: url("/fonts/mage.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Maraseye";
    src: url("/fonts/maraseye.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Moria";
    src: url("/fonts/moria.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Noldor";
    src: url("/fonts/noldor.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Qijomi";
    src: url("/fonts/qijomi.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Qonos";
    src: url("/fonts/qonos.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Quenya";
    src: url("/fonts/quenya.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Reanaarian";
    src: url("/fonts/reanaarian.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Rellanic";
    src: url("/fonts/rellanic.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Rhesimol";
    src: url("/fonts/rhesimol.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Sigali";
    src: url("/fonts/sigali.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Sindarin";
    src: url("/fonts/sindarin.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Warden";
    src: url("/fonts/warden.woff2") format("woff2");
    font-display: swap;
}