/* System light/dark — cream/gold catalog aesthetic across all portals */

html {
  color-scheme: light dark;
}

:root {
  --theme-bg: #faf7f2;
  --theme-bg-2: #f4efe6;
  --theme-surface: #ffffff;
  --theme-ink: #3a3528;
  --theme-body: #4a4538;
  --theme-muted: #7a7060;
  --theme-gold: #b8882a;
  --theme-gold-l: #d4a84b;
  --theme-gold-d: #8b6218;
  --theme-gold-pale: #f7edd5;
  --theme-border: rgba(184, 136, 42, 0.18);
  --theme-header: rgba(250, 247, 242, 0.97);
  --theme-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  --theme-bldc-bg: #f0ebe3;
  --theme-bldc-accent: #6d5c3e;
  --theme-bldc-bg-mid: #ebe4d6;
  --theme-meta: #b8882a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --theme-bg: #12100e;
    --theme-bg-2: #1a1714;
    --theme-surface: #1f1c18;
    --theme-ink: #f5f0e6;
    --theme-body: #d4cdc0;
    --theme-muted: #9a9285;
    --theme-gold: #d4a84b;
    --theme-gold-l: #e8c06a;
    --theme-gold-d: #b8882a;
    --theme-gold-pale: #2a2418;
    --theme-border: rgba(212, 168, 75, 0.22);
    --theme-header: rgba(18, 16, 14, 0.96);
    --theme-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --theme-bldc-bg: #1c1a17;
    --theme-bldc-accent: #d4a84b;
    --theme-bldc-bg-mid: #221e18;
    --theme-meta: #1a1610;
  }
}

/* Sync catalog tokens */
body.catalog-theme {
  --cream: var(--theme-bg);
  --cream-2: var(--theme-bg-2);
  --cream-3: var(--theme-bg-2);
  --gold-ref: var(--theme-gold);
  --gold-ref-l: var(--theme-gold-l);
  --gold-ref-d: var(--theme-gold-d);
  --gold-ref-pale: var(--theme-gold-pale);
  --catalog-ink: var(--theme-ink);
  --catalog-muted: var(--theme-muted);
  --catalog-body: var(--theme-body);
  --catalog-border: var(--theme-border);
  --bldc-bg: var(--theme-bldc-bg);
  --bldc-accent: var(--theme-bldc-accent);
  --bldc-bg-mid: var(--theme-bldc-bg-mid);
  background: var(--theme-bg);
  color: var(--theme-body);
}

body.catalog-theme .site-header {
  background: var(--theme-header);
  border-bottom-color: var(--theme-border);
}

body.catalog-theme .nav-dd-panel {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

body.catalog-theme .nav-mobile-panel {
  background: var(--theme-surface);
  border-bottom-color: var(--theme-border);
}

body.catalog-theme .nav-mobile-panel a {
  color: var(--theme-body);
  border-bottom-color: var(--theme-border);
}

body.catalog-theme .nav-menu-btn {
  background: var(--theme-surface);
  border-color: var(--theme-gold-l);
  color: var(--theme-gold-d);
}

body.catalog-theme .prod-nav-card,
body.catalog-theme .model-card,
body.catalog-theme .bldc-card,
body.catalog-theme .support-card,
body.catalog-theme .catalog-brand-card,
body.catalog-theme .why-card,
body.catalog-theme .catalog-trust-pill,
body.catalog-theme .portal-tile {
  background: var(--theme-surface);
}

body.catalog-theme .catalog-section--white {
  background: var(--theme-surface);
}

body.catalog-theme .catalog-portal-strip {
  background: linear-gradient(135deg, var(--theme-surface) 0%, var(--theme-gold-pale) 100%);
}

body.catalog-theme .catalog-footer-band {
  background: #2e2b22;
  color: #b8b0a0;
}

body.catalog-theme .catalog-footer-band a {
  color: var(--theme-gold-l);
}

@media (prefers-color-scheme: dark) {
  body.catalog-theme .catalog-footer-band {
    background: #0a0908;
    color: var(--theme-muted);
  }
}

body.catalog-theme .text-slate-900,
body.catalog-theme .text-slate-800 {
  color: var(--theme-ink) !important;
}

body.catalog-theme .text-slate-700,
body.catalog-theme .text-slate-600 {
  color: var(--theme-body) !important;
}

body.catalog-theme .text-slate-500,
body.catalog-theme .text-slate-400 {
  color: var(--theme-muted) !important;
}

body.catalog-theme .site-bg,
body.catalog-theme .site-bg-blobs {
  display: none !important;
}

/* Portal forms */
body.portal-theme .page-card,
body.portal-theme .glass-effect,
body.admin-theme .glass-effect,
body.verify-theme .glass-effect {
  background: var(--theme-surface);
  border: 1px solid var(--theme-border);
  color: var(--theme-body);
  box-shadow: var(--theme-shadow);
}

body.portal-theme .page-card-header .page-title,
body.portal-theme .section-kicker-gold {
  color: var(--theme-ink);
}

body.portal-theme .section-kicker-gold {
  color: var(--theme-gold-d);
}

body.portal-theme .page-icon {
  background: linear-gradient(135deg, var(--theme-gold-l), var(--theme-gold));
  color: #1a1610;
}

body.portal-theme .portal-tip {
  background: var(--theme-gold-pale);
  border-color: var(--theme-border);
  color: var(--theme-body);
}

body.portal-theme .input-field,
body.admin-theme .input-field,
body.verify-theme .input-field,
body.verify-theme input,
body.verify-theme select {
  background: var(--theme-surface);
  border-color: var(--theme-border);
  color: var(--theme-ink);
}

body.portal-theme .input-field::placeholder,
body.verify-theme input::placeholder {
  color: var(--theme-muted);
}

body.portal-theme .btn-gold,
body.portal-theme .cta-btn,
body.admin-theme .bg-gradient-to-r.from-amber-400,
body.verify-theme .bg-gradient-to-r.from-amber-400 {
  background: var(--theme-gold) !important;
  color: #1a1610 !important;
  box-shadow: 0 8px 24px rgba(184, 136, 42, 0.35);
}

body.portal-theme .btn-outline-gold {
  border-color: var(--theme-gold-l);
  color: var(--theme-gold-d);
  background: var(--theme-surface);
}

/* Admin / service shells */
body.admin-theme,
body.verify-theme {
  background: var(--theme-bg);
  color: var(--theme-body);
}

body.admin-theme .text-amber-400,
body.verify-theme .text-amber-400,
body.admin-theme .text-amber-700 {
  color: var(--theme-gold) !important;
}

body.admin-theme header.glass-effect {
  background: var(--theme-header);
  border-bottom-color: var(--theme-border) !important;
}

body.admin-theme .text-slate-100,
body.admin-theme .text-slate-300,
body.admin-theme .text-slate-400,
body.verify-theme .text-slate-300,
body.verify-theme .text-slate-400,
body.verify-theme .text-slate-500 {
  color: var(--theme-muted) !important;
}

body.admin-theme .text-lg.font-black,
body.admin-theme .text-slate-700,
body.verify-theme h1 {
  color: var(--theme-ink) !important;
}

body.admin-theme button.bg-amber-400,
body.admin-theme .bg-amber-400,
body.verify-theme button.bg-amber-400,
body.verify-theme .bg-amber-400 {
  background: var(--theme-gold) !important;
  color: #1a1610 !important;
}

body.admin-theme .border-white\/10,
body.admin-theme .border-white\/20 {
  border-color: var(--theme-border) !important;
}

body.admin-theme .hover\:bg-white\/10:hover {
  background: var(--theme-gold-pale) !important;
}

body.admin-theme .glass-effect.rounded-2xl {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body.admin-theme table {
  min-width: 32rem;
}

body.verify-theme .bg-slate-900\/50 {
  background: var(--theme-bg-2) !important;
  border-color: var(--theme-border) !important;
}

body.verify-theme label.text-slate-300 {
  color: var(--theme-body) !important;
}

body.verify-theme input.text-slate-100,
body.verify-theme select.text-slate-100 {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
  color: var(--theme-ink) !important;
}

body.verify-theme .border-amber-400\/30 {
  border-color: var(--theme-border) !important;
}

.churn-banner {
  background: var(--theme-gold-pale);
  border: 1px solid var(--theme-border);
  color: var(--theme-body);
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}

.admin-trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  min-height: 8rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.admin-trend-bar-wrap {
  flex: 1;
  min-width: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  color: var(--theme-muted);
}

.admin-trend-bar {
  width: 100%;
  max-width: 2rem;
  min-height: 4px;
  background: linear-gradient(180deg, var(--theme-gold-l), var(--theme-gold));
  border-radius: 4px 4px 0 0;
}

@media (prefers-color-scheme: dark) {
  body.admin-theme .text-red-400 { color: #f87171 !important; }
  body.admin-theme .text-green-400 { color: #4ade80 !important; }
  body.admin-theme .text-blue-400 { color: #60a5fa !important; }
  body.admin-theme .text-rose-500 { color: #fb7185 !important; }
}

@media (max-width: 640px) {
  body.admin-theme .max-w-7xl.mx-auto.px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  body.admin-theme header .flex-wrap {
    gap: 0.5rem;
  }

  body.admin-theme header button,
  body.admin-theme header a {
    font-size: 0.75rem;
    padding: 0.5rem 0.65rem;
  }

  body.verify-theme .glass-effect.rounded-3xl {
    padding: 1.25rem;
    border-radius: 1rem;
  }

  body.verify-theme h1.text-3xl {
    font-size: 1.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  .model-img-wrap {
    background: linear-gradient(180deg, var(--theme-bg-2) 0%, var(--theme-bg) 100%) !important;
  }

  .bldc-card .model-img-wrap {
    background: linear-gradient(180deg, #252018 0%, var(--theme-bldc-bg) 100%) !important;
  }

  .whatsapp-float::after {
    background: var(--theme-surface);
    color: var(--theme-ink);
    border: 1px solid var(--theme-border);
  }

  body.catalog-theme .portal-tile,
  body.catalog-theme .portal-tile h3,
  body.catalog-theme .portal-tile p {
    color: var(--theme-body);
  }

  body.catalog-theme .portal-tile h3 {
    color: var(--theme-ink);
  }

  body.catalog-theme .register-cta-box {
    background: var(--theme-surface);
    border-color: var(--theme-border);
  }
}
