/* ---- Fonts ---- */

@font-face {
    font-family: "Quattro";
    src: url(../fonts/iAWriterQuattroV.ttf);
    ascent-override: 100%;
}

@font-face {
    font-family: "CascadiaCode";
    src: url(../fonts/CascadiaCode.ttf);
    ascent-override: 100%;
}

@font-face {
    font-family: "WinkySans";
    src: url(../fonts/WinkySans-VariableFont_wght.ttf);
    ascent-override: 100%;
}

/* ---- Vars ---- */

:root {
    --spacing-1: .25rem;
    --spacing-2: .5rem;
    --spacing-3: .75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;

    --radius-none: 0;
    --radius-xs: .125rem;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-round: 9999px;
    --radius-circle: 50%;

    --disabled-opacity: 0.4;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;

    --font-size-heading-5: 1.5rem;
    --font-size-heading-6: 1.25rem;
    --font-size-body-1: 1rem;
    --font-size-body-2: .875rem;
    --font-size-caption-1: .75rem;

    --line-height-heading-5: 1.2;
    --line-height-heading-6: 1.2;
    --line-height-body-1: 1.4;
    --line-height-body-2: 1.4;
    --line-height-caption-1: 1.4;

    --icon-xs: .75rem;
    --icon-sm: .875rem;
    --icon-md: 1rem;
    --icon-lg: 1.25rem;
    --icon-xl: 1.5rem;

    --z-index-modal: 1000;
    --z-index-backdrop: 1100;
    --z-index-popover: 1200;
}

/* ---- Reset ---- */

*, *::before, *::after {
    box-sizing: border-box;
    outline: none;
}

*:not(dialog) {
    margin: 0;
    padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
    max-width: 100%;
    display: block;
}

input, button, textarea, select {
    background: transparent;
    border: none;
    font: inherit;
}

a {
    text-decoration: none;
    text-decoration-skip-ink: auto;
}
a:hover {
    text-decoration: underline;
}

ul, ol {
    list-style: none;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
p {
    text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

pre {
    overflow: auto;
}

/* ---- Colors ---- */

.theme-root[data-theme="palebloom"] {
    --shade-0: #1a1a21;
    --shade-1: #202028;
    --shade-2: #272730;
    --shade-3: #343440;
    --shade-4: #494957;
    --shade-5: #88889b;
    --shade-6: #b6b6ca;
    --shade-7: #eaeaff;

    --keyword: #cdbbff;
    --method: #f7fbc6;
    --class: #aacefa;
    --string: #b9e1c6;
    --constant: #f4c8d7;
    --property: #b8f1f9;
    --parameter: #f7d3b7;

    --keyword-fill: #2e293d;
    --method-fill: #3c3d29;
    --class-fill: #29323d;
    --string-fill: #293d2f;
    --constant-fill: #3d2930;
    --property-fill: #293b3d;
    --parameter-fill: #3d3229;

    --keyword-fill-bright: #423663;
    --method-fill-bright: #606336;
    --class-fill-bright: #364a63;
    --string-fill-bright: #366344;
    --constant-fill-bright: #633645;
    --property-fill-bright: #365e63;
    --parameter-fill-bright: #634a36;

    --red: #ffa1b1;
    --orange: #f7d3b7;
    --yellow: #f7fbc6;
    --green: #b9e1c6;
    --cyan: #b8f1f9;
    --blue: #aacefa;
    --purple: #cdbbff;
    --pink: #f4c8d7;

    --red-fill: #3d292c;
    --orange-fill: #3d3229;
    --yellow-fill: #3c3d29;
    --green-fill: #293d2f;
    --cyan-fill: #293b3d;
    --blue-fill: #29323d;
    --purple-fill: #2e293d;
    --pink-fill: #3d2930;

    --red-fill-bright: #63363d;
    --orange-fill-bright: #634a36;
    --yellow-fill-bright: #606336;
    --green-fill-bright: #366344;
    --cyan-fill-bright: #365e63;
    --blue-fill-bright: #364a63;
    --purple-fill-bright: #423663;
    --pink-fill-bright: #633645;

    --primary: #cdbbff;
    --complementary: #aacefa;

    --primary-fill: #2e293d;
    --complementary-fill: #29323d;

    --primary-fill-bright: #423663;
    --complementary-fill-bright: #364a63;
}

.theme-root[data-theme="palebloom-night"] {
    --shade-0: #121216;
    --shade-1: #16161b;
    --shade-2: #1a1a21;
    --shade-3: #272730;
    --shade-4: #343440;
    --shade-5: #88889b;
    --shade-6: #b6b6ca;
    --shade-7: #eaeaff;

    --keyword: #cdbbff;
    --method: #f7fbc6;
    --class: #aacefa;
    --string: #b9e1c6;
    --constant: #f4c8d7;
    --property: #b8f1f9;
    --parameter: #f7d3b7;

    --keyword-fill: #2e293d;
    --method-fill: #3c3d29;
    --class-fill: #29323d;
    --string-fill: #293d2f;
    --constant-fill: #3d2930;
    --property-fill: #293b3d;
    --parameter-fill: #3d3229;

    --keyword-fill-bright: #423663;
    --method-fill-bright: #606336;
    --class-fill-bright: #364a63;
    --string-fill-bright: #366344;
    --constant-fill-bright: #633645;
    --property-fill-bright: #365e63;
    --parameter-fill-bright: #634a36;

    --red: #ffa1b1;
    --orange: #f7d3b7;
    --yellow: #f7fbc6;
    --green: #b9e1c6;
    --cyan: #b8f1f9;
    --blue: #aacefa;
    --purple: #cdbbff;
    --pink: #f4c8d7;

    --red-fill: #3d292c;
    --orange-fill: #3d3229;
    --yellow-fill: #3c3d29;
    --green-fill: #293d2f;
    --cyan-fill: #293b3d;
    --blue-fill: #29323d;
    --purple-fill: #2e293d;
    --pink-fill: #3d2930;

    --red-fill-bright: #63363d;
    --orange-fill-bright: #634a36;
    --yellow-fill-bright: #606336;
    --green-fill-bright: #366344;
    --cyan-fill-bright: #365e63;
    --blue-fill-bright: #364a63;
    --purple-fill-bright: #423663;
    --pink-fill-bright: #633645;

    --primary: #cdbbff;
    --complementary: #aacefa;

    --primary-fill: #2e293d;
    --complementary-fill: #29323d;

    --primary-fill-bright: #423663;
    --complementary-fill-bright: #364a63;
}

.theme-root[data-theme="mossglade"] {
    --shade-0: #171b1e;
    --shade-1: #1b2123;
    --shade-2: #21292c;
    --shade-3: #2b393b;
    --shade-4: #3e5356;
    --shade-5: #7f9698;
    --shade-6: #cbd7d6;
    --shade-7: #f4f6f6;

    --keyword: #b8f1f9;
    --method: #c3ffab;
    --class: #bfc8fd;
    --string: #b3f4d6;
    --constant: #f7d3b7;
    --property: #f7fbc6;
    --parameter: #f4c8d7;

    --keyword-fill: #293b3d;
    --method-fill: #2f3d29;
    --class-fill: #292c3d;
    --string-fill: #293d34;
    --constant-fill: #3d3229;
    --property-fill: #3c3d29;
    --parameter-fill: #3d2930;

    --keyword-fill-bright: #365e63;
    --method-fill-bright: #436336;
    --class-fill-bright: #363c63;
    --string-fill-bright: #36634e;
    --constant-fill-bright: #634a36;
    --property-fill-bright: #606336;
    --parameter-fill-bright: #633645;

    --red: #ffa1b1;
    --orange: #f7d3b7;
    --yellow: #f7fbc6;
    --green: #c3ffab;
    --cyan: #b3f4d6;
    --blue: #b8f1f9;
    --purple: #bfc8fd;
    --pink: #f4c8d7;

    --red-fill: #3d292c;
    --orange-fill: #3d3229;
    --yellow-fill: #3c3d29;
    --green-fill: #2f3d29;
    --cyan-fill: #293d34;
    --blue-fill: #293b3d;
    --purple-fill: #292c3d;
    --pink-fill: #3d2930;

    --red-fill-bright: #63363d;
    --orange-fill-bright: #634a36;
    --yellow-fill-bright: #606336;
    --green-fill-bright: #436336;
    --cyan-fill-bright: #36634e;
    --blue-fill-bright: #365e63;
    --purple-fill-bright: #363c63;
    --pink-fill-bright: #633645;

    --primary: #b8f1f9;
    --complementary: #c3ffab;

    --primary-fill: #293b3d;
    --complementary-fill: #2f3d29;

    --primary-fill-bright: #365e63;
    --complementary-fill-bright: #436336;

    --red-rgb: 255, 161, 177;
    --orange-rgb: 247, 211, 183;
    --yellow-rgb: 247, 251, 198;
    --green-rgb: 185, 225, 198;
    --cyan-rgb: 184, 241, 249;
    --blue-rgb: 170, 206, 250;
    --purple-rgb: 205, 187, 255;
    --pink-rgb: 244, 200, 215;
}

.theme-root[data-theme="mossglade-night"] {
    --shade-0: #0f1315;
    --shade-1: #131719;
    --shade-2: #171b1e;
    --shade-3: #21292c;
    --shade-4: #2b393b;
    --shade-5: #7f9698;
    --shade-6: #cbd7d6;
    --shade-7: #f4f6f6;

    --keyword: #b8f1f9;
    --method: #c3ffab;
    --class: #bfc8fd;
    --string: #b3f4d6;
    --constant: #f7d3b7;
    --property: #f7fbc6;
    --parameter: #f4c8d7;

    --keyword-fill: #293b3d;
    --method-fill: #2f3d29;
    --class-fill: #292c3d;
    --string-fill: #293d34;
    --constant-fill: #3d3229;
    --property-fill: #3c3d29;
    --parameter-fill: #3d2930;

    --keyword-fill-bright: #365e63;
    --method-fill-bright: #436336;
    --class-fill-bright: #363c63;
    --string-fill-bright: #36634e;
    --constant-fill-bright: #634a36;
    --property-fill-bright: #606336;
    --parameter-fill-bright: #633645;

    --red: #ffa1b1;
    --orange: #f7d3b7;
    --yellow: #f7fbc6;
    --green: #c3ffab;
    --cyan: #b3f4d6;
    --blue: #b8f1f9;
    --purple: #bfc8fd;
    --pink: #f4c8d7;

    --red-fill: #3d292c;
    --orange-fill: #3d3229;
    --yellow-fill: #3c3d29;
    --green-fill: #2f3d29;
    --cyan-fill: #293d34;
    --blue-fill: #293b3d;
    --purple-fill: #292c3d;
    --pink-fill: #3d2930;

    --red-fill-bright: #63363d;
    --orange-fill-bright: #634a36;
    --yellow-fill-bright: #606336;
    --green-fill-bright: #436336;
    --cyan-fill-bright: #36634e;
    --blue-fill-bright: #365e63;
    --purple-fill-bright: #363c63;
    --pink-fill-bright: #633645;

    --primary: #b8f1f9;
    --complementary: #c3ffab;

    --primary-fill: #293b3d;
    --complementary-fill: #2f3d29;

    --primary-fill-bright: #365e63;
    --complementary-fill-bright: #436336;
}

/* ---- Base ---- */

body {
    font-family: Quattro, sans-serif;
}

pre {
    font-family: "CascadiaCode", monospace;
}

a {
    color: var(--blue);
}

input, button, textarea, select {
    color: var(--shade-7);
}

.rich-text {
    color: var(--shade-7);
    font-size: 1rem;
    line-height: 1.3em;
}
.rich-text :first-child {
    margin-top: 0;
}
.rich-text :last-child {
    margin-bottom: 0;
}

.rich-text p,
.rich-text pre,
.rich-text ul,
.rich-text ol,
.rich-text table,
.rich-text blockquote {
    margin-bottom: 1rem;
}

.rich-text h1 {
    width: fit-content;
    margin: 3rem 0 1.5rem;
    background: linear-gradient(120deg, var(--purple) 30%, var(--blue));
    background-clip: text;
    color: transparent;
    font-size: 3rem;
    line-height: 1.3em;
}
.rich-text h2 {
    margin: 2rem 0 1rem;
    color: var(--shade-6);
    font-size: 2rem;
    line-height: 1.3em;
}
.rich-text h3 {
    margin: 1.5rem 0 1rem;
    color: var(--shade-6);
    font-size: 1.5rem;
    line-height: 1.3em;
}
.rich-text h4 {
    margin: 1.2rem 0 1rem;
    color: var(--shade-6);
    font-size: 1.2rem;
    line-height: 1.3em;
}
.rich-text h5 {
    margin: 1.1rem 0 1rem;
    color: var(--shade-6);
    font-size: 1.1rem;
    line-height: 1.3em;
}
.rich-text h6 {
    margin: 1rem 0 1rem;
    color: var(--shade-6);
    font-size: 1rem;
    line-height: 1.3em;
}

.rich-text a {
    color: var(--blue);
    text-decoration: none;
}
.rich-text a:hover {
    text-decoration: underline;
}

.rich-text ul {
    padding-left: 1.2rem;
}
.rich-text ol {
    padding-left: 1.2rem;
}
.rich-text li {
    margin: .2rem 0;
}
.rich-text li ul,
.rich-text li ol {
    margin: 0;
}

.rich-text code {
    padding: 0 .1rem;
    background-color: var(--shade-2);
    border-radius: .25rem;
    color: var(--purple);
    font-size: 1rem;
}
.rich-text pre {
    padding: 1.5rem 0;
    background-color: var(--shade-2);
    border-radius: .25rem;
    overflow: auto;
}
.rich-text pre code {
    margin: 0 1.5rem;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

.rich-text blockquote {
    padding: 0 1rem;
    border-left: 2px solid var(--shade-5);
    color: var(--shade-7);
}

.rich-text hr {
    margin: 1.5rem 0;
    color: var(--shade-5);
}