/* MedicalTV Themes: night/day + accent presets * Works via * Non-breaking: overrides CSS variables consumed by mtv-uiux.css. */ html{ color-scheme: dark; } /* Light mode: flip system color-scheme and variables */ html[data-mtv-mode="light"]{ color-scheme: light; --mtv-bg:#f8fafc; --mtv-bg2:#eef2ff; --mtv-surface:rgba(255,255,255,.78); --mtv-surface2:rgba(255,255,255,.60); --mtv-border:rgba(15,23,42,.14); --mtv-border2:rgba(15,23,42,.10); --mtv-text:#0f172a; --mtv-muted:rgba(15,23,42,.70); } /* Accents (affect primary buttons/chips in mtv-uiux.css) */ html[data-mtv-accent="ocean"]{ --mtv-primary:#4f46e5; --mtv-primary2:#6366f1; } html[data-mtv-accent="emerald"]{ --mtv-primary:#16a34a; --mtv-primary2:#22c55e; } html[data-mtv-accent="violet"]{ --mtv-primary:#7c3aed; --mtv-primary2:#a855f7; } html[data-mtv-accent="sunset"]{ --mtv-primary:#f97316; --mtv-primary2:#f59e0b; } /* Make cards/inputs readable in light mode (Tailwind utility pages may hardcode slate text) */ html[data-mtv-mode="light"] .text-slate-100, html[data-mtv-mode="light"] .text-slate-200, html[data-mtv-mode="light"] .text-slate-300, html[data-mtv-mode="light"] .text-slate-400{ color: var(--mtv-text) !important; } html[data-mtv-mode="light"] .bg-white\/5, html[data-mtv-mode="light"] .bg-white\/10{ background: var(--mtv-surface) !important; } html[data-mtv-mode="light"] .border-white\/10{ border-color: var(--mtv-border) !important; } /* Theme popover UI */ .mtv-theme-panel{ position:absolute; right:0; top:calc(100% + 10px); width:min(320px, 92vw); background: rgba(15,23,42,.92); border:1px solid rgba(148,163,184,.28); border-radius: 16px; padding: 12px; box-shadow: 0 22px 60px rgba(0,0,0,.45); backdrop-filter: blur(14px); z-index: 2147483646; } html[data-mtv-mode="light"] .mtv-theme-panel{ background: rgba(255,255,255,.92); border-color: rgba(15,23,42,.14); box-shadow: 0 22px 60px rgba(15,23,42,.18); } .mtv-theme-section{ padding: 8px 8px 10px; border-radius: 14px; } .mtv-theme-section + .mtv-theme-section{ margin-top: 6px; } .mtv-theme-h{ font: 800 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial; letter-spacing: .02em; opacity: .85; margin-bottom: 8px; } .mtv-theme-row{ display:flex; gap:8px; } .mtv-theme-pill{ flex:1; border-radius: 999px; padding: 8px 10px; border: 1px solid rgba(148,163,184,.26); background: rgba(255,255,255,.06); color: inherit; font: 800 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial; } .mtv-theme-pill:hover{ background: rgba(255,255,255,.10); } .mtv-theme-pill.is-active{ border-color: rgba(99,102,241,.55); box-shadow: 0 0 0 2px rgba(99,102,241,.18) inset; } .mtv-theme-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .mtv-theme-swatch{ display:flex; align-items:center; justify-content:flex-start; gap:8px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(148,163,184,.26); background: rgba(255,255,255,.06); color: inherit; font: 800 13px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial; } .mtv-theme-swatch:hover{ background: rgba(255,255,255,.10); } .mtv-theme-swatch span{ width: 14px; height: 14px; border-radius: 999px; background: var(--mtv-primary); box-shadow: 0 0 0 3px rgba(255,255,255,.08); } .mtv-theme-swatch.is-active{ border-color: rgba(99,102,241,.55); box-shadow: 0 0 0 2px rgba(99,102,241,.18) inset; } html[data-mtv-mode="light"] .mtv-theme-pill, html[data-mtv-mode="light"] .mtv-theme-swatch{ background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.14); } html[data-mtv-mode="light"] .mtv-theme-pill:hover, html[data-mtv-mode="light"] .mtv-theme-swatch:hover{ background: rgba(15,23,42,.06); }