/* ═══════════════════════════════════════════════════════════════
   La Cheffe Bakes — Dark / Light / System Theme
   ═══════════════════════════════════════════════════════════════ */

/* ── Topbar — theme & language below header ──────────────────── */
.hcb-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 34px;
  position: sticky;
  top: 72px;
  z-index: 99;
}
.hcb-topbar__btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: color 0.2s;
  white-space: nowrap;
}
.hcb-topbar__btn:hover { color: var(--accent); }
.hcb-topbar__icon { font-size: 13px; }
.hcb-topbar__sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}

/* Dark topbar */
[data-theme="dark"] .hcb-topbar {
  background: #14271C;
  border-bottom-color: #2A4433;
}
[data-theme="dark"] .hcb-topbar__btn { color: #D9CDB2; }
[data-theme="dark"] .hcb-topbar__btn:hover { color: #C9A97C; }
[data-theme="dark"] .hcb-topbar__sep { background: #2A4433; }

/* ── Mobile: brand name on a single line ─────────────────────── */
@media (max-width: 767px) {
  .brand__logo {
    width: 42px !important;
    height: 42px !important;
  }
  .brand__name {
    font-size: clamp(14px, 4.6vw, 17px) !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    max-width: none;
  }
  .hcb-topbar {
    top: 60px; /* smaller header height on mobile */
    justify-content: space-between; /* theme left, lang right */
  }
}

/* ── Dark mode variables ─────────────────────────────────────── */
[data-theme="dark"] {
  --bg:            #0D1C13;
  --bg-alt:        #14271C;
  --bg-deep:       #1A3123;
  --paper:         #112218;
  --ink:           #F3E9D6;
  --ink-soft:      #D9CDB2;
  --accent:        #C9A97C;
  --accent-dark:   #B08A5A;
  --accent-light:  #1F3D2B;
  --accent-warm:   #DCC29A;
  --gold:          #C9A97C;
  --muted:         #A8B0A6;
  --border:        #2A4433;
  --shadow-sm:     0 2px 10px rgba(0,0,0,0.35);
  --shadow-md:     0 6px 24px rgba(0,0,0,0.45);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.55);
  --shadow-warm:   0 8px 30px rgba(201,169,124,0.28);
  --shadow-card:   0 4px 20px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Dark: body background ───────────────────────────────────── */
[data-theme="dark"] body {
  background-color: #0D1C13 !important;
}

/* background-image div has hardcoded light gradient — must use !important */
[data-theme="dark"] .background-image {
  background:
    radial-gradient(ellipse 70% 45% at 95% 0%,  rgba(201,169,124,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 0%  100%, rgba(220, 207, 180,0.06) 0%, transparent 55%),
    linear-gradient(160deg, #0F1F15 0%, #0D1C13 50%, #112218 100%) !important;
}

/* Hero has hardcoded warm light gradient — force dark */
[data-theme="dark"] .hero {
  background:
    radial-gradient(ellipse 140% 90% at 110% 50%, rgba(201,169,124,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 100% 80% at -10%  50%, rgba(220, 207, 180,0.07) 0%, transparent 55%),
    linear-gradient(165deg, #112218 0%, #0D1C13 35%, #112218 100%) !important;
}

/* Mobile category strip — hardcoded #fff background */
[data-theme="dark"] .mobile-cat-strip__item {
  background: #14271C !important;
  border-color: #2A4433 !important;
  color: #D9CDB2 !important;
}
[data-theme="dark"] .mobile-cat-strip__item.is-active,
[data-theme="dark"] .mobile-cat-strip__item:hover {
  background: #1A3123 !important;
  border-color: #C9A97C !important;
  color: #C9A97C !important;
}

/* ── Dark: header ────────────────────────────────────────────── */
[data-theme="dark"] .header {
  background: rgba(13,28,19, 0.92);
  border-bottom-color: rgba(42,68,51, 0.7);
}
[data-theme="dark"] .header--scrolled {
  background: rgba(13,28,19, 0.98) !important;
}
[data-theme="dark"] .nav {
  background: rgba(13,28,19, 0.98);
  border-top-color: var(--border);
}

/* ── Dark: cards ─────────────────────────────────────────────── */
[data-theme="dark"] .card {
  background: var(--paper);
  border-color: var(--border);
}

/* ── Dark: sections ──────────────────────────────────────────── */
[data-theme="dark"] .section--alt {
  background: var(--bg-alt);
}

/* ── Dark: hero ──────────────────────────────────────────────── */
[data-theme="dark"] .hero {
  background: transparent;
}

/* Trust badges ("100% Eggless", "FSSAI Certified", etc.) had a
   light, semi-transparent background paired with a light text color
   in dark mode — nearly invisible. Give them a warm, dark translucent
   chip background with bright cream text for proper contrast. */
[data-theme="dark"] .hero__badge {
  color: var(--ink);
  background: rgba(42,68,51, 0.55);
  border-color: rgba(217,205,178, 0.3);
}

/* ── Dark: auth button ───────────────────────────────────────── */
[data-theme="dark"] .hcb-auth-btn {
  border-color: var(--border);
  color: var(--ink);
}
[data-theme="dark"] .hcb-auth-dropdown {
  background: rgba(13,28,19,0.97);
  border-color: var(--border);
}

/* ── Dark: modal ─────────────────────────────────────────────── */
[data-theme="dark"] .hcb-modal-card {
  background: #14271C;
}
[data-theme="dark"] .hcb-modal-close {
  background: var(--bg-alt);
  color: var(--ink-soft);
}
[data-theme="dark"] .hcb-auth-google-btn {
  background: #2f201d;
  border-color: var(--border);
  color: var(--ink);
}
[data-theme="dark"] .hcb-auth-google-btn:hover { background: #1F3D2B; }
[data-theme="dark"] .hcb-auth-phone-btn {
  border-color: var(--border);
  color: var(--ink);
}
[data-theme="dark"] .hcb-auth-phone-btn:hover { background: var(--accent-light); }
[data-theme="dark"] .hcb-auth-input {
  background: #2f201d;
  border-color: var(--border);
  color: var(--ink);
}

/* ── Dark: menu sidebar ──────────────────────────────────────── */
[data-theme="dark"] .menu-sidebar {
  background: #0F1F15;
  border-color: var(--border);
}
[data-theme="dark"] .menu-sidebar__link:hover,
[data-theme="dark"] .menu-sidebar__link.is-active {
  background: var(--accent-light);
}

/* ── Dark: mega menu ─────────────────────────────────────────── */
[data-theme="dark"] .hcb-mega__panel {
  background: rgba(13,28,19, 0.97);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .hcb-mega-item:hover {
  background: rgba(201,169,124,0.10);
  border-color: rgba(201,169,124,0.22);
}

/* ── Dark: checkout page ─────────────────────────────────────── */
[data-theme="dark"] .checkout-page,
[data-theme="dark"] .checkout-summary,
[data-theme="dark"] .checkout-form,
[data-theme="dark"] .cart-items {
  background: var(--paper);
  border-color: var(--border);
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #2f201d;
  border-color: var(--border);
  color: var(--ink);
}

/* ── Dark: scroll progress ───────────────────────────────────── */
[data-theme="dark"] .scroll-progress {
  opacity: 0.85;
}

/* ── Dark: footer ────────────────────────────────────────────── */
[data-theme="dark"] .footer {
  background: #08120C;
  border-top: 1px solid var(--border);
}

/* ── Dark: ensure all text is readable ───────────────────────── */
[data-theme="dark"] body,
[data-theme="dark"] p,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] li, [data-theme="dark"] span,
[data-theme="dark"] label, [data-theme="dark"] div {
  color: var(--ink);
}
[data-theme="dark"] .nav a,
[data-theme="dark"] .brand__name,
[data-theme="dark"] .brand__tag,
[data-theme="dark"] .section__eyebrow,
[data-theme="dark"] .muted,
[data-theme="dark"] .about__range-item,
[data-theme="dark"] .contact li,
[data-theme="dark"] .contact a { color: var(--ink); }
[data-theme="dark"] .muted,
[data-theme="dark"] .brand__tag,
[data-theme="dark"] .hero__subtitle,
[data-theme="dark"] .about__origin-lead { color: var(--ink-soft); }
[data-theme="dark"] .footer p,
[data-theme="dark"] .footer a { color: var(--ink-soft); }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--muted); }

/* ── Dark: form inputs ───────────────────────────────────────── */
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group textarea:focus {
  background: #2f201d !important;
}
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: #14271C !important;
  color: #F3E9D6 !important;
  border-color: #2A4433 !important;
}

/* ── Dark: nav dropdown ──────────────────────────────────────── */
[data-theme="dark"] .nav-menu-dropdown {
  background: #0F1F15 !important;
}
[data-theme="dark"] .nav-menu-dropdown a,
[data-theme="dark"] .nav-menu-dropdown a:hover {
  color: #F3E9D6 !important;
}

/* ── Dark: checkout & payment elements ───────────────────────── */
[data-theme="dark"] .checkout-summary,
[data-theme="dark"] .checkout-form,
[data-theme="dark"] .cart-items,
[data-theme="dark"] .payment-option {
  background: #112218 !important;
  border-color: #2A4433 !important;
  color: #F3E9D6 !important;
}
[data-theme="dark"] .payment-option:hover,
[data-theme="dark"] .payment-option.is-selected {
  background: #1A3123 !important;
}

/* ── Dark: section backgrounds ────────────────────────────────── */
[data-theme="dark"] .section {
  background: transparent !important;
}
[data-theme="dark"] .section--alt {
  background: #112218 !important;
}

/* ── Dark: hero::before overlay ──────────────────────────────── */
[data-theme="dark"] .hero::before,
[data-theme="dark"] .hero::after {
  opacity: 0.15 !important;
}

/* ── Dark: callout / blockquote boxes ───────────────────────── */
[data-theme="dark"] .about__origin,
[data-theme="dark"] .about__promise {
  background: rgba(16, 38, 26, 0.10) !important;
  border-left-color: rgba(16, 38, 26, 0.35) !important;
  border-color: rgba(16, 38, 26, 0.2) !important;
}
[data-theme="dark"] .about__origin *,
[data-theme="dark"] .about__promise * {
  color: var(--ink) !important;
}
[data-theme="dark"] .about__promise-tagline {
  color: var(--ink-soft) !important;
}

/* ── Dark: menu/product page cards & elements ────────────────── */
[data-theme="dark"] .product-card,
[data-theme="dark"] .menu-card,
[data-theme="dark"] .card__body,
[data-theme="dark"] .card__title,
[data-theme="dark"] .card__desc,
[data-theme="dark"] .card__price { color: var(--ink); }
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .page-eyebrow,
[data-theme="dark"] .page-title,
[data-theme="dark"] .page-desc { color: var(--ink); }

/* ── Smooth theme transition ─────────────────────────────────── */
body, .header, .card, .section--alt, .hcb-modal-card,
.hcb-mega__panel, .menu-sidebar, .footer, .hcb-auth-dropdown {
  transition-property: background-color, border-color, color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}