:root {
    --color-ink: 23 32 51;
    --color-muted: 101 112 134;
    --color-line: 227 231 238;
    --color-canvas: 247 248 250;
    --color-surface: 255 255 255;
    --color-panel: 242 244 247;
}

html.dark {
    --color-ink: 232 237 245;
    --color-muted: 157 168 187;
    --color-line: 49 60 78;
    --color-canvas: 15 20 29;
    --color-surface: 22 29 41;
    --color-panel: 18 25 36;
}

html { color-scheme: light; }
html.dark { color-scheme: dark; }
html[dir="rtl"] { text-align: right; }
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="date"],
[dir="rtl"] code { direction: ltr; text-align: left; }
[dir="rtl"] [data-icon="chevron-right"] { transform: scaleX(-1); }
[dir="rtl"] .-space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1; }
@media (min-width: 640px) {
    [dir="rtl"] .sm\:divide-x > :not([hidden]) ~ :not([hidden]) { --tw-divide-x-reverse: 1; }
}
.dark ::selection { background: #29499b; color: #ffffff; }
.dark .scrollbar-thin { scrollbar-color: #4b5568 transparent; }
.dark .drag-target { outline-color: #6f91ff; background: #172554; }

.dark .bg-white { background-color: rgb(var(--color-surface)) !important; }
.dark .bg-brand .bg-white { background-color: #ffffff !important; }
.dark .bg-slate-50 { background-color: #151c28 !important; }
.dark .bg-slate-100 { background-color: #202938 !important; }
.dark .bg-slate-900 { background-color: #070b12 !important; }
.dark .bg-blue-50 { background-color: #172554 !important; }
.dark .bg-red-50 { background-color: #3b171b !important; }
.dark .bg-orange-50 { background-color: #382013 !important; }
.dark .bg-emerald-50 { background-color: #102d26 !important; }
.dark .bg-ink { background-color: #2356d8 !important; }
.dark .hover\:bg-slate-50:hover { background-color: #202938 !important; }
.dark .hover\:bg-slate-100:hover { background-color: #293345 !important; }
.dark .hover\:bg-blue-50:hover { background-color: #1e3470 !important; }
.dark .hover\:bg-red-50:hover { background-color: #4a1d22 !important; }
.dark .focus\:bg-white:focus { background-color: rgb(var(--color-surface)) !important; }

.dark .border-slate-200,
.dark .border-slate-300 { border-color: #465268 !important; }
.dark .border-blue-200 { border-color: #31509b !important; }
.dark .border-red-200 { border-color: #7f3540 !important; }
.dark .border-orange-200 { border-color: #815028 !important; }
.dark .border-slate-700 { border-color: #596579 !important; }

.dark .text-slate-400 { color: #a6b0c0 !important; }
.dark .text-slate-600 { color: #c2cad6 !important; }
.dark .text-blue-700,
.dark .text-blue-800 { color: #9fbbff !important; }
.dark .text-blue-950 { color: #d9e4ff !important; }
.dark .text-red-600,
.dark .text-red-700 { color: #ff9ca6 !important; }
.dark .text-orange-700 { color: #ffc084 !important; }
.dark .text-emerald-700 { color: #7de0bd !important; }

.dark input:not([type="color"]),
.dark select,
.dark textarea {
    background-color: rgb(var(--color-surface));
    color: rgb(var(--color-ink));
    border-color: rgb(var(--color-line));
}
.dark input::placeholder,
.dark textarea::placeholder { color: #77849a; }
.detail-due-control:focus-within { border-radius: .25rem; outline: 2px solid #60a5fa; outline-offset: 2px; }
.dark input[type="date"] { color-scheme: dark; }
.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .7; }

/* The application sidebars keep one consistent navy treatment in both themes. */
.planora-sidebar {
    background-color: #151d29 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}
.planora-sidebar .border-line { border-color: rgba(255, 255, 255, .12) !important; }
.planora-sidebar .text-ink { color: #ffffff !important; }
.planora-sidebar .text-muted,
.planora-sidebar .text-slate-300,
.planora-sidebar .text-slate-400 { color: #ffffff !important; }
.planora-sidebar .bg-blue-50 {
    background-color: rgba(255, 255, 255, .1) !important;
    color: #ffffff !important;
}
.planora-sidebar .bg-slate-100 { background-color: rgba(255, 255, 255, .1) !important; }
.planora-sidebar .bg-white { background-color: #ffffff !important; }
.planora-sidebar .hover\:bg-slate-50:hover,
.planora-sidebar .hover\:bg-slate-100:hover { background-color: rgba(255, 255, 255, .1) !important; }
.planora-sidebar .hover\:text-ink:hover { color: #ffffff !important; }