/* ARIA black and white for the older Tailwind pages (admin, automation, affiliate portal,
   studio, onboarding, karen, co-admin, proposal and the legacy app).
   It repaints the colour classes those pages already use, so their markup stays untouched. */
:root {
  --bg: #ffffff; --ink: #000000; --ink2: #262626; --mut: #6f6f6f;
  --line: #e7e7e7; --line2: #d2d2d2; --soft: #f5f5f5; --soft2: #ececec;
  --inv: #000000; --on-inv: #ffffff;
  --serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg: #000000; --ink: #ffffff; --ink2: #dcdcdc; --mut: #8c8c8c;
  --line: #1c1c1c; --line2: #2e2e2e; --soft: #0d0d0d; --soft2: #171717;
  --inv: #ffffff; --on-inv: #000000;
  color-scheme: dark;
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

html body { background: var(--bg) !important; background-image: none !important; color: var(--ink2) !important; font-family: var(--sans) !important; -webkit-font-smoothing: antialiased; }
html body h1, html body h2, html body h3 { font-family: var(--serif) !important; font-weight: 400 !important; letter-spacing: -.01em !important; color: var(--ink) !important; }
html body .font-mono, html body code, html body pre { font-family: var(--mono) !important; }

/* Page and panel backgrounds */
html body[class*="bg-black"], html body[class*="bg-gray-9"], html body[class*="bg-slate-9"], html body[class*="bg-zinc-9"] { background-color: var(--bg) !important; background-image: none !important; }
html body [class*="bg-black"], html body [class*="bg-gray-9"], html body [class*="bg-slate-9"], html body [class*="bg-zinc-9"], html body [class*="bg-neutral-9"], html body [class*="bg-[#0"], html body [class*="bg-[#1"] { background-color: var(--soft) !important; background-image: none !important; }
html body [class*="bg-gray-8"], html body [class*="bg-slate-8"], html body [class*="bg-zinc-8"], html body [class*="bg-neutral-8"], html body [class*="bg-white/"], html body [class*="bg-gray-7"], html body [class*="bg-slate-7"] { background-color: var(--soft) !important; background-image: none !important; }
html body [class*="bg-gray-1"], html body [class*="bg-gray-2"], html body [class*="bg-slate-1"], html body [class*="bg-slate-2"] { background-color: var(--soft) !important; }
html body [class*="bg-gradient-to"] { background-image: none !important; background-color: transparent !important; }

/* Accent fills become solid black (white in dark mode) */
html body [class*="bg-cyan-"], html body [class*="bg-emerald-"], html body [class*="bg-green-"], html body [class*="bg-blue-"], html body [class*="bg-indigo-"], html body [class*="bg-violet-"], html body [class*="bg-purple-"], html body [class*="bg-teal-"], html body [class*="bg-sky-"], html body [class*="bg-amber-"], html body [class*="bg-yellow-"], html body [class*="bg-orange-"], html body [class*="bg-rose-"], html body [class*="bg-pink-"], html body [class*="bg-red-"] { background-color: var(--inv) !important; background-image: none !important; color: var(--on-inv) !important; border-color: var(--inv) !important; }
/* Faint tints (bg-cyan-500/10) stay quiet instead of turning solid */
html body [class*="/5"], html body [class*="/10"], html body [class*="/15"], html body [class*="/20"], html body [class*="/25"], html body [class*="/30"] { background-image: none !important; }
html body [class*="bg-cyan-500/"], html body [class*="bg-emerald-500/"], html body [class*="bg-green-500/"], html body [class*="bg-blue-500/"], html body [class*="bg-indigo-500/"], html body [class*="bg-purple-500/"], html body [class*="bg-amber-500/"], html body [class*="bg-yellow-500/"], html body [class*="bg-orange-500/"], html body [class*="bg-red-500/"], html body [class*="bg-rose-500/"], html body [class*="bg-emerald-600/"], html body [class*="bg-cyan-600/"] { background-color: var(--soft2) !important; color: var(--ink) !important; }

/* Text */
html body [class*="text-white"], html body [class*="text-gray-1"], html body [class*="text-gray-2"], html body [class*="text-slate-1"], html body [class*="text-slate-2"] { color: var(--ink) !important; }
html body [class*="text-gray-3"], html body [class*="text-gray-4"], html body [class*="text-gray-5"], html body [class*="text-slate-3"], html body [class*="text-slate-4"], html body [class*="text-slate-5"], html body [class*="text-zinc-4"] { color: var(--mut) !important; }
html body [class*="text-cyan-"], html body [class*="text-emerald-"], html body [class*="text-green-"], html body [class*="text-blue-"], html body [class*="text-indigo-"], html body [class*="text-violet-"], html body [class*="text-purple-"], html body [class*="text-teal-"], html body [class*="text-sky-"], html body [class*="text-amber-"], html body [class*="text-yellow-"], html body [class*="text-orange-"], html body [class*="text-rose-"], html body [class*="text-pink-"], html body [class*="text-red-"] { color: var(--ink) !important; }
html body [class*="text-black"] { color: var(--on-inv) !important; }

/* Lines, rings and shadows */
html body [class*="border-"] { border-color: var(--line) !important; }
html body [class*="border-white"], html body [class*="border-gray-6"], html body [class*="border-gray-7"], html body [class*="border-slate-6"], html body [class*="border-slate-7"] { border-color: var(--line2) !important; }
html body [class*="divide-"] > * + * { border-color: var(--line) !important; }
html body [class*="ring-"] { --tw-ring-color: var(--line2) !important; }
html body [class*="shadow-"] { box-shadow: none !important; }
html body [class*="backdrop-blur"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Form controls */
html body input, html body textarea, html body select { background-color: var(--bg) !important; color: var(--ink) !important; border-color: var(--line2) !important; font-family: var(--sans) !important; }
html body input:focus, html body textarea:focus, html body select:focus { border-color: var(--ink) !important; outline: none !important; box-shadow: none !important; }
html body input::placeholder, html body textarea::placeholder { color: var(--mut) !important; }
html body option { background: var(--bg); color: var(--ink); }
html body button { font-family: var(--sans) !important; }
html body table th { color: var(--mut) !important; font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: .1em; text-transform: uppercase; }
html body table td, html body table th { border-color: var(--line) !important; }
html body hr { border-color: var(--line) !important; }
html body a { color: inherit; }

/* Theme switch button added to these pages */
.mono-theme-fab { position: fixed; right: 16px; bottom: 16px; z-index: 9999; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line2) !important; border-radius: 999px; background: var(--bg) !important; color: var(--ink) !important; cursor: pointer; }
.mono-theme-fab:hover { border-color: var(--ink) !important; }
.mono-theme-fab svg { width: 20px; height: 20px; }
.mono-theme-fab .sun { display: none; }
html[data-theme="dark"] .mono-theme-fab .sun { display: block; }
html[data-theme="dark"] .mono-theme-fab .moon { display: none; }
@media print { .mono-theme-fab { display: none; } }

/* Gradient-filled headings would otherwise turn invisible once gradients are removed */
html body [class*="text-transparent"], html body [class*="bg-clip-text"] { -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; background: none !important; }
html body [class*="bg-black"][class*="text-"] { color: var(--ink) !important; }

/* Some older pages define their own colour names in an in-page Tailwind config
   (background, surface, on-surface, primary, secondary) and paint hex colours directly. */
html body[class*="bg-background"], html body[class*="bg-space"], html body[class*="bg-surface"] { background-color: var(--bg) !important; }
html body [class*="bg-background"], html body [class*="bg-space"] { background-color: var(--bg) !important; background-image: none !important; }
html body [class*="bg-surface"], html body [class*="bg-card"], html body .glass-card, html body .glass-panel { background-color: var(--soft) !important; background-image: none !important; border-color: var(--line) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
html body [class*="text-on-surface"], html body [class*="text-primary"], html body [class*="text-secondary"], html body [class*="text-accent"] { color: var(--ink) !important; }
html body [class*="text-muted"], html body [class*="text-on-surface-variant"] { color: var(--mut) !important; }
html body [class*="border-primary"], html body [class*="border-secondary"], html body [class*="border-accent"] { border-color: var(--line2) !important; }
html body [class*="bg-primary"], html body [class*="bg-secondary"], html body [class*="bg-accent"] { background-color: var(--inv) !important; color: var(--on-inv) !important; }
/* Direct hex colours in the page's own stylesheet */
html body [class*="bg-[#"], html body [style*="#0b0f19"], html body [style*="#070a11"], html body [style*="#02040A"] { background-color: var(--soft) !important; background-image: none !important; }
html body [class*="text-[#"] { color: var(--ink2) !important; }
html body #bg-video-container, html body video[autoplay][muted][loop] { display: none !important; }