/* ─────────────────────────────────────────────────────────────
   Light theme — ADDITIVE. Dark is the default and is unchanged.
   This file only kicks in when <html data-theme="light"> is set
   (toggled by theme.js, persisted in localStorage). Loaded on
   every page after its inline <style>, so the html[data-theme]
   overrides win on the cascade.
   ───────────────────────────────────────────────────────────── */

/* ── Typography: Clash Display (headlines) + General Sans (body) ──
   Loaded + assigned here so it applies on EVERY page (all pages link
   theme.css after their inline <style>, so these win the cascade and
   override the legacy --font:'Inter' definitions). */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600,700&f[]=general-sans@200,300,400,500,600,700&display=swap');

:root {
  --font: 'General Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Clash Display', 'General Sans', system-ui, sans-serif;
}
/* Display face for headlines + the brand wordmark. Clash Display runs
   tight, so relax the heavy negative tracking some pages apply (e.g.
   the hero's -0.04em) to keep word spaces from colliding. */
h1, h2,
.logo-name, .footer-logo, .brand,
.hero h1, .catalogue-title {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

/* ── Light palette: re-point the existing CSS variables ──
   NOTE: --white is the "primary text" token and --bg is the page
   background throughout the codebase, so in light mode --white
   becomes a dark ink and --bg becomes near-white. The variable
   NAMES are legacy; only their VALUES flip. */
html[data-theme="light"] {
  --bg:        #f4f6fb;   /* page background — soft off-white */
  --surface:   #ffffff;
  --card:      #ffffff;   /* white cards on the soft-grey page */
  --border:    rgba(15,23,42,0.10);
  --border-c:  rgba(20,127,214,0.30);
  --cyan:      #157fd6;   /* aqua-leaning blue — reads cleanly on white */
  --cyan-dim:  rgba(20,127,214,0.08);
  --white:     #0f1729;   /* PRIMARY TEXT (dark in light mode) */
  --grey:      #586074;   /* secondary text */
}

/* ── Targeted overrides for hardcoded dark values ── */

/* Sticky nav uses a hardcoded dark translucent bg on every page */
html[data-theme="light"] nav { background: rgba(255,255,255,0.85) !important; }

/* In light mode the page bg and card bg are both near-white. Without a real
   border + drop-shadow, cards look invisible until photos load — which on
   mobile cellular networks reads as "the catalogue is broken". Crank both
   so the card edges are unambiguously visible even with blank images. */
html[data-theme="light"] .product-card {
  background: var(--card);          /* light mode keeps the white card fill */
  border-color: rgba(15, 23, 42, 0.16);
  box-shadow: none;
}
html[data-theme="light"] .product-card:hover {
  border-color: rgba(37, 99, 235, 0.50);
  box-shadow: none;
}
/* Image area: animated shimmer in light mode so it's *obviously* a card
   waiting for an image (not just empty page). Once the <img> loads on top,
   it covers this. */
html[data-theme="light"] .product-img {
  background:
    linear-gradient(110deg, rgba(15,23,42,0.04) 8%, rgba(15,23,42,0.10) 18%, rgba(15,23,42,0.04) 33%);
  background-size: 250% 100%;
  animation: outflex-shimmer 1.6s linear infinite;
}
html[data-theme="light"] .product-img img { background: var(--card); }
@keyframes outflex-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Heavy dark drop-shadows look wrong on a light surface — soften them */
html[data-theme="light"] .currency-menu,
html[data-theme="light"] .cart-modal,
html[data-theme="light"] .cart-modal-content,
html[data-theme="light"] .login-card,
html[data-theme="light"] .table-wrap {
  box-shadow: 0 16px 40px rgba(15,23,42,0.12) !important;
}

/* White-film hover states are invisible on light — give them a dark film */
html[data-theme="light"] .currency-btn:hover,
html[data-theme="light"] .storage-btn:hover,
html[data-theme="light"] .qty-btn:hover,
html[data-theme="light"] .nav-cart:hover,
html[data-theme="light"] .cta-ghost:hover,
html[data-theme="light"] .compare-toggle:hover,
html[data-theme="light"] .col-storage-btn:hover,
html[data-theme="light"] .col-cta.secondary:hover,
html[data-theme="light"] .admin-input:focus {
  background: rgba(15,23,42,0.04);
}

/* Cart-modal backdrop: keep a dim, but lighter than pure-black on light */
html[data-theme="light"] .cart-modal-overlay,
html[data-theme="light"] .cart-modal-backdrop {
  background: rgba(15,23,42,0.45);
}

/* Solid-cyan buttons use black text, which is fine on the dark theme's
   lighter #3b82f6 but unreadable on the light theme's deeper #2563eb.
   Flip their text (and currentColor SVG icons) to white in light mode. */
html[data-theme="light"] .product-cta.buy-mode,
html[data-theme="light"] .cta-main,
html[data-theme="light"] .brand-tab.active,
html[data-theme="light"] .filter-empty button,
html[data-theme="light"] .compare-toggle--active,
html[data-theme="light"] .product-badge,
html[data-theme="light"] .checkout-btn,
html[data-theme="light"] .promo-apply,
html[data-theme="light"] .empty-cta,
html[data-theme="light"] .cart-modal-btn-primary,
html[data-theme="light"] .col-cta:not(.secondary):not(.wa):not(.in-cart),
html[data-theme="light"] .login-card button,
html[data-theme="light"] .save-btn {
  color: #fff;
}

/* The hero carousel sits on the dark hero panel in BOTH themes, so its phone
   drop-shadow and glow are defined once (soft, light) in index.html and kept
   identical here — no light-mode override, or the two themes would diverge. */

/* Typed badges have explicit, theme-independent backgrounds, so re-assert
   their text colour in light mode (the .product-badge rule above would
   otherwise force them white). NEW = black on green, HOT = white on orange. */
html[data-theme="light"] .product-badge--new,
html[data-theme="light"] .gallery-badge--new,
html[data-theme="light"] .col-badge--new { color: #000; }
html[data-theme="light"] .product-badge--hot,
html[data-theme="light"] .gallery-badge--hot,
html[data-theme="light"] .col-badge--hot { color: #fff; }

/* Body/paragraph text that was hardcoded as faded WHITE (fine on dark,
   invisible on light). Re-point to faded dark ink in light mode. Covers
   the FAQ answers, product-page description + highlight cards + spec
   table, compare spec values, policy-page paragraphs/lists, and the
   admin table rows. */
html[data-theme="light"] .faq-body,
html[data-theme="light"] .lead-copy,
html[data-theme="light"] .highlight-card p,
html[data-theme="light"] .spec-val,
html[data-theme="light"] .compare-table tr.spec-row td,
html[data-theme="light"] .compare-table tr.spec-row.diff td:not(.empty),
html[data-theme="light"] section.policy p,
html[data-theme="light"] section.policy ul,
html[data-theme="light"] section.policy ol,
html[data-theme="light"] table.recent td {
  color: rgba(15,23,42,0.80);
}

/* Admin inventory active-toggle: off-state is a white film + white knob,
   both invisible on a light surface. Re-point to a dark film with a shadowed
   knob so the switch reads in light mode. The green "on" state is fine as-is. */
html[data-theme="light"] .toggle { background: rgba(15,23,42,0.15); }
html[data-theme="light"] .toggle .knob { box-shadow: 0 1px 3px rgba(15,23,42,0.30); }

/* The hero info row has no container in either theme — it floats over the
   dark hero panel. (Its text + Shop button stay white via the index rules.) */
html[data-theme="light"] .phone-info {
  background: none;
  border: none;
  box-shadow: none;
}
html[data-theme="light"] .carousel-arrow {
  background: rgba(255,255,255,0.7);
  border-color: rgba(15,23,42,0.12);
}

/* The logo chip stays a black square with the cyan U in BOTH themes —
   it's the brand mark. (No override needed; .logo-bolt is hardcoded #000.) */


/* ─────────────────────────────────────────────────────────────
   Sun / moon theme toggle — theme-independent component, uses the
   live CSS variables so it restyles itself in each mode.
   ───────────────────────────────────────────────────────────── */
.theme-toggle {
  -webkit-appearance: none; appearance: none;
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; display: inline-flex; align-items: center;
  line-height: 0;
}
.tt-track {
  position: relative;
  width: 58px; height: 36px;   /* match the currency button's height */
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  display: inline-block;
  transition: border-color .25s, background .25s;
  overflow: hidden;
}
.theme-toggle:hover .tt-track { border-color: var(--border-c); }
/* Icons sit at the knob's resting centre in each state, so the active icon is
   dead-centre on the knob. Knob 24 wide, rest-left:5 → centre 17; travel 22 → 39. */
.tt-track svg {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; z-index: 2;
  transition: color .25s;
}
.tt-sun  { left: 17px; }   /* knob centre at rest-left  (light mode) */
.tt-moon { left: 41px; }   /* knob centre at rest-right (dark mode)  */
.tt-knob {
  position: absolute; top: 6px; left: 5px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px rgba(59,130,246,0.55);
  z-index: 1;
  transition: transform .3s cubic-bezier(.34,1.3,.5,1), background .25s, box-shadow .25s;
  transform: translateX(24px);     /* DARK (default): knob over the moon (right) */
}

/* Dark (default): moon is the active indicator (white on the knob),
   sun is dimmed. */
.tt-sun  { color: var(--grey); }
.tt-moon { color: #fff; }

/* Light: knob slides left under the sun; sun lights up, moon dims. */
html[data-theme="light"] .tt-knob {
  transform: translateX(0);
  box-shadow: 0 0 10px rgba(37,99,235,0.5);
}
html[data-theme="light"] .tt-sun  { color: #fff; }
html[data-theme="light"] .tt-moon { color: var(--grey); }

/* Floating fallback (only used on pages without a nav to host it) */
.theme-toggle--floating {
  position: fixed; top: 18px; right: 18px; z-index: 200;
}

/* On small screens the nav is tight — genuinely shrink the toggle's
   footprint (not just transform:scale, which wouldn't free layout space)
   so it doesn't crowd the wordmark. Knob travel is re-tuned for the
   narrower track. */
@media (max-width: 600px) {
  .tt-track { width: 46px; height: 30px; }   /* match mobile currency button height */
  .tt-knob  { width: 22px; height: 22px; top: 4px; left: 4px; transform: translateX(16px); }
  html[data-theme="light"] .tt-knob { transform: translateX(0); }
  .tt-track svg { width: 13px; height: 13px; }
  /* knob centre rest-left = 15; right-rest = 15 + travel(16) = 31 */
  .tt-sun  { left: 15px; }
  .tt-moon { left: 31px; }
}
