:host(:not([data-theme="dark"])),
:root:not([data-theme="dark"]),
[data-theme="light"] {
    --s-white: #fff;
    --s-gold: #ede0b5;
    --s-green: #5e681f;
    --s-light-green: #9db313;
    /*#89924D;*/
    --s-dark-green: #39442b;
    --s-black: #131314;

    --s-red: #b20b0e;
    --s-dark-black: #000;

    --s-font-default: "Albert Sans", sans-serif;
    --s-font-accent: "Instrument Serif", serif;

    --spacing-xl: 1.5em;
    --spacing-l: 1em;
    --spacing-m: 0.5em;
    --spacing-s: 0.25em;

    --color-error: var(--s-red);
    --color-invert: var(--s-white);
    --color-primary: var(--s-green);
    --color-secondary: var(--s-green);
    --color-warning: rgba(197, 155, 8, 1);
    --color-hint: var(--s-light-green);
    --color-gold: var(--s-gold);

    --font-l: 1.25rem;
    --font-xl: 1.5rem;

    --pico-font-family: var(--s-font-default) !important;
    --pico-primary: var(--s-gold);
    --pico-primary-background: var(--s-green);
    --pico-primary-border: var(--s-green);
    --pico-primary-hover-background: var(--s-light-green);
    --pico-primary-hover-border: var(--s-light-green);
    --pico-primary-hover: var(--s-light-green);
    --pico-primary-hover-underline: var(--s-light-green);
    --pico-border-radius: 100px;
}

button,
[type="button"] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    --pico-primary-background: var(--s-green);
    --pico-primary-hover-background: var(--s-light-green);
    --pico-primary-border: transparent;
    --pico-primary-hover-border: transparent;
}

p {
    line-height: 150%;
}

p,
h2,
ul li {
    color: var(--s-black);
}

article {
    background: transparent;
    padding: 64px;
}

[data-theme="dark"] p,
[data-theme="dark"] h2,
[data-theme="dark"] ul li {
    color: var(--s-gold);
}

[data-theme="dark"] {

    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type=""],
    select {
        border: 0px solid transparent;
        background-color: transparent;
        border-bottom: 1px solid color-mix(in srgb, var(--s-gold) 60%, transparent);
        color: var(--s-gold);
        border-radius: 0;

        &:focus,
        &:hover {
            border-color: var(--s-gold);
            background-color: color-mix(in srgb,
                    var(--s-green) 60%,
                    transparent);
        }
    }
}

em {
    font-family: var(--s-font-accent);
    color: var(--s-light-green);
}

[x-cloak] {
    display: none !important;
}

@font-face {
    font-family: "Albert Sans";
    src:
        url("/static/fonts/AlbertSans-Thin.woff2") format("woff2"),
        url("/static/fonts/AlbertSans-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    loading: lazy;
}

@font-face {
    font-family: "Albert Sans";
    src:
        url("/static/fonts/AlbertSans-Regular.woff2") format("woff2"),
        url("/static/fonts/AlbertSans-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    loading: lazy;
}

@font-face {
    font-family: "Instrument Serif";
    src:
        url("/static/fonts/InstrumentSerif-Regular.woff2") format("woff2"),
        url("/static/fonts/InstrumentSerif-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    loading: lazy;
}

@font-face {
    font-family: "Instrument Serif";
    src:
        url("/static/fonts/InstrumentSerif-Italic.woff2") format("woff2"),
        url("/static/fonts/InstrumentSerif-Italic.woff") format("woff");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
    loading: lazy;
}