/* Theme tokens + light-mode remaps for the existing dark-first Tailwind classes */

html {
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

:root {
    --theme-page: oklch(97.4% 0.012 300);
    --theme-surface: oklch(99.5% 0.005 300);
    --theme-surface-muted: oklch(94.6% 0.016 300);
    --theme-surface-raised: oklch(100% 0.002 300);
    --theme-chip: oklch(92.8% 0.02 300);
    --theme-input: oklch(99.2% 0.006 300);
    --theme-text: oklch(23% 0.038 300);
    --theme-text-muted: oklch(40% 0.03 300);
    --theme-text-subtle: oklch(52% 0.022 300);
    --theme-border: oklch(88.5% 0.02 300);
    --theme-border-strong: oklch(81% 0.028 300);
    --theme-primary-soft: oklch(94% 0.04 300);
    --theme-primary-ink: oklch(46% 0.16 300);
    --theme-emerald-soft: oklch(95% 0.03 160);
    --theme-emerald-ink: oklch(42% 0.11 160);
    --theme-shadow: 0 10px 28px -18px oklch(30% 0.05 300 / 0.35);
}

html,
body {
    transition: background-color 180ms ease, color 180ms ease;
}

/* -------------------------------------------------------------------------
   Light mode: remap the dark-first utility classes used across templates
   ------------------------------------------------------------------------- */

html:not(.dark) body {
    background-color: var(--theme-page);
    color: var(--theme-text);
}

html:not(.dark) .bg-slate-900 { background-color: var(--theme-page); }
html:not(.dark) .bg-slate-900\/50,
html:not(.dark) .bg-slate-900\/60 { background-color: var(--theme-surface-muted); }
html:not(.dark) .bg-slate-900\/95 { background-color: color-mix(in oklch, var(--theme-surface) 92%, transparent); }

html:not(.dark) .bg-slate-800 { background-color: var(--theme-surface); }
html:not(.dark) .bg-slate-800\/30 { background-color: color-mix(in oklch, var(--theme-surface-muted) 70%, transparent); }
html:not(.dark) .bg-slate-800\/50 { background-color: var(--theme-surface-muted); }
html:not(.dark) .bg-slate-800\/80 { background-color: color-mix(in oklch, var(--theme-surface) 88%, transparent); }

html:not(.dark) .bg-slate-700,
html:not(.dark) .bg-slate-700\/50 { background-color: var(--theme-chip); }
html:not(.dark) .bg-slate-600 { background-color: oklch(44% 0.035 300); }

html:not(.dark) .hover\:bg-slate-600:hover { background-color: oklch(38% 0.04 300); }
html:not(.dark) .hover\:bg-slate-700:hover { background-color: var(--theme-surface-muted); }
html:not(.dark) .hover\:bg-slate-800:hover { background-color: var(--theme-surface-muted); }
html:not(.dark) .hover\:bg-slate-900:hover { background-color: var(--theme-chip); }

html:not(.dark) .text-white { color: var(--theme-text); }
html:not(.dark) .text-slate-100 { color: var(--theme-text); }
html:not(.dark) .text-slate-300 { color: var(--theme-text-muted); }
html:not(.dark) .text-slate-400 { color: var(--theme-text-subtle); }
html:not(.dark) .text-slate-500 { color: oklch(58% 0.02 300); }
html:not(.dark) .text-slate-600 { color: oklch(64% 0.018 300); }

html:not(.dark) .hover\:text-white:hover { color: var(--theme-text); }

html:not(.dark) .placeholder-slate-400::placeholder,
html:not(.dark) .placeholder-slate-500::placeholder {
    color: var(--theme-text-subtle);
}

html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-700 { border-color: var(--theme-border); }
html:not(.dark) .border-slate-600 { border-color: var(--theme-border-strong); }
html:not(.dark) .divide-slate-700 > :not([hidden]) ~ :not([hidden]) { border-color: var(--theme-border); }

html:not(.dark) .ring-slate-900 { --tw-ring-color: var(--theme-page); }

/* Soft brand tints: dark translucent washes become paper-like chips */
html:not(.dark) .bg-primary-900\/30,
html:not(.dark) .bg-primary-900\/40,
html:not(.dark) .bg-primary-900\/50 { background-color: var(--theme-primary-soft); }
html:not(.dark) .hover\:bg-primary-900\/40:hover { background-color: color-mix(in oklch, var(--theme-primary-soft) 80%, var(--theme-primary-ink)); }
html:not(.dark) .text-primary-300 { color: var(--theme-primary-ink); }
html:not(.dark) .border-primary-800,
html:not(.dark) .border-primary-700,
html:not(.dark) .border-primary-700\/50 { border-color: oklch(82% 0.07 300); }

html:not(.dark) .bg-emerald-900\/20,
html:not(.dark) .bg-emerald-900\/30,
html:not(.dark) .bg-emerald-900\/50 { background-color: var(--theme-emerald-soft); }
html:not(.dark) .text-emerald-300 { color: var(--theme-emerald-ink); }
html:not(.dark) .border-emerald-800,
html:not(.dark) .border-emerald-800\/50,
html:not(.dark) .border-emerald-700 { border-color: oklch(80% 0.07 160); }

html:not(.dark) .bg-red-900\/20,
html:not(.dark) .bg-red-900\/30 { background-color: oklch(96% 0.025 20); }
html:not(.dark) .border-red-800,
html:not(.dark) .border-red-800\/50 { border-color: oklch(82% 0.07 20); }

html:not(.dark) .bg-amber-900\/20,
html:not(.dark) .bg-amber-900\/30,
html:not(.dark) .bg-amber-900\/50 { background-color: oklch(96% 0.04 85); }
html:not(.dark) .border-amber-800 { border-color: oklch(82% 0.08 85); }

html:not(.dark) .bg-blue-900\/50 { background-color: oklch(95% 0.03 250); }
html:not(.dark) .border-blue-700 { border-color: oklch(82% 0.06 250); }

/* Keep white text on saturated actions, avatars, and toasts */
html:not(.dark) [class*="bg-primary-5"].text-white,
html:not(.dark) [class*="bg-primary-6"].text-white,
html:not(.dark) [class*="bg-primary-7"].text-white,
html:not(.dark) [class*="bg-emerald-6"].text-white,
html:not(.dark) [class*="bg-emerald-7"].text-white,
html:not(.dark) [class*="bg-amber-6"].text-white,
html:not(.dark) [class*="bg-amber-7"].text-white,
html:not(.dark) [class*="bg-red-6"].text-white,
html:not(.dark) [class*="bg-blue-6"].text-white,
html:not(.dark) [class*="from-primary-"].text-white,
html:not(.dark) [class*="bg-emerald-900"].text-white,
html:not(.dark) [class*="bg-red-900"].text-white,
html:not(.dark) [class*="bg-amber-900"].text-white,
html:not(.dark) [class*="bg-blue-900"].text-white,
html:not(.dark) .bg-slate-600.text-white {
    color: #fff;
}

html:not(.dark) [class*="hover:bg-primary-"]:hover,
html:not(.dark) [class*="hover:bg-emerald-"]:hover,
html:not(.dark) [class*="hover:bg-amber-"]:hover,
html:not(.dark) [class*="bg-primary-"] .text-white,
html:not(.dark) [class*="from-primary-"] .text-white,
html:not(.dark) [class*="bg-emerald-6"] .text-white,
html:not(.dark) [class*="bg-amber-6"] .text-white {
    color: #fff;
}

html:not(.dark) .prose-invert {
    color: var(--theme-text-muted);
}

/* Auth page atmosphere */
html:not(.dark) .theme-auth-wash {
    background-image: linear-gradient(160deg, oklch(95% 0.03 300) 0%, var(--theme-page) 42%, oklch(96% 0.02 280) 100%);
}

html.dark .theme-auth-wash {
    background-image: linear-gradient(to bottom right, rgb(76 29 149 / 0.2), rgb(15 23 42), rgb(15 23 42));
}

/* Theme toggle */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(51 65 85);
    background: rgb(30 41 59);
    color: rgb(148 163 184);
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.theme-toggle:hover {
    background: rgb(51 65 85);
    color: #fff;
}

.theme-toggle:focus-visible {
    outline: 2px solid rgb(139 92 246);
    outline-offset: 2px;
}

html:not(.dark) .theme-toggle {
    border-color: var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text-muted);
}

html:not(.dark) .theme-toggle:hover {
    background: var(--theme-chip);
    color: var(--theme-text);
}

.theme-toggle-icon {
    width: 1.1rem;
    height: 1.1rem;
}

html.dark .theme-toggle-moon,
html:not(.dark) .theme-toggle-sun {
    display: none;
}

html.dark .theme-toggle-sun,
html:not(.dark) .theme-toggle-moon {
    display: block;
}

/* Plyr follows the active theme */
html:not(.dark) {
    --plyr-color-main: #7c3aed;
    --plyr-audio-controls-background: transparent;
    --plyr-audio-control-color: oklch(42% 0.03 300);
    --plyr-audio-control-color-hover: oklch(23% 0.038 300);
    --plyr-audio-range-track-background: oklch(88% 0.02 300);
    --plyr-audio-range-thumb-background: oklch(23% 0.038 300);
    --plyr-range-fill-background: #7c3aed;
    --plyr-audio-progress-buffered-background: oklch(82% 0.02 300);
}

html:not(.dark) .plyr--audio .plyr__controls,
html:not(.dark) .plyr--audio .plyr__time {
    color: var(--theme-text-muted) !important;
}

html:not(.dark) .plyr--audio .plyr__control svg {
    fill: var(--theme-text-muted) !important;
}

html:not(.dark) .plyr--audio .plyr__control:hover svg {
    fill: var(--theme-text) !important;
}

html:not(.dark) .plyr__progress__buffer {
    background: oklch(88% 0.02 300) !important;
    color: oklch(72% 0.02 300) !important;
}

html:not(.dark) .plyr__control:hover {
    background: rgb(139 92 246 / 0.14) !important;
    color: var(--theme-text) !important;
}

html:not(.dark) #global-audio-player {
    box-shadow: 0 -12px 40px oklch(30% 0.04 300 / 0.12);
}

/* Mobiscroll calendar in light mode */
html:not(.dark) .mbsc-ios.mbsc-datepicker .mbsc-calendar,
html:not(.dark) .mbsc-ios.mbsc-datepicker .mbsc-calendar-cell,
html:not(.dark) .mbsc-ios.mbsc-datepicker .mbsc-calendar-slide {
    background: var(--theme-surface) !important;
}

/* Cards pick up a paper-like lift in light mode */
html:not(.dark) .shadow-lg {
    box-shadow: var(--theme-shadow);
}

/* Dashboard welcome wash */
html:not(.dark) .from-primary-900\/50 {
    --tw-gradient-from: oklch(94% 0.045 300) var(--tw-gradient-from-position);
    --tw-gradient-to: oklch(94% 0.045 300 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html:not(.dark) .to-slate-800 {
    --tw-gradient-to: var(--theme-surface) var(--tw-gradient-to-position);
}

/* Quill light surfaces */
html:not(.dark) .ql-toolbar.ql-snow {
    background: var(--theme-surface);
    border-color: var(--theme-border);
}

html:not(.dark) .ql-container.ql-snow {
    background: var(--theme-input);
    border-color: var(--theme-border);
    color: var(--theme-text);
}

html:not(.dark) .ql-editor.ql-blank::before {
    color: var(--theme-text-subtle);
}