/* Semantic visual system for all merchant-facing pages rendered by layout.html. */
:root {
  color-scheme: var(--merchant-color-scheme, dark);
  --merchant-bg: #0e1116;
  --merchant-surface: #171b22;
  --merchant-surface-muted: #1d232c;
  --merchant-surface-raised: #242c37;
  --merchant-ink: #f1f5f9;
  --merchant-ink-soft: #c3ccd7;
  --merchant-muted: #8e9aaa;
  --merchant-line: rgba(255, 255, 255, 0.11);
  --merchant-line-strong: rgba(255, 255, 255, 0.2);
  --merchant-accent: #60a5fa;
  --merchant-accent-strong: #3b82f6;
  --merchant-accent-soft: rgba(59, 130, 246, 0.18);
  --merchant-success: #4ade80;
  --merchant-success-soft: rgba(34, 197, 94, 0.16);
  --merchant-warning: #fbbf24;
  --merchant-warning-soft: rgba(245, 158, 11, 0.17);
  --merchant-danger: #fb7185;
  --merchant-danger-soft: rgba(244, 63, 94, 0.17);
  --merchant-info: #67e8f9;
  --merchant-field: var(--merchant-surface-muted);
  --merchant-action-surface: #090c10;
  --merchant-action-ink: #ffffff;
  --merchant-code-surface: #090c10;
  --merchant-code-ink: #f1f5f9;
  --merchant-purple: #c4b5fd;
  --merchant-purple-soft: rgba(139, 92, 246, 0.16);
  --merchant-cyan-soft: rgba(34, 211, 238, 0.16);
  --merchant-overlay: rgba(0, 0, 0, 0.42);
  --merchant-shadow: rgba(0, 0, 0, 0.24);
}

html:has(body.merchant-theme) {
  min-width: 320px;
  background: var(--merchant-bg);
  color-scheme: inherit;
  scrollbar-color: var(--merchant-line-strong) var(--merchant-bg);
}

body.merchant-theme {
  background: var(--merchant-bg) !important;
  color: var(--merchant-ink) !important;
  color-scheme: inherit;
}

body.merchant-theme ::selection {
  background: var(--merchant-accent-soft);
  color: var(--merchant-ink);
}

body.merchant-theme main,
body.merchant-theme footer {
  color: var(--merchant-ink);
}

body.merchant-theme input,
body.merchant-theme select,
body.merchant-theme textarea {
  background-color: var(--merchant-field) !important;
  border-color: var(--merchant-line-strong) !important;
  color: var(--merchant-ink) !important;
  color-scheme: inherit;
}

body.merchant-theme input::placeholder,
body.merchant-theme textarea::placeholder {
  color: var(--merchant-muted) !important;
}

/* Neutral surfaces and text utilities used throughout the merchant templates. */
.merchant-theme [class~="bg-white"],
.merchant-theme [class~="bg-white/95"],
.merchant-theme [class~="bg-gray-50"],
.merchant-theme [class~="bg-gray-50/30"],
.merchant-theme [class~="bg-gray-50/50"],
.merchant-theme [class~="bg-slate-50"],
.merchant-theme [class~="bg-slate-100"],
.merchant-theme [class~="bg-gray-100"],
.merchant-theme [class~="bg-gray-200"],
.merchant-theme [class~="bg-slate-200"],
.merchant-theme [class~="bg-gray-300"],
.merchant-theme [class~="bg-slate-300"],
.merchant-theme [class~="bg-gray-400"],
.merchant-theme [class~="bg-gray-700"],
.merchant-theme [class~="bg-gray-800"],
.merchant-theme [class~="bg-gray-900"],
.merchant-theme [class~="bg-gray-950"],
.merchant-theme [class~="bg-slate-900"],
.merchant-theme [class~="bg-slate-950"],
.merchant-theme [class*="bg-[#f5f7fb]"] {
  background-color: var(--merchant-surface) !important;
}

.merchant-theme [class~="bg-gray-50"],
.merchant-theme [class~="bg-gray-50/30"],
.merchant-theme [class~="bg-gray-50/50"],
.merchant-theme [class~="bg-slate-50"],
.merchant-theme [class~="bg-slate-100"],
.merchant-theme [class~="bg-gray-100"],
.merchant-theme [class~="bg-gray-200"],
.merchant-theme [class~="bg-slate-200"] {
  background-color: var(--merchant-surface-muted) !important;
}

.merchant-theme [class~="bg-gray-300"],
.merchant-theme [class~="bg-slate-300"],
.merchant-theme [class~="bg-gray-400"],
.merchant-theme [class~="bg-gray-700"],
.merchant-theme [class~="bg-gray-800"] {
  background-color: var(--merchant-surface-raised) !important;
}

.merchant-theme [class~="bg-gray-900"],
.merchant-theme [class~="bg-gray-950"],
.merchant-theme [class~="bg-slate-900"],
.merchant-theme [class~="bg-slate-950"],
.merchant-theme [class~="bg-black"] {
  background-color: var(--merchant-action-surface) !important;
}

.merchant-theme [class~="text-gray-950"],
.merchant-theme [class~="text-gray-900"],
.merchant-theme [class~="text-gray-800"],
.merchant-theme [class~="text-slate-950"],
.merchant-theme [class~="text-slate-900"],
.merchant-theme [class~="text-slate-800"] {
  color: var(--merchant-ink) !important;
}

.merchant-theme [class~="text-gray-700"],
.merchant-theme [class~="text-gray-600"],
.merchant-theme [class~="text-slate-700"],
.merchant-theme [class~="text-slate-600"] {
  color: var(--merchant-ink-soft) !important;
}

.merchant-theme [class~="text-gray-500"],
.merchant-theme [class~="text-gray-400"],
.merchant-theme [class~="text-gray-300"],
.merchant-theme [class~="text-slate-500"],
.merchant-theme [class~="text-slate-400"],
.merchant-theme [class~="text-slate-300"] {
  color: var(--merchant-muted) !important;
}

/* Borders, separators and form focus states. */
.merchant-theme [class~="border-gray-50"],
.merchant-theme [class~="border-gray-100"],
.merchant-theme [class~="border-gray-200"],
.merchant-theme [class~="border-gray-300"],
.merchant-theme [class~="border-gray-400"],
.merchant-theme [class~="border-gray-600"],
.merchant-theme [class~="border-gray-700"],
.merchant-theme [class~="border-gray-800"],
.merchant-theme [class~="border-gray-900"],
.merchant-theme [class~="border-slate-100"],
.merchant-theme [class~="border-slate-200"],
.merchant-theme [class~="border-slate-300"],
.merchant-theme [class~="border-white"],
.merchant-theme [class~="divide-gray-100"],
.merchant-theme [class~="divide-gray-200"],
.merchant-theme [class~="divide-slate-100"],
.merchant-theme [class~="divide-amber-200"] {
  border-color: var(--merchant-line) !important;
}

.merchant-theme [class~="ring-offset-white"] {
  --tw-ring-offset-color: var(--merchant-bg) !important;
}

.merchant-theme [class~="focus:ring-blue-500"]:focus,
.merchant-theme [class~="focus:ring-2"]:focus {
  --tw-ring-color: var(--merchant-accent) !important;
}

.merchant-theme [class~="focus:border-blue-500"]:focus,
.merchant-theme [class~="focus:border-gray-900"]:focus {
  border-color: var(--merchant-accent) !important;
}

.merchant-theme [class~="border-transparent"] {
  border-color: transparent !important;
}

.merchant-theme [class~="border-blue-100"],
.merchant-theme [class~="border-blue-200"],
.merchant-theme [class~="border-blue-300"],
.merchant-theme [class~="border-blue-400"],
.merchant-theme [class~="border-blue-500"],
.merchant-theme [class~="border-blue-500/40"],
.merchant-theme [class~="border-emerald-100"],
.merchant-theme [class~="border-emerald-200"],
.merchant-theme [class~="border-emerald-500/40"],
.merchant-theme [class~="border-green-100"],
.merchant-theme [class~="border-green-200"],
.merchant-theme [class~="border-amber-100"],
.merchant-theme [class~="border-amber-200"],
.merchant-theme [class~="border-amber-300"],
.merchant-theme [class~="border-amber-400"],
.merchant-theme [class~="border-amber-500/40"],
.merchant-theme [class~="border-yellow-200"],
.merchant-theme [class~="border-red-100"],
.merchant-theme [class~="border-red-200"],
.merchant-theme [class~="border-red-500"],
.merchant-theme [class~="border-red-500/40"],
.merchant-theme [class~="border-orange-100"],
.merchant-theme [class~="border-orange-500/40"],
.merchant-theme [class~="border-violet-100"],
.merchant-theme [class~="border-cyan-100"] {
  border-color: var(--merchant-line-strong) !important;
}

.merchant-theme [class~="border"] {
  border-color: var(--merchant-line) !important;
}

/* Blue, green, amber and red utilities retain their semantic meaning on dark surfaces. */
.merchant-theme [class~="bg-blue-50"],
.merchant-theme [class~="bg-blue-50/50"],
.merchant-theme [class~="bg-blue-100"] {
  background-color: var(--merchant-accent-soft) !important;
}

.merchant-theme [class~="bg-blue-600"] {
  background-color: #2563eb !important;
}

.merchant-theme [class~="bg-blue-700"] {
  background-color: #1d4ed8 !important;
}

.merchant-theme [class~="bg-blue-600/15"] {
  background-color: var(--merchant-accent-soft) !important;
}

.merchant-theme [class~="text-blue-900"],
.merchant-theme [class~="text-blue-800"],
.merchant-theme [class~="text-blue-700"],
.merchant-theme [class~="text-blue-600"],
.merchant-theme [class~="text-blue-500"],
.merchant-theme [class~="text-blue-200"] {
  color: var(--merchant-accent) !important;
}

.merchant-theme [class~="bg-emerald-50"],
.merchant-theme [class~="bg-emerald-100"],
.merchant-theme [class~="bg-green-50"],
.merchant-theme [class~="bg-green-100"] {
  background-color: var(--merchant-success-soft) !important;
}

.merchant-theme [class~="bg-emerald-600"],
.merchant-theme [class~="bg-emerald-700"],
.merchant-theme [class~="bg-green-500"],
.merchant-theme [class~="bg-emerald-600/15"] {
  background-color: #16a34a !important;
}

.merchant-theme [class~="text-emerald-900"],
.merchant-theme [class~="text-emerald-800"],
.merchant-theme [class~="text-emerald-700"],
.merchant-theme [class~="text-emerald-600"],
.merchant-theme [class~="text-emerald-200"],
.merchant-theme [class~="text-green-800"],
.merchant-theme [class~="text-green-700"],
.merchant-theme [class~="text-green-600"] {
  color: var(--merchant-success) !important;
}

.merchant-theme [class~="bg-amber-50"],
.merchant-theme [class~="bg-amber-50/40"],
.merchant-theme [class~="bg-amber-50/50"],
.merchant-theme [class~="bg-amber-100"],
.merchant-theme [class~="bg-amber-200"],
.merchant-theme [class~="bg-yellow-50"],
.merchant-theme [class~="bg-yellow-100"],
.merchant-theme [class~="bg-orange-50"],
.merchant-theme [class~="bg-orange-100"] {
  background-color: var(--merchant-warning-soft) !important;
}

.merchant-theme [class~="bg-amber-600"],
.merchant-theme [class~="bg-amber-700"],
.merchant-theme [class~="bg-orange-600"],
.merchant-theme [class~="bg-amber-600/15"] {
  background-color: #b7791f !important;
}

.merchant-theme [class~="text-amber-950"],
.merchant-theme [class~="text-amber-900"],
.merchant-theme [class~="text-amber-800"],
.merchant-theme [class~="text-amber-700"],
.merchant-theme [class~="text-amber-600"],
.merchant-theme [class~="text-amber-200"],
.merchant-theme [class~="text-yellow-700"],
.merchant-theme [class~="text-yellow-600"],
.merchant-theme [class~="text-orange-700"],
.merchant-theme [class~="text-orange-600"] {
  color: var(--merchant-warning) !important;
}

.merchant-theme [class~="bg-red-50"],
.merchant-theme [class~="bg-red-50/60"],
.merchant-theme [class~="bg-red-100"],
.merchant-theme [class~="bg-rose-50"] {
  background-color: var(--merchant-danger-soft) !important;
}

.merchant-theme [class~="bg-red-600"],
.merchant-theme [class~="bg-red-700"],
.merchant-theme [class~="bg-red-500"],
.merchant-theme [class~="bg-red-600/15"] {
  background-color: #be3b51 !important;
}

.merchant-theme [class~="text-red-950"],
.merchant-theme [class~="text-red-900"],
.merchant-theme [class~="text-red-800"],
.merchant-theme [class~="text-red-700"],
.merchant-theme [class~="text-red-600"],
.merchant-theme [class~="text-red-500"],
.merchant-theme [class~="text-red-200"],
.merchant-theme [class~="text-rose-700"],
.merchant-theme [class~="text-rose-500"] {
  color: var(--merchant-danger) !important;
}

.merchant-theme [class~="bg-emerald-600/15"] {
  background-color: var(--merchant-success-soft) !important;
}

.merchant-theme [class~="bg-amber-600/15"] {
  background-color: var(--merchant-warning-soft) !important;
}

.merchant-theme [class~="bg-red-600/15"],
.merchant-theme [class~="bg-orange-600/15"] {
  background-color: var(--merchant-danger-soft) !important;
}

.merchant-theme [class~="bg-purple-50"],
.merchant-theme [class~="bg-violet-50"] {
  background-color: var(--merchant-purple-soft) !important;
}

.merchant-theme [class~="bg-cyan-50"] {
  background-color: var(--merchant-cyan-soft) !important;
}

.merchant-theme [class~="text-purple-500"],
.merchant-theme [class~="text-violet-600"] {
  color: var(--merchant-purple) !important;
}

.merchant-theme [class~="text-cyan-600"] {
  color: var(--merchant-info) !important;
}

/* Hover/focus utility variants from the CDN need dark targets too. */
.merchant-theme [class~="hover:bg-white"]:hover,
.merchant-theme [class~="hover:bg-gray-50"]:hover,
.merchant-theme [class~="hover:bg-gray-50/50"]:hover,
.merchant-theme [class~="hover:bg-gray-100"]:hover,
.merchant-theme [class~="hover:bg-gray-300"]:hover,
.merchant-theme [class~="hover:bg-slate-50"]:hover,
.merchant-theme [class~="hover:bg-blue-50"]:hover,
.merchant-theme [class~="hover:bg-blue-100"]:hover,
.merchant-theme [class~="hover:bg-emerald-100"]:hover,
.merchant-theme [class~="hover:bg-amber-100"]:hover,
.merchant-theme [class~="hover:bg-amber-200"]:hover,
.merchant-theme [class~="hover:bg-red-50"]:hover,
.merchant-theme [class~="hover:bg-red-100"]:hover {
  background-color: var(--merchant-surface-raised) !important;
}

.merchant-theme [class~="hover:bg-blue-700"]:hover {
  background-color: var(--merchant-accent-strong) !important;
}

.merchant-theme [class~="hover:bg-emerald-700"]:hover {
  background-color: #15803d !important;
}

.merchant-theme [class~="hover:bg-amber-700"]:hover {
  background-color: #a16207 !important;
}

.merchant-theme [class~="hover:bg-red-700"]:hover {
  background-color: #be123c !important;
}

.merchant-theme [class~="hover:text-gray-950"]:hover,
.merchant-theme [class~="hover:text-gray-900"]:hover,
.merchant-theme [class~="hover:text-gray-800"]:hover,
.merchant-theme [class~="hover:text-gray-700"]:hover,
.merchant-theme [class~="hover:text-gray-600"]:hover,
.merchant-theme [class~="hover:text-slate-900"]:hover,
.merchant-theme [class~="hover:text-slate-700"]:hover {
  color: var(--merchant-ink) !important;
}

.merchant-theme [class~="hover:text-blue-900"]:hover,
.merchant-theme [class~="hover:text-blue-800"]:hover,
.merchant-theme [class~="hover:text-blue-700"]:hover,
.merchant-theme [class~="hover:text-blue-600"]:hover {
  color: var(--merchant-accent) !important;
}

.merchant-theme [class~="hover:text-amber-950"]:hover,
.merchant-theme [class~="hover:text-amber-700"]:hover {
  color: var(--merchant-warning) !important;
}

.merchant-theme [class~="hover:text-red-700"]:hover {
  color: var(--merchant-danger) !important;
}

.merchant-theme [class~="hover:border-gray-300"]:hover,
.merchant-theme [class~="hover:border-gray-400"]:hover,
.merchant-theme [class~="hover:border-blue-200"]:hover,
.merchant-theme [class~="hover:border-blue-400"]:hover {
  border-color: var(--merchant-line-strong) !important;
}

/* Components that are not purely utility based. */
.merchant-theme [role="menu"],
.merchant-theme [data-nav-menu-panel],
.merchant-theme [data-menu-panel] {
  background-color: var(--merchant-surface) !important;
  border-color: var(--merchant-line-strong) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42) !important;
}

.merchant-theme [data-app-navbar] {
  background-color: var(--merchant-action-surface) !important;
  border-color: var(--merchant-line) !important;
}

.merchant-theme [data-app-navbar] [class~="bg-white"] {
  background-color: var(--merchant-surface-raised) !important;
}

.merchant-theme [data-app-navbar] [class~="text-gray-950"] {
  color: var(--merchant-ink) !important;
}

.merchant-theme table thead,
.merchant-theme table [class~="bg-gray-50"],
.merchant-theme table [class~="bg-gray-50/50"] {
  background-color: var(--merchant-surface-muted) !important;
}

.merchant-theme table tbody tr:hover,
.merchant-theme table tbody tr:hover td {
  background-color: var(--merchant-surface-raised) !important;
}

.merchant-theme .history-table tbody tr {
  background: var(--merchant-surface) !important;
}

.merchant-theme .history-table tbody tr:hover {
  background: var(--merchant-surface-raised) !important;
}

.merchant-theme .occurrence-title,
.merchant-theme .occurrence-details summary {
  color: var(--merchant-danger) !important;
}

.merchant-theme .occurrence-card.reported .occurrence-title,
.merchant-theme .occurrence-card.reported .occurrence-details summary {
  color: var(--merchant-warning) !important;
}

.merchant-theme .occurrence-dot {
  background: var(--merchant-danger) !important;
}

.merchant-theme .occurrence-card.reported .occurrence-dot {
  background: var(--merchant-warning) !important;
}

.merchant-theme .occurrence-message {
  color: var(--merchant-ink-soft) !important;
}

.merchant-theme .occurrence-meta,
.merchant-theme .occurrence-technical {
  color: var(--merchant-muted) !important;
}

.merchant-theme .shadow-sm,
.merchant-theme .shadow-lg,
.merchant-theme .shadow-xl {
  --tw-shadow: 0 8px 26px var(--merchant-shadow) !important;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.merchant-theme [disabled] {
  color: var(--merchant-muted) !important;
}

.merchant-heat-cell {
  background-color: var(--merchant-accent-soft);
  border-color: var(--merchant-line-strong) !important;
  background-image: linear-gradient(
    color-mix(in srgb, var(--merchant-accent) var(--heat-strength), transparent),
    color-mix(in srgb, var(--merchant-accent) var(--heat-strength), transparent)
  );
}

.merchant-heat-legend {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--merchant-accent) 8%, var(--merchant-surface)),
    var(--merchant-accent)
  );
}

@media print {
  body.merchant-theme {
    color-scheme: light;
  }
}

/* Shared theme control and the light merchant palette. */
.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--merchant-line);
  border-radius: 7px;
  background: var(--merchant-surface-muted);
  padding: 2px;
}

.theme-picker button {
  display: inline-flex;
  min-width: 28px;
  height: 27px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--merchant-muted);
  cursor: pointer;
  font-size: 11px;
  transition: background-color 160ms ease, color 160ms ease;
}

.theme-picker button:hover,
.theme-picker button:focus-visible {
  background: var(--merchant-surface-raised);
  color: var(--merchant-ink);
  outline: none;
}

.theme-picker button:focus-visible {
  outline: 2px solid var(--merchant-accent);
  outline-offset: 2px;
}

.theme-picker button.is-selected {
  background: var(--merchant-accent);
  color: #fff;
}

.theme-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
  padding: 7px 9px;
  color: var(--merchant-ink-soft);
  font-size: 12px;
}

.merchant-login-page {
  position: relative;
}

.merchant-login-page .theme-login-picker {
  position: absolute;
  top: 20px;
  right: 20px;
}

html[data-theme="light"] {
  color-scheme: light;
  --merchant-color-scheme: light;
  --merchant-bg: #f5f7fa;
  --merchant-surface: #ffffff;
  --merchant-surface-muted: #eef2f6;
  --merchant-surface-raised: #e4ebf2;
  --merchant-ink: #17212b;
  --merchant-ink-soft: #3a4a59;
  --merchant-muted: #596b7b;
  --merchant-line: #d7e0e8;
  --merchant-line-strong: #bdcbd7;
  --merchant-accent: #1769d1;
  --merchant-accent-strong: #1258b3;
  --merchant-accent-soft: #e3efff;
  --merchant-success: #137a49;
  --merchant-success-soft: #e5f6ed;
  --merchant-warning: #9b5a00;
  --merchant-warning-soft: #fff2d9;
  --merchant-danger: #bd3e50;
  --merchant-danger-soft: #fde9ed;
  --merchant-info: #087394;
  --merchant-field: #ffffff;
  --merchant-action-surface: #17212b;
  --merchant-action-ink: #ffffff;
  --merchant-code-surface: #17212b;
  --merchant-code-ink: #f7fafc;
  --merchant-purple: #6d28d9;
  --merchant-purple-soft: #f0eaff;
  --merchant-cyan-soft: #e0f7fb;
  --merchant-overlay: rgba(23, 33, 43, 0.42);
  --merchant-shadow: rgba(30, 50, 70, 0.12);
}

html[data-theme="light"] body.merchant-theme {
  background: var(--merchant-bg) !important;
  color: var(--merchant-ink) !important;
  color-scheme: light;
}

html[data-theme="light"] body.merchant-theme input,
html[data-theme="light"] body.merchant-theme select,
html[data-theme="light"] body.merchant-theme textarea {
  background-color: var(--merchant-field) !important;
  color-scheme: light;
}

html[data-theme="light"] .merchant-theme [role="menu"],
html[data-theme="light"] .merchant-theme [data-nav-menu-panel],
html[data-theme="light"] .merchant-theme [data-menu-panel] {
  background-color: var(--merchant-surface) !important;
  border-color: var(--merchant-line-strong) !important;
  box-shadow: 0 16px 32px rgba(30, 50, 70, 0.14) !important;
}

/* Outrank the inverse utility backgrounds below: the navbar is a surface. */
html[data-theme="light"] body.merchant-theme [data-app-navbar] {
  background-color: var(--merchant-surface) !important;
  border-color: var(--merchant-line) !important;
  color: var(--merchant-ink) !important;
}

html[data-theme="light"] .merchant-theme [data-app-navbar] [class~="bg-gray-900"],
html[data-theme="light"] .merchant-theme [data-app-navbar] [class~="bg-gray-950"] {
  background-color: var(--merchant-surface-muted) !important;
}

html[data-theme="light"] .merchant-theme .shadow-sm,
html[data-theme="light"] .merchant-theme .shadow-lg,
html[data-theme="light"] .merchant-theme .shadow-xl {
  --tw-shadow: 0 8px 24px var(--merchant-shadow) !important;
}

/* Light mode keeps the hierarchy of the original utility classes instead of
   flattening every neutral surface into white. Dark utility backgrounds are
   reserved for readable actions and code blocks. */
html[data-theme="light"] .merchant-theme [class~="bg-white"],
html[data-theme="light"] .merchant-theme [class~="bg-white/95"] {
  background-color: var(--merchant-surface) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-gray-50"],
html[data-theme="light"] .merchant-theme [class~="bg-gray-50/30"],
html[data-theme="light"] .merchant-theme [class~="bg-gray-50/50"],
html[data-theme="light"] .merchant-theme [class~="bg-slate-50"],
html[data-theme="light"] .merchant-theme [class~="bg-gray-100"],
html[data-theme="light"] .merchant-theme [class~="bg-slate-100"] {
  background-color: var(--merchant-surface-muted) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-gray-200"],
html[data-theme="light"] .merchant-theme [class~="bg-slate-200"],
html[data-theme="light"] .merchant-theme [class~="bg-gray-300"],
html[data-theme="light"] .merchant-theme [class~="bg-slate-300"] {
  background-color: var(--merchant-surface-raised) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-gray-400"] {
  background-color: var(--merchant-line-strong) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-gray-700"] {
  background-color: var(--merchant-surface-raised) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-gray-800"][class~="text-white"],
html[data-theme="light"] .merchant-theme [class~="bg-gray-800"][class~="text-gray-100"],
html[data-theme="light"] .merchant-theme [class~="bg-gray-800"][class~="text-gray-200"] {
  background-color: var(--merchant-accent-soft) !important;
  color: var(--merchant-accent) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-gray-900"],
html[data-theme="light"] .merchant-theme [class~="bg-gray-950"],
html[data-theme="light"] .merchant-theme [class~="bg-slate-900"],
html[data-theme="light"] .merchant-theme [class~="bg-slate-950"],
html[data-theme="light"] .merchant-theme [class~="bg-black"] {
  background-color: var(--merchant-action-surface) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-gray-900"][class~="text-gray-100"],
html[data-theme="light"] .merchant-theme [class~="bg-gray-900"][class~="text-gray-200"],
html[data-theme="light"] .merchant-theme [class~="bg-gray-950"][class~="text-gray-100"],
html[data-theme="light"] .merchant-theme [class~="bg-slate-950"][class~="text-gray-100"] {
  color: var(--merchant-code-ink) !important;
}

html[data-theme="light"] .merchant-theme [class~="text-gray-100"],
html[data-theme="light"] .merchant-theme [class~="text-gray-200"],
html[data-theme="light"] .merchant-theme [class~="text-gray-300"],
html[data-theme="light"] .merchant-theme [class~="text-slate-300"] {
  color: var(--merchant-ink-soft) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-gray-900"] [class~="text-gray-100"],
html[data-theme="light"] .merchant-theme [class~="bg-gray-950"] [class~="text-gray-100"],
html[data-theme="light"] .merchant-theme [class~="bg-slate-950"] [class~="text-gray-100"] {
  color: var(--merchant-code-ink) !important;
}

html[data-theme="light"] .merchant-theme [class~="text-purple-500"],
html[data-theme="light"] .merchant-theme [class~="text-violet-600"] {
  color: var(--merchant-purple) !important;
}

html[data-theme="light"] .merchant-theme [class~="text-orange-500"],
html[data-theme="light"] .merchant-theme [class~="text-orange-600"] {
  color: var(--merchant-warning) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-purple-50"],
html[data-theme="light"] .merchant-theme [class~="bg-violet-50"] {
  background-color: var(--merchant-purple-soft) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-cyan-50"] {
  background-color: var(--merchant-cyan-soft) !important;
}

/* Navigation hovers use a light surface; primary actions keep a dark surface
   so their white labels remain readable. */
html[data-theme="light"] .merchant-theme [data-app-navbar] [class~="hover:bg-gray-800"]:hover,
html[data-theme="light"] .merchant-theme [data-app-navbar] [class~="hover:bg-gray-700"]:hover {
  background-color: var(--merchant-surface-raised) !important;
}

html[data-theme="light"] .merchant-theme :is([class~="bg-black"], [class~="bg-gray-900"], [class~="bg-gray-950"], [class~="bg-slate-900"], [class~="bg-slate-950"]):is([class~="hover:bg-gray-800"], [class~="hover:bg-gray-700"]):hover {
  background-color: var(--merchant-ink-soft) !important;
  color: var(--merchant-action-ink) !important;
}

html[data-theme="light"] .merchant-theme [data-app-navbar][class~="text-white"],
html[data-theme="light"] .merchant-theme [data-app-navbar] [class~="text-white"] {
  color: var(--merchant-ink) !important;
}

html[data-theme="light"] .merchant-theme [data-app-navbar] [class~="bg-gray-800"][class~="text-white"] {
  color: var(--merchant-accent) !important;
}

html[data-theme="light"] .merchant-theme [data-app-navbar] [class~="bg-blue-600"] {
  color: #ffffff !important;
}

/* The account trigger is a navigation surface, not an inverse code block. */
html[data-theme="light"] .merchant-theme [data-app-navbar] [data-menu-toggle] {
  color: var(--merchant-ink-soft) !important;
}

html[data-theme="light"] .merchant-theme [data-app-navbar] [data-menu-toggle]:hover {
  background-color: var(--merchant-surface-raised) !important;
  color: var(--merchant-ink) !important;
}

html[data-theme="light"] .merchant-theme [data-app-navbar] :is(a, button)[class~="bg-white"] {
  background-color: var(--merchant-accent-soft) !important;
  color: var(--merchant-accent) !important;
}

html[data-theme="light"] .merchant-theme [data-app-navbar] [class~="hover:text-white"]:hover {
  color: var(--merchant-ink) !important;
}

html[data-theme="light"] .merchant-theme [class~="bg-[#f5f7fb]"] {
  background-color: var(--merchant-bg) !important;
}

@media (max-width: 640px) {
  .theme-menu-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .theme-menu-row .theme-picker {
    width: 100%;
  }

  .theme-menu-row .theme-picker button {
    flex: 1;
  }
}