/* ============================================================================
   MUSIC OS — Tailwind utility re-ownership for Music Pal and Music Agent (R5, Fable 5.1 candidate)
   Both apps hard-code Tailwind colour utilities (slate/white/cyan/emerald/red/…) in ~1 MB of JSX. Rewriting every
   className would be an unrelated rewrite, so under Riviera Dusk / Daylight the utility vocabulary itself is
   re-mapped to design tokens. Every rule is scoped to html[data-theme="riviera"|"daylight"]; Original ("classic")
   receives nothing, so native appearance is untouched.
   Selector pattern: :is([class^="P"],[class*=" P"]) matches a utility at a class-token boundary only, so
   hover:/focus:/md: variants are NOT matched by the base rule (they are handled explicitly).
   Inline style={{color}} values written from user data (mandate colours, chart colours) keep winning: no !important
   is used on colour properties except where a stylesheet in the app already forces !important.
   Semantic mapping (status meaning preserved):
     slate/gray  → surfaces + text ramp        cyan → app primary accent      purple/violet/fuchsia → secondary accent
     emerald/green → success   yellow → caution   orange → warn   red/rose → danger   amber → amber   blue/sky/indigo → info
     pink → salmon flavour     teal → teal
   ========================================================================== */

/* ------------------------------------------------ typography scale hooks */
html:is([data-theme="riviera"], [data-theme="daylight"]) .font-mono { font-family: var(--mos-font-mono); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(.text-\[9px\], .text-\[10px\], .text-\[10\.5px\]) { font-size: 11px; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(.uppercase.tracking-widest, .uppercase.tracking-wider, .uppercase.tracking-wide) { font-family: var(--mos-font-ui); font-weight: 700; letter-spacing: var(--mos-track-label); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(.tracking-tight, .tracking-tighter) { letter-spacing: 0; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(.bg-clip-text, .text-gradient) {
  background-image: none !important; -webkit-text-fill-color: var(--mos-text); color: var(--mos-text);
}

/* ------------------------------------------------ radii: 12 panels / 8 controls / 4 chips */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(.rounded-2xl, .rounded-3xl) { border-radius: var(--mos-radius-lg); }
html:is([data-theme="riviera"], [data-theme="daylight"]) .rounded-xl { border-radius: var(--mos-radius-lg); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(button, input, select, textarea, a).rounded-xl { border-radius: var(--mos-radius-md); }
html:is([data-theme="riviera"], [data-theme="daylight"]) .rounded-lg { border-radius: var(--mos-radius-md); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(.rounded-md, .rounded) { border-radius: var(--mos-radius-sm); }

/* ------------------------------------------------ surfaces */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-slate-950"], [class*=" bg-slate-950"],
  [class^="bg-\[\#080f1a\]"], [class*=" bg-\[\#080f1a\]"], [class^="bg-\[\#0a0f1a\]"], [class*=" bg-\[\#0a0f1a\]"],
  [class^="bg-gray-950"], [class*=" bg-gray-950"]) { background-color: var(--mos-bg); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-slate-900"], [class*=" bg-slate-900"], [class^="bg-gray-900"], [class*=" bg-gray-900"]) { background-color: var(--mos-surface); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-slate-800"], [class*=" bg-slate-800"], [class^="bg-gray-800"], [class*=" bg-gray-800"]) { background-color: var(--mos-surface-raised); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-slate-700"], [class*=" bg-slate-700"], [class^="bg-gray-700"], [class*=" bg-gray-700"]) { background-color: var(--mos-button-bg); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-slate-600"], [class*=" bg-slate-600"], [class^="bg-gray-600"], [class*=" bg-gray-600"],
  [class^="bg-slate-500"], [class*=" bg-slate-500"], [class^="bg-gray-500"], [class*=" bg-gray-500"]) { background-color: var(--mos-button-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-slate-400"], [class*=" bg-slate-400"], [class^="bg-gray-400"], [class*=" bg-gray-400"]) { background-color: var(--mos-text-muted); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-white/5"], [class*=" bg-white/5"], [class^="bg-white/\[0\.0"], [class*=" bg-white/\[0\.0"]) { background-color: var(--mos-raise-1); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-white/10"], [class*=" bg-white/10"], [class^="bg-white/15"], [class*=" bg-white/15"], [class^="bg-white/\[0\.1"], [class*=" bg-white/\[0\.1"]) { background-color: var(--mos-raise-2); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-white/20"], [class*=" bg-white/20"], [class^="bg-white/25"], [class*=" bg-white/25"], [class^="bg-white/30"], [class*=" bg-white/30"], [class^="bg-white/40"], [class*=" bg-white/40"]) { background-color: var(--mos-raise-3); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-white"], [class^="bg-white "], [class$=" bg-white"], [class*=" bg-white "]) { background-color: var(--mos-surface-raised); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-black/"], [class*=" bg-black/"]) { background-color: var(--mos-scrim); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-slate-800/"], [class*=" bg-slate-800/"], [class^="bg-slate-700/"], [class*=" bg-slate-700/"], [class^="bg-slate-900/"], [class*=" bg-slate-900/"]) { background-color: var(--mos-surface-raised); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-slate-500/"], [class*=" bg-slate-500/"], [class^="bg-slate-600/"], [class*=" bg-slate-600/"], [class^="bg-gray-500/"], [class*=" bg-gray-500/"]) { background-color: var(--mos-raise-2); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-transparent"], [class*=" bg-transparent"]) { background-color: transparent; }

/* ------------------------------------------------ accent (cyan → app primary) */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-cyan-400/"], [class*=" bg-cyan-400/"], [class^="bg-cyan-500/"], [class*=" bg-cyan-500/"], [class^="bg-cyan-600/"], [class*=" bg-cyan-600/"], [class^="bg-cyan-700/"], [class*=" bg-cyan-700/"], [class^="bg-cyan-900"], [class*=" bg-cyan-900"], [class^="bg-cyan-950"], [class*=" bg-cyan-950"]) { background-color: var(--mos-accent-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-cyan-400"], [class^="bg-cyan-400 "], [class$=" bg-cyan-400"], [class*=" bg-cyan-400 "],
  [class="bg-cyan-500"], [class^="bg-cyan-500 "], [class$=" bg-cyan-500"], [class*=" bg-cyan-500 "],
  [class="bg-cyan-600"], [class^="bg-cyan-600 "], [class$=" bg-cyan-600"], [class*=" bg-cyan-600 "],
  [class="bg-cyan-700"], [class^="bg-cyan-700 "], [class$=" bg-cyan-700"], [class*=" bg-cyan-700 "]) { background-color: var(--mos-accent); color: var(--mos-on-accent); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-cyan-"], [class*=" text-cyan-"]) { color: var(--mos-accent-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-cyan-"], [class*=" border-cyan-"]) { border-color: var(--mos-accent-edge); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-cyan-500/"], [class*=" border-cyan-500/"], [class^="border-cyan-400/"], [class*=" border-cyan-400/"], [class^="border-cyan-600/"], [class*=" border-cyan-600/"]) { border-color: var(--mos-accent-edge); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="ring-cyan-"], [class*=" ring-cyan-"]) { --tw-ring-color: var(--mos-focus); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="shadow-cyan-"], [class*=" shadow-cyan-"]) { --tw-shadow-color: var(--mos-accent-soft-hover); --tw-shadow: var(--tw-shadow-colored); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-cyan-"], [class*=" from-cyan-"], [class^="from-sky-"], [class*=" from-sky-"]) { --tw-gradient-from: var(--mos-accent); --tw-gradient-to: var(--mos-accent-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-cyan-"], [class*=" to-cyan-"], [class^="to-sky-"], [class*=" to-sky-"], [class^="to-blue-"], [class*=" to-blue-"]) { --tw-gradient-to: var(--mos-accent-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-cyan-500/"], [class*=" from-cyan-500/"], [class^="from-cyan-400/"], [class*=" from-cyan-400/"], [class^="from-cyan-600/"], [class*=" from-cyan-600/"]) { --tw-gradient-from: var(--mos-accent-soft); --tw-gradient-to: transparent; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-cyan-500/"], [class*=" to-cyan-500/"], [class^="to-cyan-600/"], [class*=" to-cyan-600/"], [class^="to-blue-500/"], [class*=" to-blue-500/"], [class^="to-purple-500/"], [class*=" to-purple-500/"]) { --tw-gradient-to: var(--mos-raise-1); }
/* solid gradient buttons (from-cyan-500 to-cyan-600 …) carry white text natively; the accent decides its own on-colour */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="bg-gradient-to"]):is([class="from-cyan-500"], [class^="from-cyan-500 "], [class$=" from-cyan-500"], [class*=" from-cyan-500 "], [class="from-cyan-600"], [class^="from-cyan-600 "], [class$=" from-cyan-600"], [class*=" from-cyan-600 "]) { color: var(--mos-on-accent); font-weight: 700; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="bg-gradient-to"]):is([class="from-cyan-500"], [class^="from-cyan-500 "], [class$=" from-cyan-500"], [class*=" from-cyan-500 "], [class="from-cyan-600"], [class^="from-cyan-600 "], [class$=" from-cyan-600"], [class*=" from-cyan-600 "]) :is(svg, span) { color: inherit; }

/* ------------------------------------------------ secondary accent (purple/violet/fuchsia) */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-purple-500/"], [class*=" bg-purple-500/"], [class^="bg-purple-600/"], [class*=" bg-purple-600/"], [class^="bg-purple-400/"], [class*=" bg-purple-400/"], [class^="bg-violet-500/"], [class*=" bg-violet-500/"], [class^="bg-purple-900"], [class*=" bg-purple-900"], [class^="bg-fuchsia-500/"], [class*=" bg-fuchsia-500/"]) { background-color: var(--mos-accent-2-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-purple-500"], [class^="bg-purple-500 "], [class$=" bg-purple-500"], [class*=" bg-purple-500 "],
  [class="bg-purple-600"], [class^="bg-purple-600 "], [class$=" bg-purple-600"], [class*=" bg-purple-600 "],
  [class="bg-violet-500"], [class^="bg-violet-500 "], [class$=" bg-violet-500"], [class*=" bg-violet-500 "],
  [class="bg-violet-600"], [class^="bg-violet-600 "], [class$=" bg-violet-600"], [class*=" bg-violet-600 "]) { background-color: var(--mos-accent-2); color: var(--mos-on-accent-2); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-purple-"], [class*=" text-purple-"], [class^="text-violet-"], [class*=" text-violet-"], [class^="text-fuchsia-"], [class*=" text-fuchsia-"]) { color: var(--mos-accent-2-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-purple-"], [class*=" border-purple-"], [class^="border-violet-"], [class*=" border-violet-"]) { border-color: var(--mos-accent-2-edge); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-purple-"], [class*=" from-purple-"], [class^="from-violet-"], [class*=" from-violet-"]) { --tw-gradient-from: var(--mos-accent-2); --tw-gradient-to: var(--mos-accent-2-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-purple-"], [class*=" to-purple-"], [class^="to-violet-"], [class*=" to-violet-"]) { --tw-gradient-to: var(--mos-accent-2-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-purple-500/"], [class*=" from-purple-500/"], [class^="from-violet-500/"], [class*=" from-violet-500/"]) { --tw-gradient-from: var(--mos-accent-2-soft); --tw-gradient-to: transparent; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="bg-gradient-to"]):is([class="from-purple-500"], [class^="from-purple-500 "], [class$=" from-purple-500"], [class*=" from-purple-500 "], [class="from-purple-600"], [class^="from-purple-600 "], [class$=" from-purple-600"], [class*=" from-purple-600 "]) { color: var(--mos-on-accent-2); font-weight: 700; }
/* ---- R6 (2026-09-14) purple/violet ALPHA gradient stops. The accent section above maps to-purple-500/<alpha> to --mos-raise-1,
   but the solid "to-purple-*" rule in this section re-maps the very same class to the opaque --mos-accent-2-hover (amber-light)
   with equal specificity and a later position, so an opaque light wash won behind data (Music Pal Releases tracklisting,
   muted text < 2:1). The alpha rule is re-asserted here after the solid rule, exactly like the cyan/amber/orange sections. */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-purple-500/"], [class*=" to-purple-500/"], [class^="to-purple-400/"], [class*=" to-purple-400/"], [class^="to-purple-600/"], [class*=" to-purple-600/"], [class^="to-violet-500/"], [class*=" to-violet-500/"]) { --tw-gradient-to: var(--mos-raise-1); }
/* ---- R6 design rule (all apps): gradients belong to hero surfaces only (login panel, Synapse graph field). Behind data, tables,
   forms and running text sits a solid surface. The alpha-gradient utility pairs that the JSX uses for data chrome are flattened:
   selection / highlight strips (from-cyan-500/N to-purple-500/N) → accent-soft; tinted cards (from-purple|emerald|blue-500/N
   to-purple-500/N) → surface-raised. Hover variants only rewrite gradient stops, which no longer paint. Original is untouched. */
html:is([data-theme="riviera"], [data-theme="daylight"]) [class*="bg-gradient-to"]:is([class^="from-cyan-500/"], [class*=" from-cyan-500/"]):is([class^="to-purple-500/"], [class*=" to-purple-500/"]) { background-image: none; background-color: var(--mos-accent-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) [class*="bg-gradient-to"]:is([class^="from-purple-500/"], [class*=" from-purple-500/"], [class^="from-emerald-500/"], [class*=" from-emerald-500/"], [class^="from-blue-500/"], [class*=" from-blue-500/"]):is([class^="to-purple-500/"], [class*=" to-purple-500/"]) { background-image: none; background-color: var(--mos-surface-raised); }
/* ---- R6 panel correction (2026-09-14): neutral WHITE alpha gradient panels were missed by the flatten above.
   Music Pal DashboardView / AnalyticsView panels and the App.jsx table containers use
   "rounded-xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 p-4|p-5 [overflow-hidden]".
   The borders section below only rewrites the STOPS (from-white/ → --tw-gradient-from: surface-raised, to-white/ →
   --tw-gradient-to: button-bg), so bg-gradient-to-br kept painting an opaque linear-gradient(surface-raised → button-bg)
   behind data (browser-measured rgb(26,48,72) → rgb(42,64,82) in Riviera). Same design rule as the cyan/purple pairs:
   the panel becomes a solid surface-raised card (the gradient's own start colour, the same level as the stat cards and
   .glass); border-white/10 already lands on --mos-line. Login hero and Synapse graph field paint from inline styles /
   adapter tokens, not from these utilities, so they are unaffected. Original receives nothing. Specificity (0,4,1)
   beats .bg-gradient-to-* (0,1,0) and every bg-white/N surface rule (0,2,1) without !important. */
html:is([data-theme="riviera"], [data-theme="daylight"]) [class*="bg-gradient-to"]:is([class^="from-white/"], [class*=" from-white/"]):is([class^="to-white/"], [class*=" to-white/"]) { background-image: none; background-color: var(--mos-surface-raised); }
/* hover:from-white/N | hover:to-white/N on such a panel used to shift the gradient; the stops no longer paint, so the
   hover affordance moves to the solid raised-hover surface instead of disappearing. */
html:is([data-theme="riviera"], [data-theme="daylight"]) [class*="bg-gradient-to"]:is([class^="from-white/"], [class*=" from-white/"]):is([class^="to-white/"], [class*=" to-white/"]):is([class*="hover:from-white/"], [class*="hover:to-white/"]):hover { background-color: var(--mos-surface-raised-hover); }
/* Dashboard empty-state action cards: "p-6 rounded-xl bg-gradient-to-br from-emerald-500/10 to-emerald-500/5 border
   border-emerald-500/20" and the cyan-500/10 → cyan-500/5 sibling. The purple-500/10 → purple-500/5 sibling is already
   flattened by the from-purple-500/ + to-purple-500/ rule above, so all three cards now sit on the same surface-raised and
   keep their identity through the hue-mapped border (success / accent-edge / accent-2-edge) and text. Matched on the exact
   /10 → /5 pair so same-hue alpha pairs at other alphas (selection strips, drag-over highlights) keep their accent-soft
   semantics from the rules above. */
html:is([data-theme="riviera"], [data-theme="daylight"]) [class*="bg-gradient-to"]:is([class^="from-emerald-500/10 "], [class*=" from-emerald-500/10 "], [class$=" from-emerald-500/10"]):is([class^="to-emerald-500/5 "], [class*=" to-emerald-500/5 "], [class$=" to-emerald-500/5"]),
html:is([data-theme="riviera"], [data-theme="daylight"]) [class*="bg-gradient-to"]:is([class^="from-cyan-500/10 "], [class*=" from-cyan-500/10 "], [class$=" from-cyan-500/10"]):is([class^="to-cyan-500/5 "], [class*=" to-cyan-500/5 "], [class$=" to-cyan-500/5"]) { background-image: none; background-color: var(--mos-surface-raised); }

/* ------------------------------------------------ status: success (emerald/green) */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-emerald-500/"], [class*=" bg-emerald-500/"], [class^="bg-emerald-400/"], [class*=" bg-emerald-400/"], [class^="bg-emerald-600/"], [class*=" bg-emerald-600/"], [class^="bg-green-500/"], [class*=" bg-green-500/"], [class^="bg-green-600/"], [class*=" bg-green-600/"], [class^="bg-green-400/"], [class*=" bg-green-400/"], [class^="bg-emerald-900"], [class*=" bg-emerald-900"], [class^="bg-green-900"], [class*=" bg-green-900"], [class^="bg-emerald-950"], [class*=" bg-emerald-950"]) { background-color: var(--mos-success-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-emerald-500"], [class^="bg-emerald-500 "], [class$=" bg-emerald-500"], [class*=" bg-emerald-500 "], [class="bg-emerald-600"], [class^="bg-emerald-600 "], [class$=" bg-emerald-600"], [class*=" bg-emerald-600 "], [class="bg-emerald-400"], [class^="bg-emerald-400 "], [class$=" bg-emerald-400"], [class*=" bg-emerald-400 "],
  [class="bg-green-500"], [class^="bg-green-500 "], [class$=" bg-green-500"], [class*=" bg-green-500 "], [class="bg-green-600"], [class^="bg-green-600 "], [class$=" bg-green-600"], [class*=" bg-green-600 "], [class="bg-green-400"], [class^="bg-green-400 "], [class$=" bg-green-400"], [class*=" bg-green-400 "]) { background-color: var(--mos-success); color: var(--mos-on-success); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-emerald-"], [class*=" text-emerald-"], [class^="text-green-"], [class*=" text-green-"]) { color: var(--mos-success-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-emerald-"], [class*=" border-emerald-"], [class^="border-green-"], [class*=" border-green-"]) { border-color: var(--mos-success); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-emerald-"], [class*=" from-emerald-"], [class^="from-green-"], [class*=" from-green-"]) { --tw-gradient-from: var(--mos-success); --tw-gradient-to: var(--mos-success); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-emerald-"], [class*=" to-emerald-"], [class^="to-green-"], [class*=" to-green-"], [class^="to-teal-"], [class*=" to-teal-"]) { --tw-gradient-to: var(--mos-success); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-emerald-500/"], [class*=" from-emerald-500/"], [class^="from-green-500/"], [class*=" from-green-500/"]) { --tw-gradient-from: var(--mos-success-soft); --tw-gradient-to: transparent; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="bg-gradient-to"]):is([class="from-emerald-500"], [class^="from-emerald-500 "], [class$=" from-emerald-500"], [class*=" from-emerald-500 "], [class="from-emerald-600"], [class^="from-emerald-600 "], [class$=" from-emerald-600"], [class*=" from-emerald-600 "], [class="from-green-500"], [class^="from-green-500 "], [class$=" from-green-500"], [class*=" from-green-500 "]) { color: var(--mos-on-success); font-weight: 700; }

/* ------------------------------------------------ status: caution (yellow) */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-yellow-500/"], [class*=" bg-yellow-500/"], [class^="bg-yellow-400/"], [class*=" bg-yellow-400/"], [class^="bg-yellow-600/"], [class*=" bg-yellow-600/"], [class^="bg-yellow-900"], [class*=" bg-yellow-900"]) { background-color: var(--mos-caution-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-yellow-500"], [class^="bg-yellow-500 "], [class$=" bg-yellow-500"], [class*=" bg-yellow-500 "], [class="bg-yellow-400"], [class^="bg-yellow-400 "], [class$=" bg-yellow-400"], [class*=" bg-yellow-400 "], [class="bg-yellow-600"], [class^="bg-yellow-600 "], [class$=" bg-yellow-600"], [class*=" bg-yellow-600 "]) { background-color: var(--mos-caution); color: var(--mos-on-caution); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-yellow-"], [class*=" text-yellow-"]) { color: var(--mos-caution-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-yellow-"], [class*=" border-yellow-"]) { border-color: var(--mos-caution); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-yellow-"], [class*=" from-yellow-"]) { --tw-gradient-from: var(--mos-caution); --tw-gradient-to: var(--mos-caution); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-yellow-"], [class*=" to-yellow-"]) { --tw-gradient-to: var(--mos-caution); }

/* ------------------------------------------------ status: warn (orange) */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-orange-500/"], [class*=" bg-orange-500/"], [class^="bg-orange-400/"], [class*=" bg-orange-400/"], [class^="bg-orange-600/"], [class*=" bg-orange-600/"], [class^="bg-orange-900"], [class*=" bg-orange-900"]) { background-color: var(--mos-warn-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-orange-500"], [class^="bg-orange-500 "], [class$=" bg-orange-500"], [class*=" bg-orange-500 "], [class="bg-orange-600"], [class^="bg-orange-600 "], [class$=" bg-orange-600"], [class*=" bg-orange-600 "], [class="bg-orange-400"], [class^="bg-orange-400 "], [class$=" bg-orange-400"], [class*=" bg-orange-400 "]) { background-color: var(--mos-warn); color: var(--mos-on-warn); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-orange-"], [class*=" text-orange-"]) { color: var(--mos-warn-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-orange-"], [class*=" border-orange-"]) { border-color: var(--mos-warn); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-orange-"], [class*=" from-orange-"]) { --tw-gradient-from: var(--mos-warn); --tw-gradient-to: var(--mos-warn); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-orange-"], [class*=" to-orange-"]) { --tw-gradient-to: var(--mos-warn); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-orange-500/"], [class*=" from-orange-500/"]) { --tw-gradient-from: var(--mos-warn-soft); --tw-gradient-to: transparent; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="bg-gradient-to"]):is([class="from-orange-500"], [class^="from-orange-500 "], [class$=" from-orange-500"], [class*=" from-orange-500 "]) { color: var(--mos-on-warn); font-weight: 700; }

/* ------------------------------------------------ status: danger (red/rose) */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-red-500/"], [class*=" bg-red-500/"], [class^="bg-red-600/"], [class*=" bg-red-600/"], [class^="bg-red-400/"], [class*=" bg-red-400/"], [class^="bg-rose-500/"], [class*=" bg-rose-500/"], [class^="bg-red-900"], [class*=" bg-red-900"], [class^="bg-rose-900"], [class*=" bg-rose-900"], [class^="bg-red-950"], [class*=" bg-red-950"]) { background-color: var(--mos-danger-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-red-500"], [class^="bg-red-500 "], [class$=" bg-red-500"], [class*=" bg-red-500 "], [class="bg-red-600"], [class^="bg-red-600 "], [class$=" bg-red-600"], [class*=" bg-red-600 "], [class="bg-red-400"], [class^="bg-red-400 "], [class$=" bg-red-400"], [class*=" bg-red-400 "], [class="bg-rose-500"], [class^="bg-rose-500 "], [class$=" bg-rose-500"], [class*=" bg-rose-500 "]) { background-color: var(--mos-danger-deep); color: var(--mos-on-danger-deep); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-red-"], [class*=" text-red-"], [class^="text-rose-"], [class*=" text-rose-"]) { color: var(--mos-danger-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-red-"], [class*=" border-red-"], [class^="border-rose-"], [class*=" border-rose-"]) { border-color: var(--mos-danger); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-red-"], [class*=" from-red-"], [class^="from-rose-"], [class*=" from-rose-"]) { --tw-gradient-from: var(--mos-danger-deep); --tw-gradient-to: var(--mos-danger); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-red-"], [class*=" to-red-"], [class^="to-rose-"], [class*=" to-rose-"]) { --tw-gradient-to: var(--mos-danger); }

/* ------------------------------------------------ amber (warm secondary; Pal deals, Agent duplicates) */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-amber-500/"], [class*=" bg-amber-500/"], [class^="bg-amber-600/"], [class*=" bg-amber-600/"], [class^="bg-amber-400/"], [class*=" bg-amber-400/"], [class^="bg-amber-900"], [class*=" bg-amber-900"]) { background-color: var(--mos-amber-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-amber-500"], [class^="bg-amber-500 "], [class$=" bg-amber-500"], [class*=" bg-amber-500 "], [class="bg-amber-600"], [class^="bg-amber-600 "], [class$=" bg-amber-600"], [class*=" bg-amber-600 "], [class="bg-amber-400"], [class^="bg-amber-400 "], [class$=" bg-amber-400"], [class*=" bg-amber-400 "]) { background-color: var(--mos-amber); color: var(--mos-on-amber); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-amber-"], [class*=" text-amber-"]) { color: var(--mos-amber-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-amber-"], [class*=" border-amber-"]) { border-color: var(--mos-amber); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-amber-"], [class*=" from-amber-"]) { --tw-gradient-from: var(--mos-amber); --tw-gradient-to: var(--mos-amber-light); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-amber-"], [class*=" to-amber-"]) { --tw-gradient-to: var(--mos-amber-light); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-amber-500/"], [class*=" from-amber-500/"]) { --tw-gradient-from: var(--mos-amber-soft); --tw-gradient-to: transparent; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-amber-500/"], [class*=" to-amber-500/"], [class^="to-orange-500/"], [class*=" to-orange-500/"]) { --tw-gradient-to: var(--mos-raise-1); }

/* ------------------------------------------------ info (blue/sky/indigo) and flavours (pink, teal) */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-blue-500/"], [class*=" bg-blue-500/"], [class^="bg-blue-600/"], [class*=" bg-blue-600/"], [class^="bg-sky-500/"], [class*=" bg-sky-500/"], [class^="bg-indigo-500/"], [class*=" bg-indigo-500/"], [class^="bg-blue-900"], [class*=" bg-blue-900"], [class^="bg-indigo-900"], [class*=" bg-indigo-900"]) { background-color: var(--mos-info-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-blue-500"], [class^="bg-blue-500 "], [class$=" bg-blue-500"], [class*=" bg-blue-500 "], [class="bg-blue-600"], [class^="bg-blue-600 "], [class$=" bg-blue-600"], [class*=" bg-blue-600 "], [class="bg-sky-500"], [class^="bg-sky-500 "], [class$=" bg-sky-500"], [class*=" bg-sky-500 "], [class="bg-indigo-500"], [class^="bg-indigo-500 "], [class$=" bg-indigo-500"], [class*=" bg-indigo-500 "], [class="bg-indigo-600"], [class^="bg-indigo-600 "], [class$=" bg-indigo-600"], [class*=" bg-indigo-600 "]) { background-color: var(--mos-info); color: #ffffff; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-blue-"], [class*=" text-blue-"], [class^="text-sky-"], [class*=" text-sky-"], [class^="text-indigo-"], [class*=" text-indigo-"]) { color: var(--mos-info-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-blue-"], [class*=" border-blue-"], [class^="border-sky-"], [class*=" border-sky-"], [class^="border-indigo-"], [class*=" border-indigo-"]) { border-color: var(--mos-info); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-blue-"], [class*=" from-blue-"], [class^="from-indigo-"], [class*=" from-indigo-"]) { --tw-gradient-from: var(--mos-info); --tw-gradient-to: var(--mos-info); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-indigo-"], [class*=" to-indigo-"]) { --tw-gradient-to: var(--mos-info); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-pink-500/"], [class*=" bg-pink-500/"], [class^="bg-pink-900"], [class*=" bg-pink-900"]) { background-color: var(--mos-coral-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-pink-"], [class*=" text-pink-"]) { color: var(--mos-salmon); }
html[data-theme="daylight"] :is([class^="text-pink-"], [class*=" text-pink-"]) { color: var(--mos-coral-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-pink-"], [class*=" border-pink-"]) { border-color: var(--mos-salmon); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="bg-teal-500/"], [class*=" bg-teal-500/"], [class^="bg-teal-900"], [class*=" bg-teal-900"]) { background-color: var(--mos-teal-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-teal-500"], [class^="bg-teal-500 "], [class$=" bg-teal-500"], [class*=" bg-teal-500 "]) { background-color: var(--mos-teal-deep); color: var(--mos-on-teal); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-teal-"], [class*=" text-teal-"]) { color: var(--mos-teal-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-teal-"], [class*=" border-teal-"]) { border-color: var(--mos-teal-edge); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-teal-"], [class*=" from-teal-"]) { --tw-gradient-from: var(--mos-teal-deep); --tw-gradient-to: var(--mos-teal); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="ring-teal-"], [class*=" ring-teal-"], [class^="ring-purple-"], [class*=" ring-purple-"], [class^="ring-emerald-"], [class*=" ring-emerald-"], [class^="ring-red-"], [class*=" ring-red-"]) { --tw-ring-color: var(--mos-focus); }

/* ------------------------------------------------ text ramp (white / slate / gray) */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="text-white"], [class^="text-white "], [class$=" text-white"], [class*=" text-white "], [class^="text-slate-100"], [class*=" text-slate-100"], [class^="text-gray-100"], [class*=" text-gray-100"], [class^="text-slate-50"], [class*=" text-slate-50"]) { color: var(--mos-text-label); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-white/"], [class*=" text-white/"]) { color: var(--mos-text-body); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-slate-200"], [class*=" text-slate-200"], [class^="text-slate-300"], [class*=" text-slate-300"], [class^="text-gray-200"], [class*=" text-gray-200"], [class^="text-gray-300"], [class*=" text-gray-300"]) { color: var(--mos-text-body); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-slate-400"], [class*=" text-slate-400"], [class^="text-gray-400"], [class*=" text-gray-400"]) { color: var(--mos-text-secondary); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-slate-500"], [class*=" text-slate-500"], [class^="text-slate-600"], [class*=" text-slate-600"], [class^="text-slate-700"], [class*=" text-slate-700"], [class^="text-gray-500"], [class*=" text-gray-500"], [class^="text-gray-600"], [class*=" text-gray-600"], [class^="text-gray-700"], [class*=" text-gray-700"]) { color: var(--mos-text-muted); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="text-black"], [class*=" text-black"], [class^="text-slate-900"], [class*=" text-slate-900"], [class^="text-slate-800"], [class*=" text-slate-800"], [class^="text-gray-900"], [class*=" text-gray-900"]) { color: var(--mos-on-amber); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="placeholder-"], [class*=" placeholder-"], [class^="placeholder:"], [class*=" placeholder:"])::placeholder { color: var(--mos-text-hint); }

/* ------------------------------------------------ borders & dividers */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-white/5"], [class*=" border-white/5"], [class^="border-white/8"], [class*=" border-white/8"], [class^="border-white/10"], [class*=" border-white/10"], [class^="border-white/\[0\.0"], [class*=" border-white/\[0\.0"], [class^="border-slate-800"], [class*=" border-slate-800"], [class^="border-slate-700"], [class*=" border-slate-700"], [class^="border-gray-800"], [class*=" border-gray-800"], [class^="border-gray-700"], [class*=" border-gray-700"], [class^="border-\[\#08121f\]"], [class*=" border-\[\#08121f\]"]) { border-color: var(--mos-line) !important; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="border-white/20"], [class*=" border-white/20"], [class^="border-white/30"], [class*=" border-white/30"], [class^="border-white/40"], [class*=" border-white/40"], [class^="border-slate-600"], [class*=" border-slate-600"], [class^="border-slate-500"], [class*=" border-slate-500"], [class^="border-gray-600"], [class*=" border-gray-600"], [class^="border-gray-500"], [class*=" border-gray-500"]) { border-color: var(--mos-line-strong) !important; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="divide-white/"], [class*=" divide-white/"], [class^="divide-slate-"], [class*=" divide-slate-"], [class^="divide-gray-"], [class*=" divide-gray-"]) > :not([hidden]) ~ :not([hidden]) { border-color: var(--mos-line); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="ring-white/"], [class*=" ring-white/"], [class^="ring-slate-"], [class*=" ring-slate-"]) { --tw-ring-color: var(--mos-line-strong); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="from-slate-"], [class*=" from-slate-"], [class^="from-gray-"], [class*=" from-gray-"], [class^="from-white/"], [class*=" from-white/"]) { --tw-gradient-from: var(--mos-surface-raised); --tw-gradient-to: var(--mos-button-bg); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="to-slate-"], [class*=" to-slate-"], [class^="to-gray-"], [class*=" to-gray-"], [class^="to-transparent"], [class*=" to-transparent"], [class^="to-white/"], [class*=" to-white/"]) { --tw-gradient-to: var(--mos-button-bg); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="shadow-black/"], [class*=" shadow-black/"], [class^="shadow-2xl"], [class*=" shadow-2xl"], [class^="shadow-xl"], [class*=" shadow-xl"]) { --tw-shadow: var(--mos-shadow-float); --tw-shadow-colored: var(--mos-shadow-float); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class^="shadow-lg"], [class*=" shadow-lg"], [class^="shadow-md"], [class*=" shadow-md"]) { --tw-shadow: var(--mos-shadow-panel); --tw-shadow-colored: var(--mos-shadow-panel); }

/* ------------------------------------------------ hover / focus variants */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-white/"], [class*="hover:bg-white/\["], [class*="hover:bg-slate-800/"], [class*="hover:bg-slate-700/"]):hover { background-color: var(--mos-raise-2); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-slate-800 "], [class$="hover:bg-slate-800"], [class*="hover:bg-gray-800 "], [class$="hover:bg-gray-800"]):hover { background-color: var(--mos-surface-raised-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-slate-700 "], [class$="hover:bg-slate-700"], [class*="hover:bg-slate-600"], [class*="hover:bg-gray-700"], [class*="hover:bg-gray-600"]):hover { background-color: var(--mos-button-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-cyan-500/"], [class*="hover:bg-cyan-600/"], [class*="hover:bg-cyan-400/"]):hover { background-color: var(--mos-accent-soft-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-cyan-500 "], [class$="hover:bg-cyan-500"], [class*="hover:bg-cyan-600 "], [class$="hover:bg-cyan-600"], [class*="hover:bg-cyan-400 "], [class$="hover:bg-cyan-400"]):hover { background-color: var(--mos-accent-hover); color: var(--mos-on-accent); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-purple-500/"], [class*="hover:bg-purple-600/"]):hover { background-color: var(--mos-accent-2-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-purple-500 "], [class$="hover:bg-purple-500"], [class*="hover:bg-purple-600 "], [class$="hover:bg-purple-600"]):hover { background-color: var(--mos-accent-2-hover); color: var(--mos-on-accent-2); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-emerald-500/"], [class*="hover:bg-emerald-600/"], [class*="hover:bg-green-500/"]):hover { background-color: var(--mos-success-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-emerald-500 "], [class$="hover:bg-emerald-500"], [class*="hover:bg-emerald-600 "], [class$="hover:bg-emerald-600"], [class*="hover:bg-green-600 "], [class$="hover:bg-green-600"]):hover { background-color: var(--mos-success); color: var(--mos-on-success); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-red-500/"], [class*="hover:bg-red-600/"]):hover { background-color: var(--mos-danger-soft-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-red-500 "], [class$="hover:bg-red-500"], [class*="hover:bg-red-600 "], [class$="hover:bg-red-600"], [class*="hover:bg-red-700 "], [class$="hover:bg-red-700"]):hover { background-color: var(--mos-danger-deep); color: var(--mos-on-danger-deep); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-amber-600/"], [class*="hover:bg-amber-500/"]):hover { background-color: var(--mos-amber-soft-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-orange-500/"], [class*="hover:bg-orange-600/"]):hover { background-color: var(--mos-warn-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-blue-500/"], [class*="hover:bg-indigo-500/"]):hover { background-color: var(--mos-info-soft); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:text-white"], [class*="hover:text-slate-100"]):hover { color: var(--mos-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:text-slate-200"], [class*="hover:text-slate-300"], [class*="hover:text-gray-200"], [class*="hover:text-gray-300"]):hover { color: var(--mos-text-label); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:text-cyan-"]):hover { color: var(--mos-accent-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:text-purple-"], [class*="hover:text-violet-"]):hover { color: var(--mos-accent-2-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:text-red-"], [class*="hover:text-rose-"]):hover { color: var(--mos-danger-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:text-emerald-"], [class*="hover:text-green-"]):hover { color: var(--mos-success-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:text-amber-"], [class*="hover:text-yellow-"]):hover { color: var(--mos-amber-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:border-white/"], [class*="hover:border-slate-"], [class*="hover:border-gray-"]):hover { border-color: var(--mos-line-strong) !important; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:border-cyan-"]):hover { border-color: var(--mos-accent-edge) !important; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:border-purple-"]):hover { border-color: var(--mos-accent-2-edge) !important; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:border-red-"]):hover { border-color: var(--mos-danger) !important; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:from-cyan-"]):hover { --tw-gradient-from: var(--mos-accent-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:to-cyan-"], [class*="hover:to-blue-"]):hover { --tw-gradient-to: var(--mos-accent-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:from-emerald-"]):hover { --tw-gradient-from: var(--mos-success); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:to-emerald-"]):hover { --tw-gradient-to: var(--mos-success); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:from-purple-"]):hover { --tw-gradient-from: var(--mos-accent-2-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:to-purple-"]):hover { --tw-gradient-to: var(--mos-accent-2-hover); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:from-indigo-"], [class*="hover:to-indigo-"]):hover { --tw-gradient-from: var(--mos-info); --tw-gradient-to: var(--mos-info); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="focus:border-cyan-"], [class*="focus:border-purple-"], [class*="focus:border-emerald-"]):focus { border-color: var(--mos-focus) !important; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="focus:ring-cyan-"], [class*="focus:ring-purple-"]):focus { --tw-ring-color: var(--mos-focus); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="group-hover:text-white"]):is(.group:hover *) { color: var(--mos-text); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="disabled:bg-white/"]):disabled { background-color: var(--mos-raise-1); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="disabled:text-slate-"]):disabled { color: var(--mos-text-muted); }

/* ------------------------------------------------ form controls (shared Input/Select/SearchSelect and inline equivalents) */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  font-family: var(--mos-font-ui); box-shadow: var(--mos-shadow-control);
}
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):is([class*="bg-white/"], [class*="bg-slate-"], [class*="bg-gray-"], [class*="bg-transparent"]) {
  background-color: var(--mos-surface-control); color: var(--mos-text-label); border-color: var(--mos-surface-control-line);
}
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(input, select, textarea):is([class*="bg-transparent"]) { background-color: transparent; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { box-shadow: none; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible { outline: 2px solid var(--mos-focus); outline-offset: 2px; }
html:is([data-theme="riviera"], [data-theme="daylight"]) select option { background-color: var(--mos-surface-control); color: var(--mos-text-label); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--mos-accent); }
html:is([data-theme="riviera"], [data-theme="daylight"]) input[type="range"] { accent-color: var(--mos-accent); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(button, [role="button"]):is([class*="uppercase"]) { letter-spacing: var(--mos-track-button); }

/* ------------------------------------------------ tables */
html:is([data-theme="riviera"], [data-theme="daylight"]) thead th { font-family: var(--mos-font-ui); font-weight: 700; font-size: var(--mos-fs-caption); letter-spacing: var(--mos-track-label); text-transform: uppercase; color: var(--mos-text-muted); }
html:is([data-theme="riviera"], [data-theme="daylight"]) thead:is([class*="bg-slate-"], [class*="bg-white/"], [class*="bg-gray-"]) { background-color: var(--mos-surface); }
html:is([data-theme="riviera"], [data-theme="daylight"]) thead tr:is([class*="bg-white/"], [class*="bg-slate-"]) { background-color: var(--mos-surface); }
html:is([data-theme="riviera"], [data-theme="daylight"]) tbody tr:is([class*="hover:bg-white/"], [class*="hover:bg-slate-"]):hover { background-color: var(--mos-raise-1); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(td, th).text-right,
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(td, th):is([class*="text-right"]) { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ on-colour precedence (r2)
   A solid semantic background must decide its own foreground in every theme state, even when the same element also
   carries text-white / text-slate-* (Pal confirm dialog "bg-red-500 … text-white", Agent "bg-cyan-600 … text-white").
   The extra :is([class]) lifts these rules above the text-ramp rules (0,3,1 > 0,2,1) without !important, so inline
   user colours still win. Foregrounds are the tokenised on-colours (Riviera: cream/dark; Daylight: white/dark). */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-red-500"], [class^="bg-red-500 "], [class$=" bg-red-500"], [class*=" bg-red-500 "], [class="bg-red-600"], [class^="bg-red-600 "], [class$=" bg-red-600"], [class*=" bg-red-600 "], [class="bg-red-400"], [class^="bg-red-400 "], [class$=" bg-red-400"], [class*=" bg-red-400 "], [class="bg-rose-500"], [class^="bg-rose-500 "], [class$=" bg-rose-500"], [class*=" bg-rose-500 "]):is([class]) { color: var(--mos-on-danger-deep); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-cyan-400"], [class^="bg-cyan-400 "], [class$=" bg-cyan-400"], [class*=" bg-cyan-400 "], [class="bg-cyan-500"], [class^="bg-cyan-500 "], [class$=" bg-cyan-500"], [class*=" bg-cyan-500 "], [class="bg-cyan-600"], [class^="bg-cyan-600 "], [class$=" bg-cyan-600"], [class*=" bg-cyan-600 "], [class="bg-cyan-700"], [class^="bg-cyan-700 "], [class$=" bg-cyan-700"], [class*=" bg-cyan-700 "]):is([class]) { color: var(--mos-on-accent); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-purple-500"], [class^="bg-purple-500 "], [class$=" bg-purple-500"], [class*=" bg-purple-500 "], [class="bg-purple-600"], [class^="bg-purple-600 "], [class$=" bg-purple-600"], [class*=" bg-purple-600 "], [class="bg-violet-500"], [class^="bg-violet-500 "], [class$=" bg-violet-500"], [class*=" bg-violet-500 "], [class="bg-violet-600"], [class^="bg-violet-600 "], [class$=" bg-violet-600"], [class*=" bg-violet-600 "]):is([class]) { color: var(--mos-on-accent-2); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-emerald-500"], [class^="bg-emerald-500 "], [class$=" bg-emerald-500"], [class*=" bg-emerald-500 "], [class="bg-emerald-600"], [class^="bg-emerald-600 "], [class$=" bg-emerald-600"], [class*=" bg-emerald-600 "], [class="bg-emerald-400"], [class^="bg-emerald-400 "], [class$=" bg-emerald-400"], [class*=" bg-emerald-400 "], [class="bg-green-500"], [class^="bg-green-500 "], [class$=" bg-green-500"], [class*=" bg-green-500 "], [class="bg-green-600"], [class^="bg-green-600 "], [class$=" bg-green-600"], [class*=" bg-green-600 "], [class="bg-green-400"], [class^="bg-green-400 "], [class$=" bg-green-400"], [class*=" bg-green-400 "]):is([class]) { color: var(--mos-on-success); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-yellow-500"], [class^="bg-yellow-500 "], [class$=" bg-yellow-500"], [class*=" bg-yellow-500 "], [class="bg-yellow-400"], [class^="bg-yellow-400 "], [class$=" bg-yellow-400"], [class*=" bg-yellow-400 "], [class="bg-yellow-600"], [class^="bg-yellow-600 "], [class$=" bg-yellow-600"], [class*=" bg-yellow-600 "]):is([class]) { color: var(--mos-on-caution); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-orange-500"], [class^="bg-orange-500 "], [class$=" bg-orange-500"], [class*=" bg-orange-500 "], [class="bg-orange-600"], [class^="bg-orange-600 "], [class$=" bg-orange-600"], [class*=" bg-orange-600 "], [class="bg-orange-400"], [class^="bg-orange-400 "], [class$=" bg-orange-400"], [class*=" bg-orange-400 "]):is([class]) { color: var(--mos-on-warn); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-amber-500"], [class^="bg-amber-500 "], [class$=" bg-amber-500"], [class*=" bg-amber-500 "], [class="bg-amber-600"], [class^="bg-amber-600 "], [class$=" bg-amber-600"], [class*=" bg-amber-600 "], [class="bg-amber-400"], [class^="bg-amber-400 "], [class$=" bg-amber-400"], [class*=" bg-amber-400 "]):is([class]) { color: var(--mos-on-amber); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-blue-500"], [class^="bg-blue-500 "], [class$=" bg-blue-500"], [class*=" bg-blue-500 "], [class="bg-blue-600"], [class^="bg-blue-600 "], [class$=" bg-blue-600"], [class*=" bg-blue-600 "], [class="bg-sky-500"], [class^="bg-sky-500 "], [class$=" bg-sky-500"], [class*=" bg-sky-500 "], [class="bg-indigo-500"], [class^="bg-indigo-500 "], [class$=" bg-indigo-500"], [class*=" bg-indigo-500 "], [class="bg-indigo-600"], [class^="bg-indigo-600 "], [class$=" bg-indigo-600"], [class*=" bg-indigo-600 "]):is([class]) { color: #ffffff; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class="bg-teal-500"], [class^="bg-teal-500 "], [class$=" bg-teal-500"], [class*=" bg-teal-500 "]):is([class]) { color: var(--mos-on-teal); }
/* hover states re-asserted at the same precedence so a hover fill never inherits the base fill's foreground */
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-red-500 "], [class$="hover:bg-red-500"], [class*="hover:bg-red-600 "], [class$="hover:bg-red-600"], [class*="hover:bg-red-700 "], [class$="hover:bg-red-700"]):is([class]):hover { background-color: var(--mos-danger-deep); color: var(--mos-on-danger-deep); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-cyan-500 "], [class$="hover:bg-cyan-500"], [class*="hover:bg-cyan-600 "], [class$="hover:bg-cyan-600"], [class*="hover:bg-cyan-400 "], [class$="hover:bg-cyan-400"]):is([class]):hover { background-color: var(--mos-accent-hover); color: var(--mos-on-accent); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-purple-500 "], [class$="hover:bg-purple-500"], [class*="hover:bg-purple-600 "], [class$="hover:bg-purple-600"]):is([class]):hover { background-color: var(--mos-accent-2-hover); color: var(--mos-on-accent-2); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is([class*="hover:bg-emerald-500 "], [class$="hover:bg-emerald-500"], [class*="hover:bg-emerald-600 "], [class$="hover:bg-emerald-600"], [class*="hover:bg-green-600 "], [class$="hover:bg-green-600"]):is([class]):hover { background-color: var(--mos-success); color: var(--mos-on-success); }