/* Dark mode palette. Two activation paths (Paulo + Alex 2026-04-20): 1. `` — explicit user choice (cookie- driven, per-device). Server renders this attribute from the `mltd_theme` cookie before JS runs, eliminating FOUC. 2. `@media (prefers-color-scheme: dark)` — system-level fallback when the user hasn't made a choice (no cookie, no explicit `data-theme="light"` attribute). Users who already have their OS set to dark get dark mode without ever touching the toggle. Loaded AFTER multitood.css so the overrides beat Tailwind's :root defaults on specificity as well as order. Tailwind CLI strips unfamiliar `--color-*` overrides from its own input, so this file lives outside the SCSS/Tailwind pipeline intentionally. Strategy: mirror the stone scale (stone-50 ↔ stone-950, stone-100 ↔ stone-900, etc.) so every existing `--color-stone-*` reference gets a sensible dark-mode counterpart with zero component changes. Multitood brand reds keep their OKLCH values — red at L≈55% has enough contrast on both light and dark backgrounds. Only the 50 token (very-light tints used as danger-wash backgrounds) gets lifted so it reads as a red wash on a dark surface instead of near-white. --color-white and --color-black flip because a lot of components set `background-color: var(--color-white)` — in dark mode that surface should be dark; similarly `color: var(--color-black)` should become near-white. This palette is a first cut for engineering; the design team can refine the exact OKLCH values in a follow-up without touching any of the consumer CSS. */ /* Flatpickr date/time picker — the library ships light-mode styles that look invisible on a dark surface (stone-200 text on white). Override the core selectors so the calendar reads like the rest of the dark app: dark background, near-white day labels, brand-red selection, dimmed prev/next-month days. Chevron arrows use `color` so currentColor fills the SVG strokes. */ [data-theme="dark"] .flatpickr-calendar { background-color: oklch(21.6% 0.006 56.043); color: oklch(97% 0.001 106.424); border: 1px solid oklch(26.8% 0.007 34.298); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .flatpickr-calendar.arrowTop:before, [data-theme="dark"] .flatpickr-calendar.arrowTop:after, [data-theme="dark"] .flatpickr-calendar.arrowBottom:before, [data-theme="dark"] .flatpickr-calendar.arrowBottom:after { border-bottom-color: oklch(21.6% 0.006 56.043); border-top-color: oklch(21.6% 0.006 56.043); } [data-theme="dark"] .flatpickr-months, [data-theme="dark"] .flatpickr-weekdays, [data-theme="dark"] .flatpickr-weekdaycontainer, [data-theme="dark"] .flatpickr-innerContainer, [data-theme="dark"] .flatpickr-rContainer, [data-theme="dark"] .flatpickr-days, [data-theme="dark"] .dayContainer, [data-theme="dark"] .flatpickr-time { background-color: transparent; color: oklch(97% 0.001 106.424); } [data-theme="dark"] .flatpickr-month, [data-theme="dark"] .flatpickr-current-month, [data-theme="dark"] .flatpickr-current-month input.cur-year, [data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months, [data-theme="dark"] .flatpickr-current-month .numInputWrapper input, [data-theme="dark"] .flatpickr-current-month .numInputWrapper span { color: oklch(97% 0.001 106.424); } [data-theme="dark"] .flatpickr-monthDropdown-months option { background-color: oklch(21.6% 0.006 56.043); color: oklch(97% 0.001 106.424); } [data-theme="dark"] .flatpickr-weekday { /* Weekday header (Mon, Tue, …) — subtle but readable. */ color: oklch(70.9% 0.01 56.259); } [data-theme="dark"] .flatpickr-months .flatpickr-prev-month, [data-theme="dark"] .flatpickr-months .flatpickr-next-month { color: oklch(86.9% 0.005 56.366); } [data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover, [data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover { color: oklch(97% 0.001 106.424); } [data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg, [data-theme="dark"] .flatpickr-months .flatpickr-next-month svg, [data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg path, [data-theme="dark"] .flatpickr-months .flatpickr-next-month svg path { fill: currentColor; } [data-theme="dark"] .flatpickr-day { /* Current-month days — near-white, easily readable on dark bg. */ color: oklch(97% 0.001 106.424); background: transparent; border-color: transparent; } [data-theme="dark"] .flatpickr-day:hover, [data-theme="dark"] .flatpickr-day:focus { background-color: oklch(26.8% 0.007 34.298); border-color: oklch(26.8% 0.007 34.298); color: oklch(97% 0.001 106.424); } [data-theme="dark"] .flatpickr-day.prevMonthDay, [data-theme="dark"] .flatpickr-day.nextMonthDay, [data-theme="dark"] .flatpickr-day.flatpickr-disabled { /* Out-of-month days — dim but still legible (was invisible on dark). */ color: oklch(44.4% 0.011 73.639); } [data-theme="dark"] .flatpickr-day.today { /* Outline for today keeps the brand accent readable. */ border-color: var(--color-multitood-500, oklch(62.98% 0.1807 23.89)); color: oklch(97% 0.001 106.424); } [data-theme="dark"] .flatpickr-time input, [data-theme="dark"] .flatpickr-time .flatpickr-time-separator, [data-theme="dark"] .flatpickr-time .flatpickr-am-pm { /* Bottom time row — matching day color so it doesn't disappear. */ color: oklch(97% 0.001 106.424); background: transparent; } [data-theme="dark"] .flatpickr-time input:hover, [data-theme="dark"] .flatpickr-time input:focus, [data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover, [data-theme="dark"] .flatpickr-time .flatpickr-am-pm:focus { background-color: oklch(26.8% 0.007 34.298); } /* Divider between calendar and time row. */ [data-theme="dark"] .flatpickr-innerContainer { border-bottom: 1px solid oklch(26.8% 0.007 34.298); } [data-theme="dark"] .flatpickr-time { border-top: 1px solid oklch(26.8% 0.007 34.298); } /* Modal card surfaces — Bulma's compiled rules hardcode `white` / `hsl(221, 14%, 100%)` on .modal-card-head and .modal-card-body (not tokenized), so they stay bright white in dark mode while text tokens flip to near-white = unreadable "white-on-white" labels (Paulo 2026-04-20 "modal copy still feels off in darkmode"). Flip the surfaces to match the rest of the dark UI and update the hardcoded 14% borders to a subtle dark-stone line. */ [data-theme="dark"] .modal-card-head, [data-theme="dark"] .modal-card-body { background-color: oklch(21.6% 0.006 56.043); } [data-theme="dark"] .modal-card-head { border-bottom-color: oklch(26.8% 0.007 34.298); } [data-theme="dark"] .modal-card-foot { background-color: oklch(14.7% 0.004 49.25); border-top-color: oklch(26.8% 0.007 34.298); } [data-theme="dark"] .modal-card-title { color: oklch(97% 0.001 106.424); } [data-theme="dark"] .modal-close { background-color: oklch(26.8% 0.007 34.298); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modal-card-head, :root:not([data-theme="light"]) .modal-card-body { background-color: oklch(21.6% 0.006 56.043); } :root:not([data-theme="light"]) .modal-card-head { border-bottom-color: oklch(26.8% 0.007 34.298); } :root:not([data-theme="light"]) .modal-card-foot { background-color: oklch(14.7% 0.004 49.25); border-top-color: oklch(26.8% 0.007 34.298); } :root:not([data-theme="light"]) .modal-card-title { color: oklch(97% 0.001 106.424); } :root:not([data-theme="light"]) .modal-close { background-color: oklch(26.8% 0.007 34.298); } } /* Colored-background buttons (is-primary, is-danger, is-info, is-link, is-success, is-warning, is-dark) use `color: var(--color-white)` in the compiled stylesheet. Because --color-white flips to near-black in dark mode, button labels become unreadable (Paulo 2026-04-20: "black on red looks diabolical"). Force #fff on these — the label is meant to be visually white regardless of theme since the button body is a brand / status colour. Two blocks: explicit data-theme selector + the prefers-color-scheme media fallback mirror. */ [data-theme="dark"] .button.is-primary, [data-theme="dark"] .button.is-danger, [data-theme="dark"] .button.is-info, [data-theme="dark"] .button.is-link, [data-theme="dark"] .button.is-success, [data-theme="dark"] .button.is-warning, [data-theme="dark"] .button.is-dark { color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .button.is-primary, :root:not([data-theme="light"]) .button.is-danger, :root:not([data-theme="light"]) .button.is-info, :root:not([data-theme="light"]) .button.is-link, :root:not([data-theme="light"]) .button.is-success, :root:not([data-theme="light"]) .button.is-warning, :root:not([data-theme="light"]) .button.is-dark { color: #fff; } } [data-theme="dark"] { /* Flipped stone scale — cross-assigned from the light values. */ --color-stone-50: oklch(14.7% 0.004 49.25); /* was stone-950 */ --color-stone-100: oklch(21.6% 0.006 56.043); /* was stone-900 */ --color-stone-200: oklch(26.8% 0.007 34.298); /* was stone-800 */ --color-stone-300: oklch(37.4% 0.01 67.558); /* was stone-700 */ --color-stone-400: oklch(44.4% 0.011 73.639); /* was stone-600 */ --color-stone-500: oklch(55.3% 0.013 58.071); /* middle, unchanged */ --color-stone-600: oklch(70.9% 0.01 56.259); /* was stone-400 */ --color-stone-700: oklch(86.9% 0.005 56.366); /* was stone-300 */ --color-stone-800: oklch(92.3% 0.003 48.717); /* was stone-200 */ --color-stone-900: oklch(97% 0.001 106.424); /* was stone-100 */ --color-stone-950: oklch(98.5% 0.001 106.423);/* was stone-50 */ /* Surfaces + high-contrast text flip. */ --color-white: oklch(14.7% 0.004 49.25); --color-black: oklch(98.5% 0.001 106.423); /* Brand reds — 50 is the only one that needs a lift for dark mode (it reads as off-white on light, need a dim red wash on dark). */ --color-multitood-50: oklch(26% 0.08 25); /* Zinc + neutral fallbacks referenced by a few components — flip so late-binding surfaces aren't unreadable on dark. */ --color-zinc-200: oklch(26.8% 0.007 34.298); --color-zinc-600: oklch(70.9% 0.01 56.259); --color-zinc-700: oklch(86.9% 0.005 56.366); --color-neutral-500: oklch(55.3% 0.013 58.071); --color-neutral-800: oklch(92.3% 0.003 48.717); /* Red scale — mostly error states. Lift 50/100 so the danger tint still reads red on dark, not near-white. */ --color-red-50: oklch(26% 0.08 20); --color-red-100: oklch(34% 0.1 19); /* Green / yellow 50s — used as "resolved" / "highlight" wash backgrounds. Same treatment as red-50: lift so the tint reads as a colored wash on a dark surface instead of near-white. */ --color-green-50: oklch(26% 0.06 150); --color-yellow-100: oklch(28% 0.08 95); /* Slate scale — the main app container uses `text-slate-950` as the default text color, and a few login / marketing surfaces reach for slate-900. Flip them like the stone scale so body copy stays legible on the dark background. */ --color-slate-100: oklch(12.9% 0.042 264.695); /* was slate-950 */ --color-slate-200: oklch(20.8% 0.042 265.755); /* was slate-900 */ --color-slate-300: oklch(37.2% 0.044 257.287); /* was slate-700 */ --color-slate-400: oklch(70.4% 0.04 256.788); /* unchanged mid */ --color-slate-700: oklch(86.9% 0.022 252.894); /* was slate-300 */ --color-slate-900: oklch(96.8% 0.007 247.896); /* was slate-100 */ --color-slate-950: oklch(98.5% 0.005 247); /* near-white */ color-scheme: dark; } :root { color-scheme: light; } /* System-preference fallback — when the user hasn't chosen a theme explicitly (no cookie, no data-theme attribute), honor the OS's `prefers-color-scheme`. Mirrors the explicit [data-theme="dark"] block above. The `:not([data-theme="light"])` guard lets an explicit light preference still win over system dark. This is a copy of the token block; kept inline rather than DRY-refactored because CSS can't combine media queries with selector unions cleanly. Edits to the tokens should land in BOTH blocks — there's a test on the MLTDUserPrefs adapter that exercises both paths. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-stone-50: oklch(14.7% 0.004 49.25); --color-stone-100: oklch(21.6% 0.006 56.043); --color-stone-200: oklch(26.8% 0.007 34.298); --color-stone-300: oklch(37.4% 0.01 67.558); --color-stone-400: oklch(44.4% 0.011 73.639); --color-stone-500: oklch(55.3% 0.013 58.071); --color-stone-600: oklch(70.9% 0.01 56.259); --color-stone-700: oklch(86.9% 0.005 56.366); --color-stone-800: oklch(92.3% 0.003 48.717); --color-stone-900: oklch(97% 0.001 106.424); --color-stone-950: oklch(98.5% 0.001 106.423); --color-white: oklch(14.7% 0.004 49.25); --color-black: oklch(98.5% 0.001 106.423); --color-multitood-50: oklch(26% 0.08 25); --color-zinc-200: oklch(26.8% 0.007 34.298); --color-zinc-600: oklch(70.9% 0.01 56.259); --color-zinc-700: oklch(86.9% 0.005 56.366); --color-neutral-500: oklch(55.3% 0.013 58.071); --color-neutral-800: oklch(92.3% 0.003 48.717); --color-red-50: oklch(26% 0.08 20); --color-red-100: oklch(34% 0.1 19); --color-green-50: oklch(26% 0.06 150); --color-yellow-100: oklch(28% 0.08 95); --color-slate-100: oklch(12.9% 0.042 264.695); --color-slate-200: oklch(20.8% 0.042 265.755); --color-slate-300: oklch(37.2% 0.044 257.287); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-700: oklch(86.9% 0.022 252.894); --color-slate-900: oklch(96.8% 0.007 247.896); --color-slate-950: oklch(98.5% 0.005 247); color-scheme: dark; } }