:root {
    --navy: #1f3a52;
    --navy-dark: #16283a;
    --red: #8e1f2e;
    --red-dark: #6f1622;

    --bg: #f6f5f1;
    --white: #fdfcf8;
    --surface: #efede4;

    --text: #1c1b17;
    --muted: #6b6a5e;
    --line: #d9d6c9;

    --green: #3c8d63;
    --orange: #c98725;
    --danger: #bc4750;

    --line-strong: #b3ae9d;
    --surface-alt: #e9e6da;
    --track: #e3e0d3;
    --rank: #c9c5b6;
    --tint-red: #f4e8e6;
    --tint-red-border: #d9b8ba;
    --warn-bg: #f4ecd9;
    --warn-border: #d9c396;
    --danger-bg: #f4e2e1;
    --danger-border: #d9a9ab;
    --profile-purple: #6a5a8a;
    --dot: #1f3a52;
    --on-navy: #ffffff;

        --badge-ja-bg: #2a6d4d;
    --badge-nein-bg: #a83b45;
    --badge-fg: #ffffff;

    --shadow: 0 1px 3px rgba(28, 27, 23, .07);
    --shadow-hover: 0 3px 10px rgba(28, 27, 23, .10);

    --radius: 4px;
    --radius-small: 3px;

    --transition: .18s ease;

    --font:
        "Public Sans",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-serif:
        "Newsreader",
        Georgia,
        "Times New Roman",
        serif;
}

@media (prefers-color-scheme: dark) {

    :root:not([data-theme="light"]) {
        --navy: #9bb3c6;
        --navy-dark: #dde3e8;
        --red: #c1707b;
        --red-dark: #d99199;

        --bg: #17150f;
        --white: #211f19;
        --surface: #2a271f;
        --surface-alt: #322f25;

        --text: #e9e6dc;
        --muted: #a8a495;
        --line: #423e33;
        --line-strong: #5a5546;

        --green: #6fae87;
        --orange: #d9ad5f;
        --danger: #cf8288;

        --track: #362f24;
        --rank: #5a5546;
        --tint-red: #2f2320;
        --tint-red-border: #5c433f;
        --warn-bg: #2b2417;
        --warn-border: #62502e;
        --danger-bg: #2b1f1e;
        --danger-border: #5c3f3f;
        --profile-purple: #a596c0;
        --dot: #9bb3c6;
        --on-navy: #17150f;

        --badge-ja-bg: #7fbd96;
        --badge-nein-bg: #d99298;
        --badge-fg: #17150f;

        --shadow: 0 1px 4px rgba(0, 0, 0, .4);
        --shadow-hover: 0 3px 12px rgba(0, 0, 0, .5);
    }
}

:root[data-theme="dark"] {
    --navy: #9bb3c6;
    --navy-dark: #dde3e8;
    --red: #c1707b;
    --red-dark: #d99199;

    --bg: #17150f;
    --white: #211f19;
    --surface: #2a271f;
    --surface-alt: #322f25;

    --text: #e9e6dc;
    --muted: #a8a495;
    --line: #423e33;
    --line-strong: #5a5546;

    --green: #6fae87;
    --orange: #d9ad5f;
    --danger: #cf8288;

    --track: #362f24;
    --rank: #5a5546;
    --tint-red: #2f2320;
    --tint-red-border: #5c433f;
    --warn-bg: #2b2417;
    --warn-border: #62502e;
    --danger-bg: #2b1f1e;
    --danger-border: #5c3f3f;
    --profile-purple: #a596c0;
    --dot: #9bb3c6;
    --on-navy: #17150f;

    --badge-ja-bg: #7fbd96;
    --badge-nein-bg: #d99298;
    --badge-fg: #17150f;

    --shadow: 0 1px 4px rgba(0, 0, 0, .4);
    --shadow-hover: 0 3px 12px rgba(0, 0, 0, .5);
}

:focus-visible {
        transition: none !important;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.theme-toggle {
    background: var(--surface);
    color: var(--muted);

    border: 1px solid var(--line);
    border-radius: 5px;

    padding: 7px 11px;

    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
    white-space: nowrap;

    transition: var(--transition);
}

.theme-toggle:hover {
    border-color: var(--line-strong);
    color: var(--text);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

button,
select,
textarea,
input {
    font: inherit;
}