:root {
    --canvas: #F7F5EF;
    --surface: #FFFFFF;
    --surface-muted: #EEEAE0;
    --ink: #181714;
    --muted: #66635D;
    --subtle: #89857D;
    --line: rgba(24, 23, 20, 0.12);
    --accent: #FFB212;
}

body {
    background: var(--canvas);
    color: var(--ink);
}

nav > div {
    border-color: var(--line) !important;
    background: rgba(247, 245, 239, 0.88) !important;
    box-shadow: 0 18px 42px -24px rgba(24, 23, 20, 0.35) !important;
}

nav img {
    filter: brightness(.15);
}

nav a {
    color: var(--muted) !important;
}

nav a:hover {
    color: var(--ink) !important;
}

.tag {
    border-color: var(--line);
    background: rgba(255, 255, 255, .72);
    color: var(--muted) !important;
}

.tag::before {
    background: var(--canvas);
    box-shadow: 0 0 0 1px rgba(24, 23, 20, .35);
}

h1,
.legal h2,
.legal strong {
    color: var(--ink) !important;
}

section > div > p,
.legal p,
.legal li {
    color: var(--muted) !important;
}

.text-\[\#F5F5F0\] {
    color: var(--ink) !important;
}

.text-\[\#B0B0B0\],
.text-\[\#808080\] {
    color: var(--muted) !important;
}

.legal a {
    color: var(--ink);
}

.legal a:hover {
    color: #9A6200;
}

.policy-frame {
    border-color: var(--line);
    box-shadow: 0 18px 50px -34px rgba(24, 23, 20, .4);
}

footer {
    border-color: var(--line) !important;
}

footer p,
footer a {
    color: var(--muted) !important;
}

footer a:hover {
    color: var(--ink) !important;
}

html {
    scrollbar-color: #B8B2A7 var(--canvas);
}

::-webkit-scrollbar-track {
    background: var(--canvas);
}

::-webkit-scrollbar-thumb {
    background: #B8B2A7;
    border-color: var(--canvas);
}

.theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .7);
    color: var(--ink);
    transition: transform 160ms cubic-bezier(.23, 1, .32, 1), background 160ms ease, border-color 160ms ease;
}

.theme-toggle:active {
    transform: scale(.94);
}

.theme-icon-sun {
    display: none;
}

html[data-theme="dark"] .theme-icon-sun {
    display: inline;
}

html[data-theme="dark"] .theme-icon-moon {
    display: none;
}

html[data-theme="dark"] body {
    background: #141414;
    color: #F5F5F0;
}

html[data-theme="dark"] nav > div {
    border-color: rgba(255,255,255,.05) !important;
    background: rgba(20,20,20,.7) !important;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25) !important;
}

html[data-theme="dark"] nav img {
    filter: none;
}

html[data-theme="dark"] nav a {
    color: #B0B0B0 !important;
}

html[data-theme="dark"] nav a:hover {
    color: #FFF !important;
}

html[data-theme="dark"] .tag {
    border-color: #383838;
    background: #1a1a1a;
    color: #B0B0B0 !important;
}

html[data-theme="dark"] .tag::before {
    background: #141414;
    box-shadow: 0 0 0 1px rgba(255,255,255,.3);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] .legal h2,
html[data-theme="dark"] .legal strong,
html[data-theme="dark"] .text-\[\#F5F5F0\] {
    color: #F5F5F0 !important;
}

html[data-theme="dark"] section > div > p,
html[data-theme="dark"] .legal p,
html[data-theme="dark"] .legal li,
html[data-theme="dark"] .text-\[\#B0B0B0\],
html[data-theme="dark"] .text-\[\#808080\] {
    color: #B0B0B0 !important;
}

html[data-theme="dark"] .legal a {
    color: #F5F5F0;
}

html[data-theme="dark"] .policy-frame {
    border-color: #383838;
    box-shadow: none;
}

html[data-theme="dark"] footer {
    border-color: rgba(255,255,255,.03) !important;
}

html[data-theme="dark"] footer p,
html[data-theme="dark"] footer a {
    color: #808080 !important;
}

html[data-theme="dark"] .theme-toggle {
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.05);
    color: #F5F5F0;
}

html[data-theme="dark"] {
    scrollbar-color: #383838 #141414;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #141414;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #383838;
    border-color: #141414;
}