/* ============================================================
   Shared Dark Theme — Today's Best Picks
   Used by: guides, reviews, category pages, about, privacy, etc.
   NOT used by: product sales pages (those stay light-themed).

   Overrides the standard :root variable names already used
   site-wide (--paper, --card, --ink, etc.) so existing page
   markup and component CSS keep working without rewrites —
   only the values change.
   ============================================================ */

:root {
  --midnight: #0B0E14;
  --steel: #14161F;
  --steel-line: rgba(255, 255, 255, 0.09);

  --paper: #0B0C12;
  --card: #14161F;

  --ink: #EDEEF2;
  --ink-soft: #9296A6;
  --mist: #6B7080;
  --line: rgba(255, 255, 255, 0.1);

  --cool: #6FB4EC;   --cool-dim: #123350;   --cool-tint: rgba(111,180,236,0.09);
  --warm: #D9AE4E;   --warm-dim: #3E3416;   --warm-tint: rgba(217,174,78,0.09);
  --amber: #F5895A;  --amber-dim: #4A2C13;  --amber-tint: rgba(245,137,90,0.09);

  --signal: #FF6B6B;
  --accent: #7DD3FC;
  --accent-tint: rgba(125, 211, 252, 0.12);

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
  --shadow: 0 10px 28px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 56px rgba(0,0,0,0.5);
}

html { scroll-behavior: auto; } /* Lenis (smooth-scroll.js) owns smoothing — native smooth-scroll fights it and causes jumpy scroll. */

body {
  background: var(--paper);
  color: var(--ink);
}

/* Generic reveal-on-scroll utility. Add class="reveal-scroll" to any
   element; smooth-scroll.js handles the IntersectionObserver that
   toggles .is-visible. Degrades safely with no JS: element stays visible. */
.reveal-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-scroll { opacity: 1; transform: none; transition: none; }
}

/* Soft aurora glow blobs — optional decorative utility.
   Markup pattern:
   <div class="aurora" aria-hidden="true"><span class="a1"></span><span class="a2"></span></div>
   Place as the first child of any position:relative section. */
.aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora span { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(90px); opacity: 0.22; will-change: transform; background: var(--accent); }
.aurora .a1 { top: -160px; left: -80px; animation: aurora-drift-1 24s ease-in-out infinite; }
.aurora .a2 { bottom: -180px; right: -60px; animation: aurora-drift-2 28s ease-in-out infinite; }
@keyframes aurora-drift-1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,40px) scale(1.15); } }
@keyframes aurora-drift-2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,40px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .aurora span { animation: none; } }
@media (max-width: 760px) { .aurora span { opacity: 0.12; width: 300px; height: 300px; } }