/* ============================================================
   GAYA Catalog — Theme system (toggle button + LIGHT mode)
   Dark stays the default (no [data-theme]); light overrides only.
   Selectors use html[data-theme="light"] + !important so they
   beat the per-page hardcoded "#050d18 !important" backgrounds.
   ============================================================ */

/* ───────────────── Toggle button (both modes) ───────────────── */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 130;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
  border: 1px solid rgba(255, 241, 118, 0.40);
  background: rgba(15, 29, 53, 0.82);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.theme-toggle:hover { transform: scale(1.12) rotate(-8deg); }
.theme-toggle:active { transform: scale(0.95); }
@media (max-width: 767px) {
  .theme-toggle { bottom: 16px; left: 16px; width: 46px; height: 46px; font-size: 21px; }
}

/* ════════════════════════ LIGHT THEME ════════════════════════ */
html[data-theme="light"] {
  --navy:      #F2ECE1;   /* main background  */
  --navy-dark: #F2ECE1;   /* main background (other pages) */
  --navy-mid:  #FFFFFF;   /* raised surfaces  */
  --white:     #15243F;   /* primary text → deep navy */
  --muted:     rgba(21, 36, 63, 0.60);
  /* --yellow / --tomato stay as the brand accents */
}

/* ── Toggle button in light mode ── */
html[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(21, 36, 63, 0.22);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
}

/* ── Base surfaces (beat hardcoded dark bodies) ── */
html[data-theme="light"] body { background: #F2ECE1 !important; color: #15243F; }

/* ── Hide the dark "studio room" background photo & its layers ── */
html[data-theme="light"] .studio-bg,
html[data-theme="light"] .studio-vignette,
html[data-theme="light"] .light-strips { display: none !important; }

/* ── Footer ── */
html[data-theme="light"] footer {
  background: #E9E0D2 !important;
  border-top: 1px solid rgba(21, 36, 63, 0.12) !important;
}
/* footer logo is white-inverted in dark; restore to navy in light */
html[data-theme="light"] .footer-logo img { filter: none !important; }

/* ── HOMEPAGE (gaya-catalog) dark sections ── */
html[data-theme="light"] #categories { background: #F2ECE1 !important; }
html[data-theme="light"] #products   { background: #F2ECE1 !important; }
html[data-theme="light"] .cat-carousel-outer::before { background: linear-gradient(to left,  #F2ECE1, transparent) !important; }
html[data-theme="light"] .cat-carousel-outer::after  { background: linear-gradient(to right, #F2ECE1, transparent) !important; }
html[data-theme="light"] .moodboard-section,
html[data-theme="light"] .import-section { background: #ECE3D5 !important; }

/* ── CATEGORY pages: hero strip (transparent over the now-hidden room) ── */
html[data-theme="light"] .cat-hero {
  background: linear-gradient(135deg, #F2ECE1 0%, #E7DCCB 100%) !important;
  border-bottom: 1px solid rgba(21, 36, 63, 0.10) !important;
}

/* ── Product cards & tiles ── */
html[data-theme="light"] .product-card {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(21, 36, 63, 0.12) !important;
}
html[data-theme="light"] .product-card:hover {
  background: #FFFFFF !important;
  border-color: rgba(21, 36, 63, 0.22) !important;
  box-shadow: 0 16px 44px rgba(21, 36, 63, 0.16) !important;
}
html[data-theme="light"] .product-img-wrap { background: transparent !important; }

/* "image coming soon" placeholder text → readable on light */
html[data-theme="light"] .product-img-wrap:empty::after { color: rgba(21, 36, 63, 0.40) !important; }

/* ── Filter buttons (inactive) ── */
html[data-theme="light"] .filter-btn { border-color: rgba(21, 36, 63, 0.22); }
html[data-theme="light"] .filter-btn:hover,
html[data-theme="light"] .filter-btn.active {
  background: var(--yellow);
  color: #15243F;
  border-color: var(--yellow);
}

/* ── Yellow headings: keep the gold family but add a dark edge so
      they stay readable on the light background (DNA: gold = mayo/rice/kosher) ── */
html[data-theme="light"] .section-title span,
html[data-theme="light"] .cat-name {
  text-shadow: 0 1px 0 rgba(21, 36, 63, 0.35), 0 2px 6px rgba(21, 36, 63, 0.18);
}

/* ── Soften heavy black drop-shadows that look harsh on light ── */
html[data-theme="light"] .product-card,
html[data-theme="light"] .cat-tile { box-shadow: 0 10px 30px rgba(21, 36, 63, 0.10); }

/* ── Generic faint-yellow hairline borders → faint navy on light ── */
html[data-theme="light"] [style*="border:1px solid rgba(245,240,232"],
html[data-theme="light"] [style*="border: 1px solid rgba(245,240,232"] {
  border-color: rgba(21, 36, 63, 0.18) !important;
}

/* ── Yellow pills sit on the cream background in light mode — give them
      a soft navy shadow so they separate cleanly (e.g. the back button) ── */
html[data-theme="light"] .back-btn,
html[data-theme="light"] .filter-btn.active {
  box-shadow: 0 4px 16px rgba(21, 36, 63, 0.20) !important;
}

/* ── Marquee bar: faint divider under it so the yellow strip reads as a
      bar, not a block bleeding into the cream page ── */
html[data-theme="light"] .marquee-wrap {
  box-shadow: 0 1px 0 rgba(21, 36, 63, 0.10);
}

/* ═══════════ סבב 2 — אלמנטים שלא התהפכו נכון במצב בהיר ═══════════ */

/* כפתור "חזרה" בדף מוצר משתמש ב-color:var(--navy), שהופך לקרם במצב בהיר →
   הטקסט נעלם על הרקע הצהוב. כופים טקסט navy כהה (גם לכל pill צהוב דומה). */
html[data-theme="light"] .back-btn { color: #15243F !important; }

/* כרטיסי בחירה (.type-card — tuna-type / tomatoes-brand / tuna-species):
   רקע לבן-שקוף 4% שנבלע בקרם → כרטיס לבן מוצק עם גבול navy עדין */
html[data-theme="light"] .type-card {
  background: #FFFFFF !important;
  border-color: rgba(21, 36, 63, 0.12) !important;
  box-shadow: 0 10px 30px rgba(21, 36, 63, 0.10) !important;
}
html[data-theme="light"] .type-card:hover {
  border-color: rgba(21, 36, 63, 0.30) !important;
  box-shadow: 0 18px 48px rgba(21, 36, 63, 0.18) !important;
}

/* טקסט-רקע ענק (watermark) בדף מוצר — הגוונים הצהוב/אדום הקלושים נראים
   מלוכלכים על הקרם; מאחדים לגוון navy עדין אחיד שמשתלב יפה */
html[data-theme="light"] .mega-bg .layer-1,
html[data-theme="light"] .mega-bg .layer-2,
html[data-theme="light"] .mega-bg .layer-3,
html[data-theme="light"] .bottom-mega .text { color: #15243F !important; }

/* CTA משני — הגבול הצהוב-הקלוש כמעט בלתי נראה על קרם → גבול navy */
html[data-theme="light"] .cta-secondary { border-color: rgba(21, 36, 63, 0.30) !important; }
html[data-theme="light"] .cta-secondary:hover {
  background: rgba(21, 36, 63, 0.06) !important;
  border-color: #15243F !important;
  color: #15243F !important;
}

/* רקעים לבנים-שקופים קלושים כלליים (משטחים/כרטיסים אחרים) → גוון navy עדין */
html[data-theme="light"] [style*="rgba(255,255,255,0.0"],
html[data-theme="light"] [style*="rgba(255, 255, 255, 0.0"] {
  background: rgba(21, 36, 63, 0.05) !important;
}