html {
    font-family: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
}

.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.theme-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-switch-track {
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: rgb(148 163 184);
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    padding: 0.125rem;
}

.theme-switch-thumb {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 9999px;
    background: rgb(255 255 255);
    transform: translateX(0);
    transition: transform 0.2s ease;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
}

.theme-switch input:checked + .theme-switch-track {
    background: rgb(15 23 42);
}

.theme-switch input:checked + .theme-switch-track .theme-switch-thumb {
    transform: translateX(1.2rem);
}

/* Dark mode readability fallback for shared UI blocks */
.dark header,
.dark aside,
.dark main {
    color: rgb(241 245 249);
}

.dark table {
    color: rgb(241 245 249);
}

.dark thead {
    color: rgb(226 232 240);
}

.dark input:not([type="checkbox"]):not([type="radio"]),
.dark select,
.dark textarea {
    color: rgb(241 245 249);
    background-color: rgb(15 23 42);
    border-color: rgb(71 85 105);
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: rgb(148 163 184);
}

/* Tailwind CDN dark-mode fallback for legacy/light-only utility usage */
.dark .bg-white {
    background-color: rgb(17 24 39) !important;
}

.dark .text-black,
.dark .text-slate-900,
.dark .text-gray-900 {
    color: rgb(255 255 255) !important;
}

.dark .text-gray-700,
.dark .text-slate-700,
.dark .text-slate-600 {
    color: rgb(209 213 219) !important;
}

.dark .border-gray-200,
.dark .border-slate-200,
.dark .border-slate-300 {
    border-color: rgb(55 65 81) !important;
}