/* =========================================================
   theme.css — Lamsah dark / light themes
   Load AFTER style.css.  Dark is the default (style.css).
   Light mode turns on with <html data-theme="light">.
   ========================================================= */

:root { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body { transition: background-color .35s ease, color .35s ease; }

/* ---------- Toggle button (both themes) ---------- */
.theme-toggle {
  display: grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--line); color: var(--text);
  cursor: pointer; transition: .3s var(--ease);
}
.theme-toggle:hover { border-color: var(--gold); transform: translateY(-2px); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-toggle .ico {
  grid-area: 1 / 1; width: 20px; height: 20px;
  transition: transform .45s var(--ease), opacity .3s ease;
}
/* dark mode shows the sun (click = go light); light mode shows the moon (click = go dark) */
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-70deg) scale(.5); }
html[data-theme="light"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(70deg) scale(.5); }
html[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: none; }

/* =========================================================
   LIGHT MODE
   ========================================================= */
html[data-theme="light"] {
  --bg: #f6f5f2;
  --surface: #ffffff;
  --glass: rgba(255, 255, 255, .72);
  --line: rgba(20, 20, 20, .10);
  --text: #141414;
  --muted: #5b5b63;
  --gold-soft: rgba(166, 124, 18, .35);
  --gold-ink: #84640C;     /* small gold text (>= 4.5:1 on the light bg) */
  --gold-ink-lg: #A67C12;  /* large gold text / icons (>= 3:1) */
}

/* ----- Header & navigation ----- */
html[data-theme="light"] .site-header { background: rgba(255, 255, 255, .72); }
html[data-theme="light"] .site-header.scrolled { background: rgba(255, 255, 255, .94); box-shadow: 0 6px 30px rgba(20, 20, 20, .06); }
html[data-theme="light"] nav a:hover { color: var(--text); }
html[data-theme="light"] .burger span { background: var(--text); }
@media (max-width: 900px) {
  html[data-theme="light"] nav { background: rgba(255, 255, 255, .97); }
}

/* ----- Gold text must be darker on a light background ----- */
html[data-theme="light"] .gold { color: var(--gold-ink-lg); }
html[data-theme="light"] .badge { color: var(--gold-ink); background: rgba(166, 124, 18, .08); }
html[data-theme="light"] .step-n { color: var(--gold-ink-lg); }
html[data-theme="light"] .stat .ico { color: var(--gold-ink-lg); }
html[data-theme="light"] .btn-outline:hover { color: var(--gold-ink); border-color: var(--gold-ink-lg); }
html[data-theme="light"] .rate .ico { fill: #E2B32B; stroke: #E2B32B; }

/* ----- Hero ----- */
html[data-theme="light"] .glow-a { background: rgba(240, 200, 75, .28); }
html[data-theme="light"] .glow-b { background: rgba(240, 200, 75, .30); }
html[data-theme="light"] .card3d { box-shadow: 0 40px 80px rgba(20, 20, 20, .18), 0 0 60px rgba(240, 200, 75, .25); }
html[data-theme="light"] .tap-popup {
  background: rgba(255, 255, 255, .88);
  border-color: var(--gold-soft);
  box-shadow: 0 12px 40px rgba(20, 20, 20, .14), 0 0 30px rgba(240, 200, 75, .25);
}

/* ----- Cards ----- */
html[data-theme="light"] .glass,
html[data-theme="light"] .stats { box-shadow: 0 10px 40px rgba(20, 20, 20, .05); }
html[data-theme="light"] .step:hover { box-shadow: 0 18px 50px rgba(166, 124, 18, .14); }

/* ----- Store ----- */
html[data-theme="light"] .tab:hover { color: var(--text); }
html[data-theme="light"] #sort { background: #fff; }
html[data-theme="light"] .product { box-shadow: 0 6px 24px rgba(20, 20, 20, .05); }
html[data-theme="light"] .product:hover { box-shadow: 0 0 0 1px rgba(166, 124, 18, .25), 0 20px 50px rgba(166, 124, 18, .16); }
html[data-theme="light"] .thumb { background: #ececea; }

/* ----- Manifesto ----- */
html[data-theme="light"] .num { -webkit-text-stroke-color: var(--gold-ink-lg); }
html[data-theme="light"] .row:hover .num { color: var(--gold); text-shadow: 0 0 40px rgba(240, 200, 75, .45); }

/* ----- Contact form ----- */
html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea {
  background: #fff;
  border-color: rgba(20, 20, 20, .16);
  box-shadow: 0 1px 2px rgba(20, 20, 20, .04);
  color: var(--text);
}
html[data-theme="light"] .form-group input:hover,
html[data-theme="light"] .form-group textarea:hover { border-color: rgba(166, 124, 18, .55); }
html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group textarea:focus {
  background: #fff;
  border-color: #C9A227;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .25), 0 0 22px rgba(240, 200, 75, .25);
}
html[data-theme="light"] .form-group input:-webkit-autofill,
html[data-theme="light"] .form-group input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
  box-shadow: 0 0 0 1000px #fff inset;
}
html[data-theme="light"] .form-msg.success { background: rgba(30, 142, 78, .10); color: #17703c; border-color: rgba(30, 142, 78, .35); }
html[data-theme="light"] .form-msg.error   { background: rgba(192, 57, 43, .08); color: #a93226; border-color: rgba(192, 57, 43, .35); }

/* ----- Very small phones: keep the header from overflowing ----- */
@media (max-width: 420px) {
  .nav-actions { gap: 8px; }
  .nav-actions .btn-sm { padding: 8px 14px; font-size: .85rem; }
  .logo { font-size: 1.4rem; }
}