/* ============================================================
   Light theme

   Loaded last on every page. Because styles.css and v2.css now resolve every
   surface, border and text colour through a token, most of this file is a token
   swap. What follows the swap is the handful of things a token cannot express:

   - anything that was a light-on-dark GRADIENT (the metal headline, the seam,
     the aura field) needs its own light recipe, not an inverted one
   - anything that sits ON TOP OF PHOTO OR VIDEO keeps its dark scrim, because
     the text on it is white in both themes
   - the ambient glow field has to come down hard: the same blue blooms that
     read as depth on black read as smeared haze on white

   reels.css is untouched on purpose - see the note in styles.css.
   ============================================================ */

:root[data-theme="light"] {
  /* a thin wash over the page ground is now dark ink, not white */
  --tint: 16, 22, 38;

  --bg: #FBFBFD;
  --bg-raise: #FFFFFF;
  --panel: #FFFFFF;
  --panel-2: #F4F6FA;
  --feed-card: #FFFFFF;
  --feed-inset: #F2F5FA;

  --line: rgba(var(--tint),.10);
  --line-strong: rgba(var(--tint),.18);

  --ink: #0B0F1A;
  --ink-soft: #2C3444;
  --dim: #59606E;
  --faint: #6E7482;

  /* the blue holds, but the mid tone is darkened so it passes on white */
  --accent: #1F5AF0;
  --accent-lite: #1B4FD8;
  --accent-deep: #14399C;

  --glow-blue: 0 0 40px rgba(31,90,240,.18);
  --grid: rgba(var(--tint),.045);
  --edge: rgba(var(--tint),.12);

  color-scheme: light;
}

/* ---------- ground ---------- */
:root[data-theme="light"] body { background: var(--bg); }
/* the grain reads as dirt on white */
:root[data-theme="light"] body::after { opacity: .014; }

/* ---------- the metal headline ----------
   A silver sheen is a light-on-dark effect. On white it has to run the other
   way: dark graphite with a lighter core, or the headline disappears. */
:root[data-theme="light"] .metal {
  background: linear-gradient(96deg, #2A2F3A 0%, #0B0F1A 18%, #333A49 42%,
                              #0B0F1A 60%, #2A2F3A 82%, #11151F 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- ambient glow ----------
   Nine full-strength blue blooms over white is haze, not depth. */
:root[data-theme="light"] .aura { opacity: .3; }
:root[data-theme="light"] .ao-s { opacity: .22 !important; }
:root[data-theme="light"] .hero-vignette {
  background:
    radial-gradient(56% 48% at 50% 30%, rgba(251,251,253,.92) 0%, rgba(251,251,253,.55) 60%, rgba(251,251,253,0) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(251,251,253,0) 18%, rgba(251,251,253,0) 76%, var(--bg) 100%);
}
:root[data-theme="light"] .sweep i { filter: blur(58px); opacity: .5; }

/* ---------- nav, menu, chrome ---------- */
:root[data-theme="light"] .nav-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(248,249,252,.86) 100%);
  box-shadow: 0 10px 30px rgba(16,22,38,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-theme="light"] .nav.scrolled .nav-bar {
  box-shadow: 0 14px 40px rgba(16,22,38,.16), inset 0 1px 0 rgba(255,255,255,.9);
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="light"] .nav-bar { background: #FFFFFF; backdrop-filter: none; }
}
:root[data-theme="light"] .menu-panel { background: rgba(251,251,253,.9); }
:root[data-theme="light"] .menu-links a { color: #7A8091; }
:root[data-theme="light"] .pill-badge { background: rgba(255,255,255,.94); }
:root[data-theme="light"] .btn-ghost { background: rgba(var(--tint),.04); }
:root[data-theme="light"] .btn-ghost:hover { background: rgba(var(--tint),.08); }

/* ---------- media scrims stay dark ----------
   The caption sitting on these is white in both themes, so inverting the scrim
   would delete the caption. Only the gradient's END is retargeted, so a card
   still blends into whatever ground the page is on. */
:root[data-theme="light"] .vs-card .vs-img::after {
  background: linear-gradient(180deg, rgba(8,9,12,.12) 0%, rgba(8,9,12,.5) 42%,
                              rgba(8,9,12,.93) 76%, #08090C 100%);
}
:root[data-theme="light"] .vs-card { background: #0E1118; }
:root[data-theme="light"] .vs-card p { color: #C2C7D2; }
:root[data-theme="light"] .vs-card.cold p { color: #949AA8; }
:root[data-theme="light"] .vs-card h3,
:root[data-theme="light"] .vs-tag { color: #fff; }
:root[data-theme="light"] .vs-tag {
  background: rgba(12,13,18,.72); border-color: rgba(255,255,255,.22);
}
:root[data-theme="light"] .bx-cap h3 { color: #fff; }
:root[data-theme="light"] .bx-cap p { color: #C2C7D2; }

/* ---------- the seam ----------
   A white-hot line is invisible on white. */
:root[data-theme="light"] .seam {
  background: linear-gradient(90deg, transparent, rgba(31,90,240,.35) 22%,
                              rgba(31,90,240,.6) 50%, rgba(31,90,240,.35) 78%, transparent);
}
:root[data-theme="light"] .seam::after {
  background: radial-gradient(50% 50% at 50% 50%, rgba(31,90,240,.16), transparent 70%);
}

/* ---------- panels ---------- */
:root[data-theme="light"] .bx,
:root[data-theme="light"] .tcard,
:root[data-theme="light"] .feat,
:root[data-theme="light"] .crew-card,
:root[data-theme="light"] .stack-list,
:root[data-theme="light"] .faq-item,
:root[data-theme="light"] .qual-card {
  box-shadow: 0 1px 2px rgba(16,22,38,.04), 0 12px 28px rgba(16,22,38,.06);
}
/* the top sheen was a highlight for a dark panel; on white it is a hairline */
:root[data-theme="light"] .bx::after,
:root[data-theme="light"] .tcard::after,
:root[data-theme="light"] .qual-card::after {
  background: linear-gradient(90deg, transparent, rgba(var(--tint),.10) 30%,
                              rgba(var(--tint),.10) 70%, transparent);
}
:root[data-theme="light"] .guar,
:root[data-theme="light"] .band,
:root[data-theme="light"] .stack-total {
  box-shadow: 0 12px 34px rgba(31,90,240,.10);
}
:root[data-theme="light"] .qual-card {
  box-shadow: 0 18px 44px rgba(16,22,38,.10), 0 0 0 1px rgba(31,90,240,.14);
}

/* ---------- the community feed ----------
   Named handles were picked for a dark card. On white they need real contrast. */
:root[data-theme="light"] .fc { box-shadow: 0 2px 10px rgba(16,22,38,.06); }
:root[data-theme="light"] .fc-name.c1 { color: #1B4FD8; }
:root[data-theme="light"] .fc-name.c2 { color: #17864A; }
:root[data-theme="light"] .fc-name.c3 { color: #6A3FD1; }
:root[data-theme="light"] .fc-name.c4 { color: #9A6A0B; }
:root[data-theme="light"] .fc-embed .big.up { color: #17864A; }
:root[data-theme="light"] .fc-embed .bars i {
  background: linear-gradient(180deg, #6193F5, #1F5AF0);
}

/* ---------- the pillar numerals ---------- */
:root[data-theme="light"] .pillar-node { -webkit-text-stroke-color: rgba(31,90,240,.5); }
:root[data-theme="light"] .pillar:hover .pillar-node {
  color: rgba(31,90,240,.10); -webkit-text-stroke-color: rgba(31,90,240,.85);
}

/* ---------- background reels ----------
   Dim-to-black hides the burned-in captions on a dark page. On a light page the
   same treatment is six dark rectangles, so they are lifted and faded instead.
   The blur stays: it is what keeps the captions illegible. */
:root[data-theme="light"] .float-reel { opacity: .62; }
:root[data-theme="light"] .float-reel video {
  filter: brightness(1.04) saturate(.82) contrast(.96) blur(1.5px);
}
:root[data-theme="light"] .float-reel::after {
  background: linear-gradient(180deg, rgba(251,251,253,.3) 0%, rgba(251,251,253,.5) 100%);
}
:root[data-theme="light"] .vsl-frame {
  border-color: rgba(31,90,240,.5);
  box-shadow: 0 0 0 1px rgba(31,90,240,.14), 0 24px 60px rgba(16,22,38,.18),
              0 0 70px rgba(31,90,240,.16);
}
/* the VSL poster keeps its dark overlay: the play button and pill on it are white */
:root[data-theme="light"] .vsl-glow {
  background: radial-gradient(50% 50% at 50% 50%, rgba(31,90,240,.28) 0%, rgba(31,90,240,0) 70%);
}

/* ---------- footer ---------- */
:root[data-theme="light"] .footer {
  background: linear-gradient(180deg, rgba(244,246,250,.9) 0%, #F4F6FA 120px);
}

/* ---------- theme toggle ---------- */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 20px;
  border-left: 1px solid var(--line);
  color: var(--dim);
  transition: color .15s ease;
}
.theme-btn:hover { color: var(--accent-lite); }
.theme-btn svg { width: 17px; height: 17px; display: block; }
/* one button, two glyphs: show the mode you would switch TO */
.theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: block; }
:root[data-theme="light"] .theme-btn .moon { display: none; }

@media (max-width: 720px) {
  .theme-btn { padding: 0 14px; }
  .theme-btn svg { width: 16px; height: 16px; }
}

/* ============================================================
   Light-mode contrast fixes

   Found by measuring every text node against its painted background in both
   themes, not by looking. Each of these is an element whose colour was correct
   for a dark page and inverted into something unreadable.
   ============================================================ */

/* a ghost button INSIDE a photo card is still on a dark surface */
:root[data-theme="light"] .vs-card .btn-ghost {
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.3);
}
:root[data-theme="light"] .vs-card .btn-ghost:hover { background: rgba(255,255,255,.18); }

/* the pill and the play button sit on the dark VSL poster */
:root[data-theme="light"] .vsl-soon { color: #D6DCE6; }

/* the platform tabs are page controls, so the active one needs a real fill
   rather than a 14% blue wash that vanishes against white */
:root[data-theme="light"] .plat-tab { background: rgba(var(--tint),.04); }
:root[data-theme="light"] .plat-tab:hover { color: var(--ink); border-color: rgba(31,90,240,.4); }
:root[data-theme="light"] .plat-tab.on {
  color: #fff; background: var(--accent); border-color: var(--accent);
}

/* both of these are overlays burned onto the live-call video */
:root[data-theme="light"] .live-you,
:root[data-theme="light"] .live-badge { color: #fff; }

/* the versus table headers were pale mint and pale pink, picked to glow on a
   dark panel. On white they need the darker end of the same hues. */
:root[data-theme="light"] .vs-h.good { background: rgba(23,134,74,.10); color: #106336; }
:root[data-theme="light"] .vs-h.bad { background: rgba(200,60,60,.09); color: #A33131; }

/* the inset stat panel is lighter than the card it sits in, so the muted text
   inside it needs to go a step darker than --faint */
:root[data-theme="light"] .fc-embed .lbl,
:root[data-theme="light"] .fc-embed .sub { color: #5F6573; }