/* =========================================================
   Paradox Media — sistem LIGHT mode overlay (2026-08-22)
   Load AFTER styles.css?v=4 on pages with <body class="sistem light">.
   Token flip + the handful of hardcoded-dark component overrides.
   ========================================================= */
:root {
  --bg-deep: #f5f7f2;
  --bg: #fafbf8;
  --bg-elev: #ffffff;
  --surface: rgba(12, 16, 10, 0.045);
  --surface-2: rgba(12, 16, 10, 0.07);
  --border: rgba(12, 16, 10, 0.12);
  --border-strong: rgba(12, 16, 10, 0.22);
  --fg: #151a13;
  --fg-muted: #495247;
  --fg-dim: #6a736c;
  /* --lime stays #a6e22e for FILLS (dark text on lime is the brand's billboard look).
     --lime-bright is used as TEXT/accent on the background → must darken to stay readable. */
  --lime-bright: #5c8f0a;
  --lime-glow: rgba(123, 179, 21, 0.22);
  --accent-bright-rgb: 92, 143, 10;
  color-scheme: light;
}

/* atmosphere: light paper wash instead of the cinematic dark gradient */
.atmosphere {
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    linear-gradient(180deg, #f2f4ee 0%, #f5f7f2 100%);
}
.blob { opacity: 0.3; }
.grid-lines {
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(12, 16, 10, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 16, 10, 0.03) 1px, transparent 1px);
}
.grain { opacity: 0.25; }

/* header glass + sticky bar */
.lp-head.scrolled {
  background: rgba(250, 251, 248, 0.78);
}
.sticky-cta {
  background: rgba(250, 251, 248, 0.94);
}

/* client-logo marquee: white-forced logos become black on light paper */
.marquee-track img { filter: grayscale(1) brightness(0); opacity: 0.5; }
.marquee-track img:hover { opacity: 0.8; }

/* VSL frame + result strip: hardcoded dark gradients → light */
.vsl-glass,
.svsl-shell {
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(var(--accent-rgb), 0.10), transparent 55%),
    linear-gradient(180deg, #ffffff, #eff2ec);
  box-shadow: 0 30px 80px -38px rgba(20, 26, 16, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.resultstrip {
  background: linear-gradient(180deg, #edf1e6, #f2f4ef);
}

/* cards with baked white-alpha gradients */
.cs-card { background: linear-gradient(180deg, var(--surface-2), rgba(12, 16, 10, 0.02)); }

/* softer drop shadows tuned for a light ground */
.modal-box { box-shadow: 0 30px 80px -30px rgba(20, 26, 16, 0.3); }

/* =========================================================
   Luxury layer (body.sistem) — champagne + ivory flip.
   The sand/ivory tokens live on body.sistem, not :root, so they
   must be re-declared at higher specificity here.
   ========================================================= */
body.sistem.light {
  --sand: #806224;        /* dark bronze — accent text readable on paper */
  --sand-bright: #6b5320; /* H1/section accent spans */
  --sand-deep: #58441a;
  --sand-rgb: 128, 98, 36;
  --ivory: #171c15;       /* heading ink flips near-black */
}

/* elements that sit ON dark media surfaces keep the original light inks */
body.sistem.light .svsl-chip { color: #f3e7c8; }
body.sistem.light .svsl-btn { color: #f4f1e8; }

/* the guarantee seal stays a champagne-FILLED badge with dark text */
body.sistem.light .guarantee-seal {
  background: radial-gradient(circle at 50% 30%, #f3e7c8, #b89d63);
  color: #171c15;
  box-shadow: 0 0 0 9px rgba(184, 157, 99, 0.16), 0 24px 60px -20px rgba(184, 157, 99, 0.3);
}

/* the VSL shell's champagne ring reads muddy dark-on-light — soften it */
body.sistem.light .svsl-shell,
body.sistem.light .svsl-video {
  box-shadow: 0 40px 100px -44px rgba(20, 26, 16, 0.35), 0 0 0 1px rgba(128, 98, 36, 0.28);
}

/* mobile comparison-card labels: bright lime + soft red on paper → darken both */
@media (max-width: 860px) {
  body.sistem.light .vtable td:last-child::before { color: #5c8f0a; }
  body.sistem.light .vtable td:nth-child(2)::before { color: #c2493f; }
}

/* email input: hardcoded dark glass → white field on light mode */
body.sistem.light .apply-field input,
body.sistem.light .apply-field select {
  background-color: #ffffff;
  color: var(--fg);
  border-color: rgba(12, 16, 10, 0.22);
}
body.sistem.light .apply-field input::placeholder { color: #8a938c; opacity: 1; }