/* ==========================================================================
   Theme layer: light-mode versions of the shared components and store branding.
   Page-level Tailwind overrides live in theme-light.css (generated by tools/build-theme.js).
   ========================================================================== */

/* ---------- Theme toggle button ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; min-width: 38px; padding: 0 10px; border-radius: 12px;
  background: var(--ui-surface-2); border: 1px solid var(--ui-border-strong); color: var(--ui-text);
  font-size: 12px; font-weight: 600; transition: background 0.15s;
}
.theme-toggle:hover { background: #273449; }
.theme-toggle--full { width: 100%; justify-content: flex-start; padding: 0 12px; }

/* ---------- Light mode: shared components from ui.css ---------- */
html[data-theme="light"] {
  --ui-bg: #f4f6fb;
  --ui-surface: #ffffff;
  --ui-surface-2: #f1f5f9;
  --ui-border: #e2e8f0;
  --ui-border-strong: #cbd5e1;
  --ui-text: #0f172a;
  --ui-muted: #64748b;
  --ui-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.28);
  /* Chart tokens: light-surface step of the same categorical hue */
  --viz-1: #2a78d6;
  --viz-muted: #8b8a84;
  --viz-grid: rgba(15, 23, 42, 0.08);
  --viz-cross: rgba(15, 23, 42, 0.3);
  --viz-surface: #ffffff;
}
html[data-theme="light"] .viz-root { --viz-1: #2a78d6; --viz-grid: rgba(15, 23, 42, 0.08); --viz-cross: rgba(15, 23, 42, 0.3); --viz-surface: #ffffff; }
html[data-theme="light"] .viz-axis { fill: #64748b; }
html[data-theme="light"] .viz-tip { background: rgba(255, 255, 255, 0.98); border-color: #cbd5e1; color: #0f172a; }
html[data-theme="light"] .viz-tip__row strong { color: #0f172a; }
html[data-theme="light"] .theme-toggle:hover,
html[data-theme="light"] .ui-bell__btn:hover { background: #e2e8f0; }

html[data-theme="light"] .ui-toast { background: rgba(255, 255, 255, 0.98); }
html[data-theme="light"] .ui-toast button:hover { color: #0f172a; }
html[data-theme="light"] .ui-panel,
html[data-theme="light"] .ui-suggest { background: rgba(255, 255, 255, 0.99); }
html[data-theme="light"] .ui-panel__head h3,
html[data-theme="light"] .ui-note__title { color: #0f172a; }
html[data-theme="light"] .ui-panel__head button { color: #1d4ed8; }
html[data-theme="light"] .ui-note { border-bottom-color: #eef2f7; }
html[data-theme="light"] .ui-note:hover { background: #f1f5f9; }
html[data-theme="light"] .ui-note.unread { background: rgba(59, 130, 246, 0.06); }
html[data-theme="light"] .ui-note__icon { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
html[data-theme="light"] .ui-note__icon.t-low_stock, html[data-theme="light"] .ui-note__icon.t-return_requested { background: rgba(245, 158, 11, 0.14); color: #b45309; }
html[data-theme="light"] .ui-note__icon.t-out_of_stock, html[data-theme="light"] .ui-note__icon.t-refund { background: rgba(244, 63, 94, 0.12); color: #be123c; }
html[data-theme="light"] .ui-note__icon.t-order_placed, html[data-theme="light"] .ui-note__icon.t-payment { background: rgba(16, 185, 129, 0.12); color: #047857; }
html[data-theme="light"] .ui-note__icon.t-promotion { background: rgba(168, 85, 247, 0.12); color: #7e22ce; }
html[data-theme="light"] .ui-suggest__item:hover, html[data-theme="light"] .ui-suggest__item.active { background: #eff6ff; }
html[data-theme="light"] .ui-suggest__item mark { color: #1d4ed8; }
html[data-theme="light"] .ui-chip { color: #334155; }
html[data-theme="light"] .ui-chip:hover { color: #0f172a; border-color: #94a3b8; }
html[data-theme="light"] .ui-chip.active { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
html[data-theme="light"] .ui-chip.active .count { color: #1d4ed8; }
html[data-theme="light"] .ui-skeleton { background: #e8edf3; }
html[data-theme="light"] .ui-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent); }
html[data-theme="light"] .ui-range { background: #cbd5e1; }
html[data-theme="light"] .ui-pill--requested, html[data-theme="light"] .ui-pill--low { color: #b45309; }
html[data-theme="light"] .ui-pill--approved { color: #1d4ed8; }
html[data-theme="light"] .ui-pill--received { color: #7e22ce; }
html[data-theme="light"] .ui-pill--refunded, html[data-theme="light"] .ui-pill--ok { color: #047857; }
html[data-theme="light"] .ui-pill--rejected, html[data-theme="light"] .ui-pill--out { color: #be123c; }
html[data-theme="light"] .ui-pill--closed { color: #475569; }
html[data-theme="light"] * { scrollbar-color: #cbd5e1 transparent; }
html[data-theme="light"] *::-webkit-scrollbar-thumb { background: #cbd5e1; }
html[data-theme="light"] select option { background: #ffffff; color: #0f172a; }
html[data-theme="light"] input[type="date"] { color-scheme: light; }
html[data-theme="light"] pre { color: #334155; }
html[data-theme="light"] .shadow-2xl, html[data-theme="light"] .shadow-xl { --tw-shadow-color: rgb(15 23 42 / 0.08); }

/* ---------- Store branding (storefront pages) ----------
   theme.js sets --brand* from the store's theme colour and data-brand="on" on <html>.
   The storefront's accent is Tailwind blue, so those classes take the brand colour. */
html[data-brand="on"] .bg-blue-600,
html[data-brand="on"] .bg-blue-500 { background-color: var(--brand) !important; }
html[data-brand="on"] .hover\:bg-blue-500:hover,
html[data-brand="on"] .hover\:bg-blue-700:hover { background-color: var(--brand-hover) !important; }
html[data-brand="on"] .bg-blue-600.text-white,
html[data-brand="on"] .bg-blue-600 .text-white,
html[data-brand="on"] .bg-blue-500.text-white { color: var(--brand-ink) !important; }
html[data-brand="on"] .text-blue-300,
html[data-brand="on"] .text-blue-400,
html[data-brand="on"] .text-blue-500 { color: var(--brand-text) !important; }
html[data-brand="on"] .border-blue-500,
html[data-brand="on"] .focus\:border-blue-500:focus { border-color: var(--brand) !important; }
html[data-brand="on"] .bg-blue-500\/10,
html[data-brand="on"] .bg-blue-500\/20,
html[data-brand="on"] .bg-blue-600\/20,
html[data-brand="on"] .bg-blue-600\/30 { background-color: var(--brand-tint) !important; }
html[data-brand="on"] .border-blue-500\/20,
html[data-brand="on"] .border-blue-500\/30 { border-color: var(--brand-line) !important; }
html[data-brand="on"] .shadow-blue-600\/20,
html[data-brand="on"] .shadow-blue-600\/30 { --tw-shadow-color: var(--brand-glow) !important; }
html[data-brand="on"] .from-blue-900\/40 { --tw-gradient-from: var(--brand-glow) var(--tw-gradient-from-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html[data-brand="on"] .accent-blue-500 { accent-color: var(--brand) !important; }
html[data-brand="on"] .ui-chip.active { background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand-text); }
html[data-brand="on"] .ui-chip.active .count { color: var(--brand-text); }
html[data-brand="on"] .ui-range::-webkit-slider-thumb { background: var(--brand); }
html[data-brand="on"] .ui-range::-moz-range-thumb { background: var(--brand); }
html[data-brand="on"] :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--brand); }