:root {
    color-scheme: dark;
    --color-ink: 15 14 12;
    --color-ink-light: 26 24 20;
    --color-ink-2: 212 207 199;
    --color-ink-3: 138 133 126;
    --color-ink-4: 107 103 97;
    --color-ink-muted: 138 133 126;
    --color-ink-faint: 107 103 97;
    --color-warm: 245 240 232;
    --color-warm-muted: 138 133 126;
    --color-surface: 26 24 20;
    --color-surface-2: 32 30 26;
    --color-surface-3: 36 34 30;
    --color-surface-raised: 36 34 30;
    --color-surface-active: 44 41 36;
    --color-border: rgba(245, 240, 232, 0.07);
    --color-border-2: rgba(245, 240, 232, 0.12);
    --color-border-strong: rgba(245, 240, 232, 0.15);
    --color-gold: 212 168 83;
    --color-accent: 212 168 83;
    --color-accent-3: 212 168 83 / 0.10;
    --color-accent-soft: 212 168 83 / 0.12;
    --color-green: 107 191 138;
    --color-green-3: 107 191 138 / 0.10;
    --color-red: 214 107 107;
    --color-red-3: 214 107 107 / 0.10;
    --color-danger: 214 107 107;
    --color-danger-soft: 214 107 107 / 0.12;
    --color-amber: 200 155 60;
    --color-amber-3: 200 155 60 / 0.10;
    --color-warning: 200 155 60;
    --color-warning-soft: 200 155 60 / 0.12;
    --color-blue: 107 163 214;
    --color-blue-3: 107 163 214 / 0.10;
}

.theme-app {
    color-scheme: dark;
    --color-ink: 245 240 232;
    --color-ink-light: 255 255 255;
}

.theme-light {
    color-scheme: light;
    --color-ink: 17 17 17;
    --color-ink-light: 17 17 17;
    --color-ink-muted: 107 106 103;
    --color-ink-faint: 168 167 163;
    --color-surface: 245 244 240;
    --color-surface-2: 250 250 247;
    --color-surface-3: 255 255 255;
    --color-surface-raised: 250 250 247;
    --color-surface-active: 255 255 255;
    --color-border: #E6E5E1;
    --color-border-2: #DAD8D2;
    --color-border-strong: #DAD8D2;
    --color-accent: 212 168 83;
    --color-accent-3: 250 240 219;
    --color-accent-soft: 250 240 219;
    --color-danger: 159 47 45;
    --color-danger-soft: 249 232 233;
    --color-warning: 139 109 31;
    --color-warning-soft: 247 241 225;
}

html { scroll-behavior: smooth; }
* { scrollbar-width: thin; scrollbar-color: rgba(245, 240, 232, 0.12) transparent; }
body { text-rendering: optimizeLegibility; }

.btn,
.btn-press,
.nav-link,
a,
button,
input,
select,
textarea { transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }

.btn,
.btn-press { transition-property: transform, background-color, border-color, color, opacity, box-shadow; transition-duration: 200ms; }
.btn:active { transform: scale(0.97); }
.btn-press:active { transform: scale(0.98); }

:focus-visible { outline: 2px solid rgb(var(--color-accent) / 0.75); outline-offset: 3px; }
::selection { background: rgb(var(--color-accent) / 0.26); color: rgb(var(--color-ink)); }

/* Stable fallbacks for CDN Tailwind custom tokens. Keeps badges/buttons visible even before CDN finishes compiling. */
.bg-surface { background-color: rgb(var(--color-surface)); }
.bg-surface-2 { background-color: rgb(var(--color-surface-2)); }
.bg-surface-3 { background-color: rgb(var(--color-surface-3)); }
.bg-surface-raised { background-color: rgb(var(--color-surface-raised)); }
.bg-surface-active { background-color: rgb(var(--color-surface-active)); }
.text-ink { color: rgb(var(--color-ink)); }
.text-ink-2 { color: rgb(var(--color-ink-2)); }
.text-ink-3 { color: rgb(var(--color-ink-3)); }
.text-ink-4 { color: rgb(var(--color-ink-4)); }
.text-ink-muted { color: rgb(var(--color-ink-muted)); }
.text-ink-faint { color: rgb(var(--color-ink-faint)); }
.text-warm { color: rgb(var(--color-warm)); }
.text-warm-muted { color: rgb(var(--color-warm-muted)); }
.bg-ink { background-color: rgb(var(--color-ink)); }
.bg-ink-light { background-color: rgb(var(--color-ink-light)); }
.border-border { border-color: var(--color-border); }
.border-border-2 { border-color: var(--color-border-2); }
.border-border-strong { border-color: var(--color-border-strong); }
.bg-accent { background-color: rgb(var(--color-accent)); }
.hover\:bg-\[\#E2BA5E\]:hover { background-color: #E2BA5E; }
.text-accent { color: rgb(var(--color-accent)); }
.border-accent { border-color: rgb(var(--color-accent)); }
.bg-accent-3 { background-color: rgb(var(--color-accent-3)); }
.bg-accent-soft { background-color: rgb(var(--color-accent-soft)); }
.bg-gold { background-color: rgb(var(--color-gold)); }
.text-gold { color: rgb(var(--color-gold)); }
.border-gold { border-color: rgb(var(--color-gold)); }
.text-green { color: rgb(var(--color-green)); }
.bg-green-3 { background-color: rgb(var(--color-green-3)); }
.border-green\/20 { border-color: rgb(var(--color-green) / 0.2); }
.text-red { color: rgb(var(--color-red)); }
.bg-red-3 { background-color: rgb(var(--color-red-3)); }
.border-red\/20 { border-color: rgb(var(--color-red) / 0.2); }
.text-amber { color: rgb(var(--color-amber)); }
.bg-amber-3 { background-color: rgb(var(--color-amber-3)); }
.text-blue { color: rgb(var(--color-blue)); }
.bg-blue-3 { background-color: rgb(var(--color-blue-3)); }
.text-danger { color: rgb(var(--color-danger)); }
.bg-danger-soft { background-color: rgb(var(--color-danger-soft)); }
.border-danger\/20 { border-color: rgb(var(--color-danger) / 0.2); }
.text-warning { color: rgb(var(--color-warning)); }
.bg-warning-soft { background-color: rgb(var(--color-warning-soft)); }

.status-badge,
[class*="bg-green-3"],
[class*="bg-red-3"],
[class*="bg-amber-3"],
[class*="bg-blue-3"] { color: currentColor; }

.fade-up { animation: fadeUp 0.5s cubic-bezier(0.32, 0.72, 0, 1) both; }
.fade-in { animation: fadeIn 0.5s cubic-bezier(0.32, 0.72, 0, 1) both; }
.fade-in-up { animation: fadeInUp 0.6s cubic-bezier(0.32, 0.72, 0, 1) both; }
.slide-in { animation: slideIn 0.3s cubic-bezier(0.32, 0.72, 0, 1) both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

.overlay { opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.drawer { transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
.drawer-open .overlay { opacity: 1; pointer-events: auto; }
.drawer-open .drawer { transform: translateX(0); }
@media (min-width: 1024px) { .overlay { display: none !important; } .drawer { transform: none !important; } }

@media (max-width: 640px) {
    .fade-up.flex.items-center.justify-between {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }

    .fade-up.flex.items-center.justify-between > a,
    .fade-up.flex.items-center.justify-between > button,
    .fade-up.flex.items-center.justify-between > form {
        width: 100%;
    }
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px rgb(var(--color-surface-3)) inset !important;
    -webkit-text-fill-color: rgb(var(--color-ink)) !important;
}