@font-face {
    font-family: "Playpen Sans";
    src: url("/fonts/Playpen_Sans/PlaypenSans-VariableFont_wght.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    font-family: "Playpen Sans", system-ui, sans-serif;

    --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

    /* Colors */
    --aquamarine: #00ffbb;
    --magenta: #ff00bb;

    --teal: #3fb89a;
    --teal-dark: #123b35;

    --plum: #c966ad;
    --plum-dark: #3a1f34;

    --bg: #0f1214;
    --surface: #181d20;
    --text: #e4e9e8;
    --border: #2b363a;

    --accent: var(--teal);
    --accent-2: var(--plum);
    --tint-header: var(--teal-dark);
    --deco: var(--aquamarine);
    --warn: var(--magenta);

    /* Background Art */
    --star: rgba(255, 255, 255, 0.55);
    --bg-art:
        radial-gradient(1px 1px at 23px 41px, var(--star), transparent) 0 0 / 211px 211px,
        radial-gradient(1px 1px at 97px 153px, var(--star), transparent) 0 0 / 263px 263px,
        radial-gradient(1.5px 1.5px at 151px 67px, var(--star), transparent) 0 0 / 349px 349px,
        radial-gradient(60rem 40rem at 12% -8%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%),
        radial-gradient(60rem 40rem at 92% 108%, color-mix(in srgb, var(--plum) 16%, transparent), transparent 70%);

    /* Bevels and shadows */
    --bevel-light: rgba(255, 255, 255, 0.06);
    --bevel-dark: rgba(0, 0, 0, 0.4);
    --hard-shadow: rgba(0, 0, 0, 0.5);

    /* Fluid spacing */
    --space-sm: clamp(8px, 2vw, 12px);
    --space-md: clamp(12px, 3vw, 24px);
    --space-lg: clamp(16px, 4vw, 48px);
}

/* Light mode */
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;

        --teal: #1b6f5b;
        --plum: #8a2f73;

        --bg: #d5dbd9;
        --surface: #e6eae8;
        --text: #1f2a2c;
        --border: #aebbb8;

        --accent: var(--plum);
        --accent-2: var(--teal);
        --tint-header: #e0bfd5;
        --deco: #c4008f;
        --warn: #9c3d00;
        --star: rgba(31, 42, 44, 0.35);

        --bevel-light: rgba(255, 255, 255, 0.5);
        --bevel-dark: rgba(0, 0, 0, 0.12);
        --hard-shadow: rgba(31, 42, 44, 0.28);
    }
}

[data-theme="amber"] {
    --accent: #e8a33d;
    --accent-2: #4da3e0;
    --deco: #ffd166;
    --tint-header: #3a2a10;
}

@media (prefers-color-scheme: light) {
    [data-theme="amber"] {
        --accent: #8a5a00;
        --accent-2: #1d6fa8;
        --deco: #c77d00;
        --tint-header: #f0dcae;
    }
}