:root {
    --bg: #000;
    --bg-elev: #080808;
    --bg-elev-2: #101010;
    --bg-elev-3: #181818;
    --hl: rgb(255 255 255 / 10%);
    --hl-2: rgb(255 255 255 / 20%);
    --hl-3: rgb(255 255 255 / 36%);
    --text-1: #fff;
    --text-2: rgb(255 255 255 / 74%);
    --text-3: rgb(255 255 255 / 56%);
    --text-4: rgb(255 255 255 / 38%);
    --accent: #ffd400;
    --accent-dim: rgb(255 212 0 / 12%);
    --accent-mute: rgb(255 212 0 / 52%);
    --accent-deep: #ffd400;
    --signal-ok: #ffd400;
    --signal-warn: #ffd400;
    --signal-err: #ffd400;
    --site-max: 1180px;
    color-scheme: dark;
}

html {
    background: #000;
}

body {
    background-color: #000;
    color: #fff;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid #ffd400;
    outline-offset: 3px;
}

::selection {
    background: #ffd400;
    color: #000;
}

.nav {
    background: rgb(0 0 0 / 92%);
    border-bottom-color: rgb(255 255 255 / 14%);
}

.logo-mark {
    background: #000;
    border-radius: 0;
    color: #ffd400;
}

.btn,
.btn-sm,
.pill,
.seg,
.nav-user-pill,
.user-pill,
.kofi-btn,
.logout-btn,
.audio-control {
    border-radius: 0;
}

.btn-primary {
    background: #ffd400;
    color: #000;
}

.btn-primary:hover {
    background: #fff;
    color: #000;
}

.grid-bg {
    background-image:
        linear-gradient(to right, rgb(255 255 255 / 5%) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / 5%) 1px, transparent 1px);
    opacity: 0.55;
}

.status-indicator,
.dot,
.tick {
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}