/* Retro theme: 90s cable-TV look, opt-in via the RETRO toggle (public/retro.js).
   Every theme rule is scoped to html.retro, so the default site is unchanged.
   Covers both token sets: site pages (cascade-v2.css / vertical-v2.css) and audit pages (render-audit).
   Meaning colors (--bad, --good, --warn, grid cells) are deliberately NOT overridden. */

html.retro {
  /* Original Cascade palette is kept (green / tan / blue); retro = type, shadows, panels, CRT. */
  --retro-ff: "VT323", ui-monospace, monospace;
  --retro-shadow: 2px 2px 0 #000;
  --retro-head: #E8D49A;
  --ff-display: "VT323", ui-monospace, monospace; /* serif numbers, prices, FAQ go retro too */
}

html.retro body {
  background: linear-gradient(180deg, #03150B 0%, #062514 45%, #0A3A21 100%) fixed;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.85);
}

/* Headings, labels, numbers: chunky terminal type with hard black shadow */
html.retro h1, html.retro h2, html.retro h3, html.retro h4,
html.retro .eyebrow, html.retro .stat-value, html.retro .stat-label,
html.retro .brand, html.retro .nav-cta, html.retro .btn {
  font-family: var(--retro-ff) !important;
  letter-spacing: 0.02em !important;
  text-shadow: var(--retro-shadow);
}
html.retro h1, html.retro h2, html.retro h3 {
  color: var(--retro-head);
  font-weight: 400;
  line-height: 1.05;
}
html.retro h1 { font-size: clamp(44px, 6vw, 80px); }
html.retro h2 { font-size: clamp(34px, 4.4vw, 54px); }
html.retro h3 { font-size: clamp(26px, 2.8vw, 34px); }
html.retro h1 em, html.retro h2 em { font-style: normal; color: #4AC4E0; }
html.retro .eyebrow, html.retro .stat-label { font-size: 18px; text-transform: uppercase; }
html.retro .stat-value { font-size: 1.5em; }

/* Panels get the boxy, inset-glow TV card look */
html.retro .audit-card, html.retro .stat, html.retro .card, html.retro .tier,
html.retro .faq-item, html.retro .sample-card {
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 0 28px rgba(74,196,224,0.14), 0 6px 0 rgba(0,0,0,0.35) !important;
}
/* Stat boxes get a panel look in retro, so give the numbers room off the left edge */
html.retro .statband .stat:first-child { padding-left: 24px; }
@media (max-width: 600px) {
  html.retro .statband .stat { padding-left: 14px !important; }
}

html.retro .btn, html.retro .nav-cta {
  border-radius: 4px !important;
  font-size: 21px !important; font-weight: 400 !important;
  text-transform: uppercase; text-shadow: none !important;
  box-shadow: 3px 3px 0 #000 !important;
}
@media (max-width: 600px) {
  html.retro .nav .btn, html.retro .nav-cta { font-size: 16px !important; padding: 9px 12px !important; }
}

/* Kill the editorial grain and spotlight while retro is on */
html.retro body::before { opacity: 0 !important; }
html.retro body::after { background: none !important; }

/* CRT overlay: scanlines + vignette. Never blocks clicks. */
#retro-crt { display: none; }
html.retro #retro-crt {
  display: block;
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,0.45));
}
@media (prefers-reduced-motion: no-preference) {
  html.retro #retro-crt { animation: retro-flicker 6s infinite steps(1); }
  @keyframes retro-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 0.94; } 48% { opacity: 1; } }
}

/* The toggle itself (visible in both themes) */
#retro-toggle {
  position: fixed; left: 14px; bottom: 14px; z-index: 9999;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; min-height: 34px;
  font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #dabe79; background: rgba(3,21,11,0.82);
  border: 1px solid rgba(218,190,121,0.35); border-radius: 999px;
  cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-shadow: none;
}
#retro-toggle:hover { border-color: #dabe79; }
#retro-toggle:focus-visible { outline: 2px solid #4ac4e0; outline-offset: 2px; }
#retro-toggle svg { width: 14px; height: 14px; flex: none; }
html.retro #retro-toggle {
  font-family: var(--retro-ff); font-size: 18px; letter-spacing: 0.06em;
  color: #062514; background: #DABE79; border-color: #000; border-radius: 4px;
  box-shadow: 3px 3px 0 #000;
}

@media (max-width: 600px) {
  #retro-toggle { left: auto; right: 14px; }
}

@media print {
  #retro-toggle, #retro-crt { display: none !important; }
}

/* Phones: no toggle (it sat over body copy); the worker's head script also skips the theme below 641px */
@media (max-width: 640px) {
  #retro-toggle { display: none; }
}