/* ============================================================================
   MUSIC OS — R5 design system tokens (Fable 5.1 candidate)
   Source of truth: reference/Riviera-Dusk-Demo.html (owner SoT). Riviera Dusk is the dark-first look;
   Daylight is its complete light rendition. "classic" (Original) defines NOTHING here so every app keeps
   its native presentation byte-for-byte.
   Contrast corrections versus the reference (small text needs 4.5:1 on its real composited background):
     - textMuted #7a8ca0 -> --mos-text-muted #93a4b6 (5.3:1 on slateBg); reference value kept as --rv-text-muted for
       decorative >= 18px use only.  textHint #7a90a8 -> #95a8bc (5.2:1 on trackBg).
     - active teal button: reference mix (~#407e78 + onTeal) = 3.9:1 -> --mos-teal-deep #316562 + onTeal = 5.5:1.
     - active coral button: reference mix (~#a2635d + onCoral) = 3.7:1 -> coralDeep #d67262 + dark on-coral #1f0e0b = 5.5:1.
     - danger button: dangerDeep #c04040 + cream = 4.4:1 -> dangerDark #a83838 + cream = 5.4:1.
     - danger/coral/teal as *text* on slate surfaces use the lightened --mos-*-text variants (>= 4.5:1).
   ========================================================================== */
@import url("./fonts.css");

:root[data-theme="riviera"],
:root[data-theme="daylight"] {
  /* R6 (2026-09-14): Playfair Display retired — logo blocks, page titles and modal titles run in Karla like every label.
     The display token stays because every app layer references it; it now points to the UI family. */
  --mos-font-display: "Karla", "Karla MOS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mos-font-ui: "Karla", "Karla MOS", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mos-font-mono: "JetBrains Mono", "JetBrains Mono MOS", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --mos-radius-xs: 2px; --mos-radius-sm: 4px; --mos-radius-md: 8px; --mos-radius-lg: 12px;
  /* R6 (2026-09-14, Music Pal build): card radius token from the Design Studio (shared.css --mos-radius-xl); cards / stat cards 16, panels 12 */
  --mos-radius-xl: 16px;
  --mos-fs-caption: 11px; --mos-fs-body: 13px; --mos-fs-heading: 16px; --mos-fs-display: 26px;
  --mos-track-label: .12em; --mos-track-section: .16em; --mos-track-eyebrow: .18em; --mos-track-button: .06em;
  --mos-motion: 150ms;
  /* legacy aliases kept for older adapters */
  --mos-radius: var(--mos-radius-md);
}

/* ---------------------------------------------------------------- Riviera Dusk */
:root[data-theme="riviera"] {
  color-scheme: dark;
  /* raw reference palette (unchanged) */
  --rv-bg-deep: #060e1a; --rv-panel-dark: #0c1828; --rv-output-bg: #080c18;
  --rv-navy: #152a40; --rv-slate-bg: #1a3048; --rv-slate: #2a4052;
  --rv-track-bg: #243448; --rv-track-deep: #1e3850; --rv-meter-scale: #3a6090;
  --rv-window-bg: #151d30; --rv-violet: #3a2848;
  --rv-cream: #fce8d8; --rv-text-label: #d8e8f0; --rv-text-bright: #c8dce8;
  --rv-text-section: #b8c8d8; --rv-text-on-slate: #8eb0c8; --rv-text-muted: #7a8ca0;
  --rv-text-hint: #7a90a8; --rv-text-dim: #5a7490;
  --rv-coral: #e07868; --rv-coral-deep: #d67262; --rv-coral-soft: #d07868; --rv-on-coral: #fce0d0; --rv-coral-edge: #e88878;
  --rv-amber: #e8c090; --rv-amber-light: #f0d0a8; --rv-on-amber: #1a1410;
  --rv-teal: #4a9888; --rv-teal-soft: #4a8870; --rv-teal-linked: #5aa090; --rv-on-teal: #d4f0e8;
  --rv-success: #6ec8a8; --rv-caution: #f0c058; --rv-warn: #f0a060;
  --rv-danger: #dc4f4f; --rv-danger-deep: #c04040; --rv-danger-dark: #a83838;
  --rv-flavour-clean: #507898; --rv-flavour-moog: #b86850; --rv-flavour-comb: #458878; --rv-legend-far: #f0a090;
  --rv-border: #2c4258; --rv-border-btn: #3a5068; --rv-slate-hover: #34506a;
  --rv-dusk: linear-gradient(180deg, #423658 0%, #3a2c48 14%, #1c3a58 32%, #153248 50%, #102438 68%, #0c1828 86%, #060e1a 100%);
  --rv-vignette: radial-gradient(120% 90% at 50% 100%, transparent 40%, rgba(20,8,24,.33) 100%);

  /* semantic surfaces */
  --mos-bg: var(--rv-bg-deep);
  --mos-surface: var(--rv-panel-dark);
  --mos-surface-raised: var(--rv-slate-bg);
  --mos-surface-raised-hover: #1e3650;
  --mos-surface-control: var(--rv-track-bg);
  --mos-surface-control-line: var(--rv-border-btn);
  --mos-surface-code: var(--rv-output-bg);
  --mos-surface-window: var(--rv-window-bg);
  --mos-button-bg: var(--rv-slate); --mos-button-hover: var(--rv-slate-hover); --mos-button-active: var(--rv-navy);
  --mos-button-line: var(--rv-border-btn); --mos-button-text: var(--rv-text-on-slate); --mos-button-text-hover: var(--rv-cream);
  --mos-line: var(--rv-border); --mos-line-soft: var(--rv-navy); --mos-line-strong: var(--rv-border-btn); --mos-grid: var(--rv-meter-scale);
  --mos-raise-1: rgba(96,140,184,.14); --mos-raise-2: rgba(110,152,196,.22); --mos-raise-3: rgba(130,172,212,.32);
  --mos-scrim: rgba(3,8,16,.72);
  --mos-shadow-panel: 0 20px 40px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04);
  --mos-shadow-float: 0 30px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  --mos-shadow-control: inset 0 1px 0 rgba(255,255,255,.03);
  --mos-inset-highlight: inset 0 1px 0 rgba(255,255,255,.05);
  /* text ramp */
  --mos-text: var(--rv-cream); --mos-text-label: var(--rv-text-label); --mos-text-body: var(--rv-text-bright);
  --mos-text-section: var(--rv-text-section); --mos-text-secondary: #a9b9c9; --mos-text-muted: #93a4b6;
  --mos-text-hint: #95a8bc; --mos-text-dim: var(--rv-text-dim); --mos-text-on-control: var(--rv-text-on-slate);
  /* accents */
  --mos-coral: var(--rv-coral); --mos-coral-deep: var(--rv-coral-deep); --mos-coral-edge: var(--rv-coral-edge);
  --mos-coral-text: #ec9484; --mos-on-coral: #1f0e0b; --mos-coral-soft: rgba(224,120,104,.16); --mos-coral-soft-hover: rgba(224,120,104,.28);
  --mos-amber: var(--rv-amber); --mos-amber-light: var(--rv-amber-light); --mos-amber-text: var(--rv-amber);
  --mos-on-amber: var(--rv-on-amber); --mos-amber-soft: rgba(232,192,144,.14); --mos-amber-soft-hover: rgba(232,192,144,.26);
  --mos-teal: var(--rv-teal); --mos-teal-deep: #316562; --mos-teal-edge: var(--rv-teal-linked); --mos-teal-text: #6cb3a3;
  --mos-on-teal: var(--rv-on-teal); --mos-teal-soft: rgba(74,152,136,.16); --mos-teal-soft-hover: rgba(74,152,136,.28);
  /* status (semantic, never accent) */
  --mos-success: var(--rv-success); --mos-success-text: var(--rv-success); --mos-on-success: #071a14; --mos-success-soft: rgba(110,200,168,.16);
  --mos-caution: var(--rv-caution); --mos-caution-text: var(--rv-caution); --mos-on-caution: #1c1404; --mos-caution-soft: rgba(240,192,88,.16);
  --mos-warn: var(--rv-warn); --mos-warn-text: var(--rv-warn); --mos-on-warn: #1c0e04; --mos-warn-soft: rgba(240,160,96,.16);
  --mos-danger: var(--rv-danger); --mos-danger-deep: var(--rv-danger-dark); --mos-danger-text: #f08a80; --mos-on-danger: #1a0808;
  --mos-on-danger-deep: var(--rv-cream);   /* light foreground for the deep danger fill (5.4:1); never the navy text ramp */
  --mos-danger-soft: rgba(220,79,79,.16); --mos-danger-soft-hover: rgba(220,79,79,.30);
  --mos-info: var(--rv-flavour-clean); --mos-info-text: #8fb8d8; --mos-info-soft: rgba(80,120,152,.24);
  --mos-flavour-clean: var(--rv-flavour-clean); --mos-flavour-moog: var(--rv-flavour-moog); --mos-flavour-comb: var(--rv-flavour-comb);
  --mos-salmon: var(--rv-legend-far); --mos-violet: var(--rv-violet); --mos-violet-text: #d8b8f0;
  --mos-focus: var(--rv-warn);
  --mos-dusk: var(--rv-dusk); --mos-vignette: var(--rv-vignette);
  /* graph field (Synapse): the dusk illustration; native label #c8c8e0 with dark halo reads at >= 6.7:1 on every stop */
  --mos-graph-field: var(--rv-dusk); --mos-graph-vignette: var(--rv-vignette);
  /* app accent defaults (Terminal / Synapse: teal primary, amber secondary) */
  --mos-accent: var(--mos-teal-deep); --mos-accent-hover: #2f6f6a; --mos-accent-edge: var(--mos-teal-edge);
  --mos-on-accent: var(--mos-on-teal); --mos-accent-text: var(--mos-teal-text); --mos-accent-soft: var(--mos-teal-soft); --mos-accent-soft-hover: var(--mos-teal-soft-hover);
  --mos-accent-2: var(--mos-amber); --mos-accent-2-hover: var(--mos-amber-light); --mos-accent-2-edge: var(--mos-amber-light);
  --mos-on-accent-2: var(--mos-on-amber); --mos-accent-2-text: var(--mos-amber-text); --mos-accent-2-soft: var(--mos-amber-soft);
  --mos-accent-gradient: linear-gradient(135deg, var(--mos-accent), var(--mos-accent-hover));
  /* Terminal native cost-control component reads these names */
  --mos-canvas: var(--mos-bg); --mos-text-tertiary: var(--mos-text-muted);
  --mos-signal: var(--mos-accent-text); --mos-signal-soft: var(--mos-accent-soft);
  --mos-ok: var(--mos-success); --mos-ok-soft: var(--mos-success-soft);
  --mos-critical: var(--mos-danger-text); --mos-critical-soft: var(--mos-danger-soft);
  /* older adapter aliases */
  --mos-border: var(--mos-line); --mos-selection: var(--rv-slate); --mos-warning: var(--mos-caution);
}

/* ---------------------------------------------------------------- Daylight */
:root[data-theme="daylight"] {
  color-scheme: light;
  --mos-bg: #f3efe8;
  --mos-surface: #ffffff;
  --mos-surface-raised: #faf7f2;
  --mos-surface-raised-hover: #f3eee6;
  --mos-surface-control: #fbf9f6;
  --mos-surface-control-line: #7f8fa0;
  --mos-surface-code: #edf0f3;
  --mos-surface-window: #f6f3ee;
  --mos-button-bg: #e9e2d8; --mos-button-hover: #ded5c8; --mos-button-active: #cfc4b4;
  --mos-button-line: #b9ad9d; --mos-button-text: #2c3e52; --mos-button-text-hover: #1a2a3c;
  --mos-line: #d5cdc2; --mos-line-soft: #e6e0d6; --mos-line-strong: #b9ad9d; --mos-grid: #a9b6c3;
  --mos-raise-1: rgba(26,42,60,.05); --mos-raise-2: rgba(26,42,60,.09); --mos-raise-3: rgba(26,42,60,.15);
  --mos-scrim: rgba(26,32,40,.50);
  --mos-shadow-panel: 0 12px 32px rgba(40,30,20,.10), inset 0 1px 0 rgba(255,255,255,.90);
  --mos-shadow-float: 0 24px 56px rgba(40,30,20,.18), inset 0 1px 0 #ffffff;
  --mos-shadow-control: inset 0 1px 2px rgba(26,42,60,.06);
  --mos-inset-highlight: inset 0 1px 0 rgba(255,255,255,.9);
  --mos-text: #1a2a3c; --mos-text-label: #22344a; --mos-text-body: #2c3e52;
  --mos-text-section: #3f5064; --mos-text-secondary: #46586c; --mos-text-muted: #56677a;
  --mos-text-hint: #5f6f80; --mos-text-dim: #7a8a9a; --mos-text-on-control: #2c3e52;
  --mos-coral: #b8463a; --mos-coral-deep: #a63d32; --mos-coral-edge: #8f3229;
  --mos-coral-text: #a63d32; --mos-on-coral: #fff6f2; --mos-coral-soft: rgba(184,70,58,.10); --mos-coral-soft-hover: rgba(184,70,58,.18);
  --mos-amber: #8f5f12; --mos-amber-light: #7a500e; --mos-amber-text: #7f5410;
  --mos-on-amber: #fff8ee; --mos-amber-soft: rgba(143,95,18,.10); --mos-amber-soft-hover: rgba(143,95,18,.18);
  --mos-teal: #256a5d; --mos-teal-deep: #1f5b50; --mos-teal-edge: #1a4d44; --mos-teal-text: #1f5f54;
  --mos-on-teal: #f0faf7; --mos-teal-soft: rgba(37,106,93,.10); --mos-teal-soft-hover: rgba(37,106,93,.18);
  --mos-success: #1e7a5a; --mos-success-text: #1b6f52; --mos-on-success: #f0fbf6; --mos-success-soft: rgba(30,122,90,.12);
  --mos-caution: #b58a00; --mos-caution-text: #7a5a00; --mos-on-caution: #241a00; --mos-caution-soft: rgba(181,138,0,.14);
  --mos-warn: #c8641e; --mos-warn-text: #9a4a14; --mos-on-warn: #24110a; --mos-warn-soft: rgba(200,100,30,.12);
  --mos-danger: #b3261e; --mos-danger-deep: #952019; --mos-danger-text: #a8231c; --mos-on-danger: #fff5f4;
  --mos-on-danger-deep: #fff5f4;   /* 8.5:1 on #952019 */
  --mos-danger-soft: rgba(179,38,30,.10); --mos-danger-soft-hover: rgba(179,38,30,.18);
  --mos-info: #3b6a92; --mos-info-text: #2f5f86; --mos-info-soft: rgba(59,106,146,.12);
  --mos-flavour-clean: #3b6a92; --mos-flavour-moog: #9a4f3a; --mos-flavour-comb: #2f6b5e;
  --mos-salmon: #c25a4a; --mos-violet: #6d4f86; --mos-violet-text: #5b3f74;
  --mos-focus: #b4501e;
  --mos-dusk: linear-gradient(180deg, #e7ddf0 0%, #dfe5f0 30%, #eceef1 65%, #f3efe8 100%);
  --mos-vignette: radial-gradient(120% 90% at 50% 100%, transparent 45%, rgba(60,40,70,.10) 100%);
  /* graph field (Synapse) stays a deep dusk viewport inside the light page: the untouched vis-network label colour
     (#c8c8e0 with #0a0a0f halo) and the untouched node/edge palette were designed for a dark ground (>= 5:1 on every stop) */
  --mos-graph-field: linear-gradient(180deg, #5a4f78 0%, #4a4a6c 30%, #3a4a66 60%, #2c3e56 100%);
  --mos-graph-vignette: radial-gradient(120% 90% at 50% 100%, transparent 40%, rgba(20,8,24,.28) 100%);
  --mos-accent: var(--mos-teal); --mos-accent-hover: var(--mos-teal-deep); --mos-accent-edge: var(--mos-teal-edge);
  --mos-on-accent: var(--mos-on-teal); --mos-accent-text: var(--mos-teal-text); --mos-accent-soft: var(--mos-teal-soft); --mos-accent-soft-hover: var(--mos-teal-soft-hover);
  --mos-accent-2: var(--mos-amber); --mos-accent-2-hover: var(--mos-amber-light); --mos-accent-2-edge: var(--mos-amber-light);
  --mos-on-accent-2: var(--mos-on-amber); --mos-accent-2-text: var(--mos-amber-text); --mos-accent-2-soft: var(--mos-amber-soft);
  --mos-accent-gradient: linear-gradient(135deg, var(--mos-accent), var(--mos-accent-hover));
  --mos-canvas: var(--mos-bg); --mos-text-tertiary: var(--mos-text-muted);
  --mos-signal: var(--mos-accent-text); --mos-signal-soft: var(--mos-accent-soft);
  --mos-ok: var(--mos-success); --mos-ok-soft: var(--mos-success-soft);
  --mos-critical: var(--mos-danger-text); --mos-critical-soft: var(--mos-danger-soft);
  --mos-border: var(--mos-line); --mos-selection: #e0d8cc; --mos-warning: var(--mos-caution);
}

/* ---------------------------------------------------------------- App character */
/* Music Pal: coral primary, amber secondary */
:root:is([data-theme="riviera"], [data-theme="daylight"])[data-music-app="music-pal"] {
  --mos-accent: var(--mos-coral-deep); --mos-accent-hover: var(--mos-coral); --mos-accent-edge: var(--mos-coral-edge);
  --mos-on-accent: var(--mos-on-coral); --mos-accent-text: var(--mos-coral-text);
  --mos-accent-soft: var(--mos-coral-soft); --mos-accent-soft-hover: var(--mos-coral-soft-hover);
  --mos-accent-2: var(--mos-amber); --mos-accent-2-hover: var(--mos-amber-light); --mos-accent-2-edge: var(--mos-amber-light);
  --mos-on-accent-2: var(--mos-on-amber); --mos-accent-2-text: var(--mos-amber-text); --mos-accent-2-soft: var(--mos-amber-soft);
}
:root[data-theme="daylight"][data-music-app="music-pal"] { --mos-accent: var(--mos-coral); --mos-accent-hover: var(--mos-coral-deep); }
/* Music Agent: amber primary, coral secondary */
:root:is([data-theme="riviera"], [data-theme="daylight"])[data-music-app="music-agent"] {
  --mos-accent: var(--mos-amber); --mos-accent-hover: var(--mos-amber-light); --mos-accent-edge: var(--mos-amber-light);
  --mos-on-accent: var(--mos-on-amber); --mos-accent-text: var(--mos-amber-text);
  --mos-accent-soft: var(--mos-amber-soft); --mos-accent-soft-hover: var(--mos-amber-soft-hover);
  --mos-accent-2: var(--mos-coral-deep); --mos-accent-2-hover: var(--mos-coral); --mos-accent-2-edge: var(--mos-coral-edge);
  --mos-on-accent-2: var(--mos-on-coral); --mos-accent-2-text: var(--mos-coral-text); --mos-accent-2-soft: var(--mos-coral-soft);
}
/* Synapse Surfer: teal primary, coral secondary */
:root:is([data-theme="riviera"], [data-theme="daylight"])[data-music-app="synapse"] {
  --mos-accent-2: var(--mos-coral-deep); --mos-accent-2-hover: var(--mos-coral); --mos-accent-2-edge: var(--mos-coral-edge);
  --mos-on-accent-2: var(--mos-on-coral); --mos-accent-2-text: var(--mos-coral-text); --mos-accent-2-soft: var(--mos-coral-soft);
}

/* ---------------------------------------------------------------- Base typography & behaviour (themed roots only) */
html:is([data-theme="riviera"], [data-theme="daylight"]) { background-color: var(--mos-bg); }
html:is([data-theme="riviera"], [data-theme="daylight"]) body {
  font-family: var(--mos-font-ui);
  color: var(--mos-text-body);
  background-color: var(--mos-bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(h1, h2, h3) {
  font-family: var(--mos-font-display);
  color: var(--mos-text);
  font-weight: 600;
  letter-spacing: -.01em;
  text-wrap: balance;
}
html:is([data-theme="riviera"], [data-theme="daylight"]) h1 { font-weight: 700; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(h4, h5, h6) { font-family: var(--mos-font-ui); color: var(--mos-text-label); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(code, kbd, samp, pre, .font-mono) { font-family: var(--mos-font-mono); }
html:is([data-theme="riviera"], [data-theme="daylight"]) :is(button, input, select, textarea, optgroup) { font-family: inherit; }
html:is([data-theme="riviera"], [data-theme="daylight"]) ::placeholder { color: var(--mos-text-hint); opacity: 1; }
html[data-theme="riviera"] ::selection { background: rgba(232,192,144,.35); color: #fce8d8; }
html[data-theme="daylight"] ::selection { background: rgba(143,95,18,.25); color: #1a2a3c; }
html:is([data-theme="riviera"], [data-theme="daylight"]) :focus-visible { outline: 2px solid var(--mos-focus); outline-offset: 2px; }
html:is([data-theme="riviera"], [data-theme="daylight"]) ::-webkit-scrollbar { width: 8px; height: 8px; }
html:is([data-theme="riviera"], [data-theme="daylight"]) ::-webkit-scrollbar-track { background: transparent; }
html:is([data-theme="riviera"], [data-theme="daylight"]) ::-webkit-scrollbar-thumb { background: var(--mos-line-strong); border-radius: 4px; }
html:is([data-theme="riviera"], [data-theme="daylight"]) ::-webkit-scrollbar-thumb:hover { background: var(--mos-text-muted); }
html:is([data-theme="riviera"], [data-theme="daylight"]) { scrollbar-color: var(--mos-line-strong) transparent; }
@media (prefers-reduced-motion: reduce) {
  html:is([data-theme="riviera"], [data-theme="daylight"]) *,
  html:is([data-theme="riviera"], [data-theme="daylight"]) *::before,
  html:is([data-theme="riviera"], [data-theme="daylight"]) *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------- Shared primitives (all themes incl. Original; fallbacks stay neutral) */
.mos-theme-control {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 500 12px/1 var(--mos-font-ui, inherit); letter-spacing: .06em; text-transform: uppercase;
  color: var(--mos-text-secondary, inherit);
}
.mos-theme-control-label { white-space: nowrap; }
.mos-theme-control select {
  font: inherit; font-size: 13px; text-transform: none; letter-spacing: 0; line-height: 1.2;
  min-height: 32px; max-width: 180px; padding: 6px 28px 6px 10px; cursor: pointer;
  border-radius: var(--mos-radius-md, 8px);
  background-color: var(--mos-surface-control, rgba(127,127,127,.15));
  color: var(--mos-text-label, inherit);
  border: 1px solid var(--mos-surface-control-line, rgba(127,127,127,.55));
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%238eb0c8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
}
html[data-theme="daylight"] .mos-theme-control select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%232c3e52' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.mos-theme-control select:hover { border-color: var(--mos-text-muted, rgba(127,127,127,.8)); }
.mos-theme-control select:focus-visible { outline: 2px solid var(--mos-focus, #f0a060); outline-offset: 2px; }
.mos-theme-control select[data-mos-persisted="false"] { border-color: var(--mos-danger, #dc4f4f); }
.mos-theme-control--compact .mos-theme-control-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mos-theme-notice-host {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 2147483000;
  display: grid; gap: 8px; width: min(600px, calc(100vw - 24px)); pointer-events: none;
  font-family: var(--mos-font-ui, system-ui, sans-serif);
}
.mos-theme-notice {
  pointer-events: auto; display: grid; gap: 10px;
  background: var(--mos-surface-raised, #1a3048); color: var(--mos-text-body, #e0e6ee);
  border: 1px solid var(--mos-line-strong, #3a5068); border-radius: var(--mos-radius-lg, 12px);
  padding: 12px 14px; box-shadow: var(--mos-shadow-float, 0 20px 40px rgba(0,0,0,.4));
  font-size: 13px; line-height: 1.45;
}
.mos-theme-notice--migration { border-left: 4px solid var(--mos-amber, #e8c090); }
.mos-theme-notice--error { border-left: 4px solid var(--mos-danger, #dc4f4f); }
.mos-theme-notice-text { margin: 0; }
.mos-theme-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mos-theme-notice-btn {
  font: 500 12px/1 var(--mos-font-ui, inherit); letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 12px; border-radius: var(--mos-radius-md, 8px); cursor: pointer;
  border: 1px solid var(--mos-button-line, #3a5068); background: var(--mos-button-bg, #2a4052); color: var(--mos-button-text, #d8e8f0);
}
.mos-theme-notice-btn:hover { background: var(--mos-button-hover, #34506a); color: var(--mos-button-text-hover, #fce8d8); }
.mos-theme-notice-btn:focus-visible { outline: 2px solid var(--mos-focus, #f0a060); outline-offset: 2px; }
.mos-theme-notice-btn--primary { background: var(--mos-accent-2, #e8c090); color: var(--mos-on-accent-2, #1a1410); border-color: var(--mos-accent-2-edge, #f0d0a8); font-weight: 700; }
.mos-theme-notice-btn--primary:hover { background: var(--mos-accent-2-hover, #f0d0a8); color: var(--mos-on-accent-2, #1a1410); }

/* ---------------------------------------------------------------- Shared component vocabulary (opt-in classes for hand-written DOM) */
html:is([data-theme="riviera"], [data-theme="daylight"]) .mos-eyebrow {
  font: 500 var(--mos-fs-caption)/1.2 var(--mos-font-ui); letter-spacing: var(--mos-track-eyebrow); text-transform: uppercase; color: var(--mos-text-muted);
}
html:is([data-theme="riviera"], [data-theme="daylight"]) .mos-label {
  font: 700 var(--mos-fs-caption)/1 var(--mos-font-ui); letter-spacing: var(--mos-track-label); text-transform: uppercase; color: var(--mos-text-section);
}
html:is([data-theme="riviera"], [data-theme="daylight"]) .mos-panel-dusk {
  position: relative; background: var(--mos-dusk); border: 1px solid var(--mos-line); border-radius: var(--mos-radius-lg); overflow: hidden;
}
html:is([data-theme="riviera"], [data-theme="daylight"]) .mos-panel-dusk::after { content: ""; position: absolute; inset: 0; background: var(--mos-vignette); pointer-events: none; }
html:is([data-theme="riviera"], [data-theme="daylight"]) .mos-panel-dusk > * { position: relative; z-index: 1; }