/* Shared light/dark color contract. Existing views keep their semantic utility
   classes; this layer gives the previously dark-only palette a light meaning. */
:root {
  --mm-page: #0f1117;
  --mm-surface: #111827;
  --mm-surface-soft: #1f2937;
  --mm-border: #1f2937;
  --mm-border-strong: #374151;
  --mm-text: #f3f4f6;
  --mm-text-soft: #d1d5db;
  --mm-muted: #9ca3af;
  --mm-action-muted: #6b7280;
}

html:not(.dark) {
  --mm-page: #f8fafc;
  --mm-surface: #ffffff;
  --mm-surface-soft: #f1f5f9;
  --mm-border: #e2e8f0;
  --mm-border-strong: #cbd5e1;
  --mm-text: #0f172a;
  --mm-text-soft: #334155;
  --mm-muted: #64748b;
  --mm-action-muted: #64748b;
}

.mm-project-edit { color: var(--mm-action-muted); }

html:not(.dark) body { background:#f8fafc !important; color:#0f172a; }

/* Neutral surfaces */
html:not(.dark) .bg-gray-950,
html:not(.dark) [class*="bg-gray-950/"] { background-color:#f8fafc !important; }
html:not(.dark) .bg-gray-900,
html:not(.dark) [class*="bg-gray-900/"] { background-color:#ffffff !important; }
html:not(.dark) .bg-gray-800,
html:not(.dark) [class*="bg-gray-800/"] { background-color:#f1f5f9 !important; }
html:not(.dark) .bg-gray-700,
html:not(.dark) [class*="bg-gray-700/"] { background-color:#e2e8f0 !important; }
html:not(.dark) .bg-gray-600 { background-color:#cbd5e1 !important; }
html:not(.dark) [class*="hover:bg-gray-9"]:hover,
html:not(.dark) [class*="hover:bg-gray-8"]:hover { background-color:#f1f5f9 !important; }
html:not(.dark) [class*="hover:bg-gray-7"]:hover { background-color:#e2e8f0 !important; }

/* Neutral text and form placeholders */
html:not(.dark) .text-white,
html:not(.dark) .text-gray-100 { color:#0f172a !important; }
html:not(.dark) .text-gray-200 { color:#1e293b !important; }
html:not(.dark) .text-gray-300 { color:#334155 !important; }
html:not(.dark) .text-gray-400 { color:#475569 !important; }
html:not(.dark) .text-gray-500,
html:not(.dark) .text-gray-600,
html:not(.dark) .text-gray-700 { color:#64748b !important; }
html:not(.dark) [class*="hover:text-white"]:hover { color:#0f172a !important; }
html:not(.dark) .placeholder-gray-400::placeholder,
html:not(.dark) .placeholder-gray-500::placeholder,
html:not(.dark) .placeholder-gray-600::placeholder { color:#64748b !important; opacity:1; }

/* Neutral borders/dividers */
html:not(.dark) .border-gray-900,
html:not(.dark) .border-gray-800,
html:not(.dark) [class*="border-gray-800/"] { border-color:#e2e8f0 !important; }
html:not(.dark) .border-gray-700,
html:not(.dark) [class*="border-gray-700/"] { border-color:#cbd5e1 !important; }
html:not(.dark) .border-gray-600,
html:not(.dark) .border-gray-500 { border-color:#94a3b8 !important; }
html:not(.dark) .divide-gray-900 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) .divide-gray-800 > :not([hidden]) ~ :not([hidden]),
html:not(.dark) [class*="divide-gray-800/"] > :not([hidden]) ~ :not([hidden]) { border-color:#e2e8f0 !important; }
html:not(.dark) [class*="hover:border-gray-8"]:hover,
html:not(.dark) [class*="hover:border-gray-7"]:hover { border-color:#cbd5e1 !important; }
html:not(.dark) [class*="hover:border-gray-6"]:hover { border-color:#94a3b8 !important; }

/* Dark semantic callouts become light tints, with accessible dark labels. */
html:not(.dark) [class*="bg-red-9"], html:not(.dark) [class*="bg-red-950"] { background-color:#fef2f2 !important; }
html:not(.dark) [class*="bg-amber-9"], html:not(.dark) [class*="bg-amber-950"],
html:not(.dark) [class*="bg-yellow-9"] { background-color:#fffbeb !important; }
html:not(.dark) [class*="bg-green-9"], html:not(.dark) [class*="bg-green-950"],
html:not(.dark) [class*="bg-emerald-9"], html:not(.dark) [class*="bg-emerald-950"] { background-color:#ecfdf5 !important; }
html:not(.dark) [class*="bg-blue-9"], html:not(.dark) [class*="bg-blue-950"],
html:not(.dark) [class*="bg-sky-9"], html:not(.dark) [class*="bg-sky-950"] { background-color:#eff6ff !important; }
html:not(.dark) [class*="bg-violet-9"], html:not(.dark) [class*="bg-violet-950"],
html:not(.dark) [class*="bg-purple-9"], html:not(.dark) [class*="bg-indigo-9"] { background-color:#f5f3ff !important; }
html:not(.dark) [class*="bg-orange-9"] { background-color:#fff7ed !important; }

html:not(.dark) [class*="text-red-1"], html:not(.dark) [class*="text-red-2"],
html:not(.dark) [class*="text-red-3"], html:not(.dark) .text-red-400 { color:#b91c1c !important; }
html:not(.dark) [class*="text-amber-1"], html:not(.dark) [class*="text-amber-2"],
html:not(.dark) [class*="text-amber-3"], html:not(.dark) .text-amber-400,
html:not(.dark) .text-amber-500 { color:#92400e !important; }
html:not(.dark) [class*="text-yellow-2"], html:not(.dark) .text-yellow-400,
html:not(.dark) .text-yellow-500 { color:#854d0e !important; }
html:not(.dark) [class*="text-green-2"], html:not(.dark) [class*="text-green-3"],
html:not(.dark) .text-green-400, html:not(.dark) [class*="text-emerald-2"],
html:not(.dark) [class*="text-emerald-3"], html:not(.dark) .text-emerald-400,
html:not(.dark) .text-emerald-500 { color:#047857 !important; }
html:not(.dark) [class*="text-blue-2"], html:not(.dark) [class*="text-blue-3"],
html:not(.dark) .text-blue-400, html:not(.dark) [class*="text-sky-1"],
html:not(.dark) [class*="text-sky-3"], html:not(.dark) .text-sky-400 { color:#1d4ed8 !important; }
html:not(.dark) [class*="text-violet-2"], html:not(.dark) [class*="text-violet-3"],
html:not(.dark) .text-violet-400, html:not(.dark) [class*="text-purple-2"],
html:not(.dark) .text-purple-400, html:not(.dark) [class*="text-indigo-3"],
html:not(.dark) .text-indigo-400 { color:#6d28d9 !important; }
html:not(.dark) [class*="text-orange-3"], html:not(.dark) .text-orange-400 { color:#c2410c !important; }

/* Customer text shades are scheme-specific and guaranteed against the real
   light surface by brandTheme.js. Built-in themes retain their established
   darker light-mode mapping because their variables are static. */
html:not(.dark):not([data-customer-brand]) .text-brand-300,
html:not(.dark):not([data-customer-brand]) .text-brand-400 { color:var(--brand-700) !important; }
html:not(.dark):not([data-customer-brand]) [style*="color:var(--brand-300)"],
html:not(.dark):not([data-customer-brand]) [style*="color: var(--brand-300)"] { color:var(--brand-800) !important; }
html:not(.dark):not([data-customer-brand]) [style*="color:var(--brand-400)"],
html:not(.dark):not([data-customer-brand]) [style*="color: var(--brand-400)"] { color:var(--brand-700) !important; }
html:not(.dark):not([data-customer-brand]) [class*="hover:text-brand-3"]:hover,
html:not(.dark):not([data-customer-brand]) [class*="hover:text-brand-4"]:hover { color:var(--brand-800) !important; }
html:not(.dark) [class*="bg-brand-8"] { background-color:rgb(var(--brand-500-rgb) / .10) !important; }

/* Preserve white labels on saturated action buttons. */
html:not(.dark) [style*="background:var(--brand-"] .text-white,
html:not(.dark) [style*="background:var(--brand-"].text-white,
html:not(.dark) [class*="bg-brand-"].text-white,
html:not(.dark) [class*="bg-red-5"].text-white,
html:not(.dark) [class*="bg-red-6"].text-white,
html:not(.dark) [class*="bg-red-7"].text-white,
html:not(.dark) [class*="bg-blue-5"].text-white,
html:not(.dark) [class*="bg-blue-6"].text-white,
html:not(.dark) [class*="bg-blue-7"].text-white,
html:not(.dark) [class*="bg-violet-5"].text-white,
html:not(.dark) [class*="bg-violet-6"].text-white,
html:not(.dark) [class*="bg-violet-7"].text-white,
html:not(.dark) [class*="bg-green-5"].text-white,
html:not(.dark) [class*="bg-green-6"].text-white,
html:not(.dark) [class*="bg-green-7"].text-white { color:#ffffff !important; }

/* Layout-owned components and legacy inline grayscale declarations. */
html:not(.dark) .desktop-sidebar { box-shadow:none; }
html:not(.dark) .desktop-sidebar.is-expanded { box-shadow:16px 0 32px rgb(15 23 42 / .10); }
html:not(.dark) .sidebar-foot { border-top-color:#e2e8f0; }
html:not(.dark) .sidebar-scroll { scrollbar-color:#cbd5e1 transparent; }
html:not(.dark) .sidebar-link { color:#64748b; }
html:not(.dark) .sidebar-link:hover { color:#0f172a; background:#f1f5f9; }
html:not(.dark) .sidebar-link.active,
html:not(.dark) .mobile-nav-link.active { color:var(--brand-800); }
html:not(.dark) .settings-tab-btn:not([aria-selected="true"]) { color:#64748b; }
html:not(.dark) .settings-tab-btn[aria-selected="true"] { color:var(--brand-800); border-color:var(--brand-700); }
html:not(.dark) .setting-btn.active-setting { color:var(--brand-800); border-color:var(--brand-700); }
html:not(.dark) .heute-primary-action,
html:not(.dark) .heute-primary-action--button { color:var(--brand-800); }
html:not(.dark) .mobile-nav-link { color:#334155; }
html:not(.dark) .mobile-nav-link:hover { background:#f1f5f9; color:#0f172a; }
html:not(.dark) .mobile-nav-dialog { border-color:#e2e8f0; background:#ffffff; color:#0f172a; }
html:not(.dark) .mm-letter-avatar { background:#f1f5f9; border-color:#cbd5e1; color:#334155; }
html:not(.dark) ::-webkit-scrollbar-track { background:#f1f5f9; }
html:not(.dark) ::-webkit-scrollbar-thumb { background:#cbd5e1; }

html:not(.dark) [style*="color:#f3f4f6"], html:not(.dark) [style*="color: #f3f4f6"],
html:not(.dark) [style*="color:#e5e7eb"], html:not(.dark) [style*="color: #e5e7eb"],
html:not(.dark) [style*="color:#d1d5db"], html:not(.dark) [style*="color: #d1d5db"] { color:#1e293b !important; }
html:not(.dark) [style*="color:#9ca3af"], html:not(.dark) [style*="color: #9ca3af"],
html:not(.dark) [style*="color:#6b7280"], html:not(.dark) [style*="color: #6b7280"],
html:not(.dark) [style*="color:#4b5563"], html:not(.dark) [style*="color: #4b5563"],
html:not(.dark) [style*="color:#374151"], html:not(.dark) [style*="color: #374151"] { color:#64748b !important; }
html:not(.dark) [style*="background:#0d0f15"], html:not(.dark) [style*="background: #0d0f15"],
html:not(.dark) [style*="background:#111827"], html:not(.dark) [style*="background: #111827"] { background:#ffffff !important; }
html:not(.dark) [style*="background:#1a1d27"], html:not(.dark) [style*="background: #1a1d27"],
html:not(.dark) [style*="background:#1f2937"], html:not(.dark) [style*="background: #1f2937"] { background:#f1f5f9 !important; }
html:not(.dark) [style*="border:1px solid #1f2937"], html:not(.dark) [style*="border-bottom:1px solid #1f2937"] { border-color:#e2e8f0 !important; }
html:not(.dark) [style*="border:1px solid #374151"] { border-color:#cbd5e1 !important; }
html:not(.dark) [style*="background:#451a03"] { background:#fffbeb !important; color:#92400e !important; }
html:not(.dark) [style*="background:#052e16"] { background:#ecfdf5 !important; color:#047857 !important; }

html:not(.dark) .mm-toast { background:rgb(255 255 255 / .98); border-color:#e2e8f0; box-shadow:0 12px 48px rgb(15 23 42 / .18); }
html:not(.dark) .mm-toast-title { color:#0f172a; }
html:not(.dark) .mm-toast-msg { color:#475569; }
html:not(.dark) .mm-toast-close { color:#64748b; }

/* Legacy admin view owns a small CSS component system after this stylesheet. */
html:not(.dark) .user-item { border-color:#e2e8f0; }
html:not(.dark) .user-item:hover { background:#f1f5f9; }
html:not(.dark) .user-item.active { background:#e2e8f0; }
html:not(.dark) .tab-pill { color:#64748b; }
html:not(.dark) .tab-pill:hover { color:#0f172a; background:#f1f5f9; }
html:not(.dark) .tab-pill.active { color:var(--brand-800); background:rgb(var(--brand-500-rgb) / .12); }
html:not(.dark) input[type="text"].admin-input,
html:not(.dark) input[type="password"].admin-input { background:#ffffff; border-color:#cbd5e1; color:#1e293b; }
html:not(.dark) .admin-label { color:#64748b; }
html:not(.dark) .admin-btn-ghost { border-color:#cbd5e1; color:#475569; }

/* Live-UI views intentionally have their own visual language. They still obey
   the account color mode, including their generated/arbitrary color classes. */
html:not(.dark) .mbd {
  --demo-ink:#0f172a;
  background:radial-gradient(circle at 88% -8%, rgba(var(--demo-accent-rgb), .08), transparent 30rem), #f8fafc;
}
html:not(.dark) .mbd-panel,
html:not(.dark) .mbd-card { background:#ffffff; border-color:#dbe3dc; }
html:not(.dark) .mbd-secondary { background:#f1f5f9; border-color:#cbd5e1; color:#1e293b; }
html:not(.dark) .mbd-input { background:#ffffff; color:#0f172a; border-color:#cbd5e1; }
html:not(.dark) .mbd-route::before { background:#cbd5e1; }
html:not(.dark) .mbd-route-dock { background:#f1f5f9; }
html:not(.dark) .mbd-motion-segments { border-color:#cbd5e1; background:#ffffff; }
html:not(.dark) .mbd-motion-choice,
html:not(.dark) .mbd-effect-choice { color:#475569; }
html:not(.dark) .mbd-tree-branch { border-color:#94a3b8; color:#334155; }
html:not(.dark) .mbd [class*="border-[#"] { border-color:#dbe3dc !important; }
html:not(.dark) .mbd [class*="bg-[#"] { background-color:#ffffff !important; }
html:not(.dark) .mbd [class*="text-[#"] { color:#475569 !important; }
html:not(.dark) .mbd h1,
html:not(.dark) .mbd h2,
html:not(.dark) .mbd h3,
html:not(.dark) .mbd strong { color:#0f172a !important; }

html:not(.dark) .mbl {
  --mbl-accent:#527014;
  --mbl-accent-soft:#eef6dd;
  background:#f8fafc;
  color:#0f172a;
}
html:not(.dark) .mbl[data-accent="amber"] { --mbl-accent:#92400e; --mbl-accent-soft:#fffbeb; }
html:not(.dark) .mbl[data-accent="slate"] { --mbl-accent:#334155; --mbl-accent-soft:#f1f5f9; }
html:not(.dark) .mbl-panel,
html:not(.dark) .mbl-card { background:#ffffff; border-color:#dbe3dc; }
html:not(.dark) .mbl-select { background:#ffffff; border-color:#cbd5e1; color:#0f172a; }
html:not(.dark) .mbl-privacy { background:var(--mbl-accent-soft); border-color:color-mix(in srgb, var(--mbl-accent) 35%, #ffffff); }
html:not(.dark) .mbl-status,
html:not(.dark) #live-metrics > div { background:#ffffff !important; border-color:#dbe3dc !important; }
html:not(.dark) .mbl [class*="text-[#"] { color:#475569 !important; }
html:not(.dark) .mbl h1,
html:not(.dark) .mbl h2,
html:not(.dark) .mbl h3,
html:not(.dark) .mbl strong { color:#0f172a !important; }