/* ============================================================
   Light-theme override for legacy pages (crypto-markets, tools, articles).
   Loaded AFTER each page's own inline <style> so these values win.
   Remaps the old dark design tokens to a clean light palette and
   neutralizes the hardcoded dark literals (header, glow, gradient titles).
   No markup or JS is changed.
   ============================================================ */
:root{
  --bg-primary:#FFFFFF; --bg-secondary:#FFFFFF; --bg-card:#FFFFFF; --bg-elevated:#F7F8FC;
  --text-primary:#0B1020; --text-secondary:#3F4661; --text-muted:#7A8199;
  --accent-blue:#4F46E5; --accent-purple:#6366F1; --accent-cyan:#0891B2;
  --accent-green:#059669; --accent-red:#DC2626; --accent-orange:#B45309; --accent-gold:#B45309;
  --border-subtle:#E7E9F2; --border-medium:#DDE0EE; --border-light:#EEF0F6; --border:#E7E9F2;
  --glow-blue:rgba(79,70,229,.12); --glow-gold:rgba(180,83,9,.14); --glow-purple:rgba(99,102,241,.12);
  --shadow-sm:0 1px 2px rgba(16,24,64,.05);
  --shadow-md:0 4px 14px rgba(16,24,64,.08);
  --shadow-lg:0 10px 30px rgba(16,24,64,.10);
}

body{ background:#FFFFFF !important; color:#0B1020 !important; }
body::before{ display:none !important; }

/* FIX: legacy .logo (48px box) conflicts with the new shared header → reset it */
.hd .logo{ width:auto !important; height:auto !important; background:none !important; border-radius:0 !important; box-shadow:none !important; display:flex !important; place-items:normal !important; align-items:center !important; gap:11px !important; }
.hd .logo .mk{ width:34px !important; height:34px !important; border-radius:10px !important; box-shadow:0 6px 16px rgba(67,56,202,.28) !important; }

/* Active nav item */
.hnav a.active{ background:#EEF0FE !important; color:#4338CA !important; }
.hnav a.btn.active{ background:#4338CA !important; color:#fff !important; }

/* crypto-markets: rows were semi-transparent navy → looked gray on white */
.crypto-row{ background:#FFFFFF !important; border:1px solid #E7E9F2 !important; box-shadow:0 1px 2px rgba(16,24,64,.05) !important; }
.crypto-row:hover{ border-color:#C7CBEC !important; }
.market-bar{ background:#F6F7FB !important; border:1px solid #E7E9F2 !important; }
.market-bar-item{ color:#3F4661 !important; }
.rank{ color:#7A8199 !important; }
.row-main, .coin-stat-value, .col-right, .row-main .col-right{ color:#0B1020 !important; }
.skeleton{ background:#EEF0F6 !important; }
/* expanded coin detail: stat boxes were dark navy translucent → gray */
.coin-stat{ background:#F7F8FC !important; border:1px solid #E7E9F2 !important; }
.coin-stat-label{ color:#7A8199 !important; }
.coin-stat-value{ color:#0B1020 !important; }
.chart-area{ border-top-color:#E7E9F2 !important; }
.tf-btn{ color:#3F4661 !important; border-color:#E7E9F2 !important; }
.col-vol{ color:#3F4661 !important; }
.coin-name{ color:#0B1020 !important; }
.coin-ticker{ color:#7A8199 !important; }

/* Sticky header (hardcoded dark rgba) */
.header{ background:rgba(255,255,255,.9) !important; border-bottom:1px solid #E7E9F2 !important; box-shadow:0 1px 2px rgba(16,24,64,.05) !important; }
.nav{ background:transparent !important; }
@media (max-width:768px){ .nav{ background:#FFFFFF !important; border-bottom:1px solid #E7E9F2 !important; } }
.nav a{ color:#3F4661 !important; }
.nav a:hover, .nav a.active{ color:#4F46E5 !important; background:rgba(79,70,229,.08) !important; }
.hamburger span{ background:#0B1020 !important; }

/* Kill gradient-clipped text (invisible on white) → solid dark/brand */
.brand-name, .brand-text .brand-name,
h1, h2, h3, .page-title, .section-title, .hero h1, .hero-title,
.article-hero h1, .article-title, .stat-value{
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  background-clip: border-box !important;
  color:#0B1020 !important;
}

/* Hero / decorative dark bands → light (some article heroes use a dark gradient) */
.hero, .page-hero{ background:transparent !important; }
.article-hero{ background:#F6F7FB !important; backdrop-filter:none !important; border:1px solid #E7E9F2 !important; }

/* Cards & surfaces that relied on dark contrast — add a light border */
.stat-card, .price-card, .calc-card, .faq-item, .example, .info-section,
.cta-section, .example-section, .seo-card, .article-card, .guide-card, .coin-card,
.result, .method, .table-wrap, table{ border-color:#E7E9F2 !important; }

/* Footer */
.deep-footer, .footer{ background:#F6F7FB !important; border-top:1px solid #E7E9F2 !important; }

/* Links */
a{ color:#4F46E5; }

/* Inputs */
input, select, textarea{ background:#FFFFFF !important; color:#0B1020 !important; border-color:#DDE0EE !important; }