/* ═══════════════════════════════════════════════════════════════════════
   vibescan-tokens-light.css
   ---------------------------------------------------------------------
   PAIRED with vibescan-tokens.css. The dark palette (Pixar-hypercolor
   void / platinum / indigo / amber) lives in that file at `:root` and is
   the default for every page on the site. This file adds the *light*
   palette as a sibling declaration that activates when the page root
   carries `data-vs-theme="light"`.

   Why a sibling file instead of one big tokens.css:
     1. Keeps the dark tokens diffable against the original brief — the
        dark theme is the load-bearing marketing design and must stay
        visually frozen.
     2. The two themes share every token name (`--vs-void`, `--vs-ink`,
        `--vs-platinum`, `--vs-amber`, etc.) so all of the `vs-` rules
        in `Index.razor.css` and the future `Index.light.razor.css`
        keep working — only the *values* flip.
     3. Toggling is a one-attribute flip on `<html>` driven by the
        `theme-toggle.js` module; no second <body> class, no theme
        provider, no extra DOM. The button lives in the nav, the
        preference persists in localStorage (and as a same-origin
        `vs_theme` cookie so server-side Blazor can read it on the
        first paint and avoid a flash of the wrong theme).

   Token values below are taken verbatim from skills/checkvibe-clone.skill.md
   §"Exact design tokens (light sections)" — cool metallic silver,
   deliberately desaturated, with a near-black ink on a near-white
   substrate. Dark sections on the light page use `#0a0a0a`/`#060607`
   per the same skill file, applied only to the few sections that
   really need a dark surface for contrast (the "Beyond the scan"
   block, the testimonials, the final CTA).

   LOAD ORDER (App.razor):
       <link href="css/vibescan-tokens.css"       rel="stylesheet" />
       <link href="css/vibescan-tokens-light.css" rel="stylesheet" />  (this)
   ═══════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────
   1. THE THEME ATTRIBUTE TRUTH
   `data-vs-theme` is set on <html> (document.documentElement) by
   theme-toggle.js. Default (no attribute, or value="dark") = the dark
   palette already declared in vibescan-tokens.css. Value="light" =
   the overrides below win.
   ───────────────────────────────────────────────────────────────────── */
:root[data-vs-theme="light"] {
  /* substrate — light page is a near-white field with a steel-silver
     radial wash and a soft cool noise grain. The substrate token names
     stay the same so the existing rules (`.vs-bg { background:
     var(--vs-void) }`, `.vs-pillars { background: var(--vs-carbon) }`)
     keep working, they just paint white-on-silver now instead of
     black-on-void. */
  --vs-void:            #F5F7FB;   /* page background, light cool grey */
  --vs-carbon:          #FFFFFF;   /* panel surface, pure white */
  --vs-carbon-hi:       #FFFFFF;   /* raised surface (console, term) */
  --vs-carbon-lo:       #EEF1F7;   /* sunken surface (log stream base) */

  /* silver — same hue family as the dark page, just much brighter. The
     brief calls this "metallic silver" deliberately, not warm cream. */
  --vs-platinum:        #1A1C21;   /* strongest text; was DDE3EF dark */
  --vs-platinum-2:      #4A5060;
  --vs-platinum-dim:    #586071;   /* secondary copy, >=5.5:1 on #F5F7FB */
  --vs-platinum-ghost:  #7A8194;   /* placeholder / disabled */

  /* accents — the rest of the palette stays recognisably the same
     identity. The action colour (amber) is held in reserve on the
     light page for the same single-purpose use as on the dark page
     (CTAs only). The severity colours stay rationed. */
  --vs-indigo:          #4A3DE0;   /* slightly deeper so it reads on white */
  --vs-indigo-soft:     rgba(74,61,224,.10);
  --vs-amber:           #E57708;   /* one shade deeper than dark mode's
                                      amber so contrast vs #FFFFFF holds
                                      AAA on the body. Still the ONLY
                                      warm hue on the page. */
  --vs-amber-soft:      rgba(229,119,8,.10);
  --vs-ice:             #0284C7;   /* "passed" — deeper on light */
  --vs-ice-soft:        rgba(2,132,199,.08);
  --vs-critical:        #DC2626;   /* critical — still rationed */
  --vs-critical-soft:   rgba(220,38,38,.08);
  --vs-warn:            #B45309;   /* warning — deeper for legibility */
  --vs-warn-soft:       rgba(180,83,9,.08);

  /* text */
  --vs-ink:             #1A1C21;   /* strongest body text */
  --vs-ink-2:           #5B6271;   /* body copy */
  --vs-ink-3:           #626878;   /* muted captions */

  /* hairlines — the page is one continuous graticule, but on a light
     substrate the hairlines are also light, not luminous on dark. */
  --vs-hair:            rgba(26,28,33,.08);
  --vs-hair-2:          rgba(26,28,33,.14);
  --vs-hair-3:          rgba(26,28,33,.22);
}


/* ─────────────────────────────────────────────────────────────────────
   2. PAGE-LEVEL PAINT IN LIGHT MODE
   The dark page paints its backdrop through .vs-bg + .vs-bg-glitter
   layers (see Index.razor.css). The light page uses the same system
   but with light-silver glitter and a soft radial wash; the dark
   versions of those layers hide under the light theme because the
   dark page is the *default* and would be wrongly re-painted by a
   generic :root override.
   ───────────────────────────────────────────────────────────────────── */
:root[data-vs-theme="light"] body {
  background: var(--vs-void);
  color: var(--vs-ink);
}

:root[data-vs-theme="light"] .vs-bg-glitter {
  background-color: #F5F7FB;
  background-image:
    radial-gradient(1.4px 1.4px at 8% 16%,  rgba(26,28,33,.32),  transparent 60%),
    radial-gradient(1px 1px at 21% 64%,    rgba(26,28,33,.22),  transparent 60%),
    radial-gradient(2px 2px at 35% 28%,    rgba(26,28,33,.18),  transparent 60%),
    radial-gradient(1px 1px at 47% 86%,    rgba(26,28,33,.28),  transparent 60%),
    radial-gradient(1.2px 1.2px at 59% 9%, rgba(26,28,33,.16),  transparent 60%),
    radial-gradient(1px 1px at 71% 48%,    rgba(26,28,33,.24),  transparent 60%),
    radial-gradient(1.8px 1.8px at 83% 22%, rgba(26,28,33,.16),  transparent 60%),
    radial-gradient(1px 1px at 95% 71%,    rgba(26,28,33,.22),  transparent 60%),
    radial-gradient(900px 620px at 18% -8%,  rgba(74,61,224,.10),  transparent 70%),
    radial-gradient(720px 520px at 102% 4%,  rgba(2,132,199,.06), transparent 70%),
    radial-gradient(600px 400px at 50% 108%, rgba(229,119,8,.04),  transparent 70%);
}

:root[data-vs-theme="light"] .vs-bg-shimmer {
  background: linear-gradient(112deg,
    transparent 38%, rgba(255,255,255,.55) 46%, rgba(74,61,224,.08) 50%,
    rgba(255,255,255,.55) 54%, transparent 62%);
  opacity: .35;
}

:root[data-vs-theme="light"] .vs-bg-graticule {
  background-image:
    linear-gradient(to right,  rgba(26,28,33,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,28,33,.045) 1px, transparent 1px);
}

:root[data-vs-theme="light"] .vs-bg-grain {
  opacity: .20;
  mix-blend-mode: multiply;
}


/* ─────────────────────────────────────────────────────────────────────
   3. NAV + RAIL TRANSLUCENCY
   The dark nav uses `rgba(6,7,10,.80)` over a near-black background.
   On a light page the same translucent fill would become a dark blot.
   Swap to a near-white translucent fill.
   ───────────────────────────────────────────────────────────────────── */
:root[data-vs-theme="light"] .vs-rail {
  background: rgba(255,255,255,.78);
}
:root[data-vs-theme="light"] .vs-nav {
  background: rgba(255,255,255,.82);
}
:root[data-vs-theme="light"] .vs-mobile-menu {
  background: rgba(255,255,255,.95);
}


/* ─────────────────────────────────────────────────────────────────────
   4. CHROME TEXT GRADIENT
   .vs-chrome is the silver gradient text effect (used on the dark page
   for "one pass.", "breaks trust.", etc.). On a light page the same
   gradient (defined inline in Index.razor.css) would invert — flip
   the stops so silver-to-white reads correctly against white.
   ───────────────────────────────────────────────────────────────────── */
:root[data-vs-theme="light"] .vs-chrome {
  background: linear-gradient(180deg, #1A1C21 0%, #5B6271 46%, #2A2E34 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


/* ─────────────────────────────────────────────────────────────────────
   5. AMBER BUTTON IN LIGHT MODE
   The dark page's amber button uses #FF8A1F on a dark substrate and
   passes contrast AAA. On white, the same colour fails — the token
   above already deepened it to #E57708, but the hover lift + glow
   shadow need their rgba recalibrated for the lighter ground.
   ───────────────────────────────────────────────────────────────────── */
:root[data-vs-theme="light"] .vs-btn-amber {
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(229,119,8,.45), 0 10px 28px -10px rgba(229,119,8,.40);
}
:root[data-vs-theme="light"] .vs-btn-amber:hover {
  box-shadow: 0 0 0 1px rgba(229,119,8,.65), 0 14px 36px -10px rgba(229,119,8,.55);
}
:root[data-vs-theme="light"] .vs-btn-ghost {
  color: var(--vs-ink);
  border-color: var(--vs-hair-3);
}
:root[data-vs-theme="light"] .vs-btn-ghost:hover {
  background: rgba(26,28,33,.04);
  border-color: var(--vs-ink-2);
}


/* ─────────────────────────────────────────────────────────────────────
   6. TAG PILL CONTRAST
   The dark page's tag pills use translucent fills over a black
   substrate. The same fills on white read as nearly invisible.
   Deepen each pill's background to compensate without losing the
   rationed-colour rule (the tag colour itself is unchanged).
   ───────────────────────────────────────────────────────────────────── */
:root[data-vs-theme="light"] .vs-tag.vs-crit { background: #FEE2E2; color: #B91C1C; border-color: rgba(220,38,38,.30); }
:root[data-vs-theme="light"] .vs-tag.vs-warn { background: #FEF3C7; color: #92400E; border-color: rgba(180,83,9,.30); }
:root[data-vs-theme="light"] .vs-tag.vs-pass { background: #E0F2FE; color: #075985; border-color: rgba(2,132,199,.30); }
:root[data-vs-theme="light"] .vs-tag.vs-info { background: #E0E7FF; color: #4338CA; border-color: rgba(74,61,224,.30); }


/* ─────────────────────────────────────────────────────────────────────
   7. SCAN BAR, FINDINGS TABLE, EVIDENCE-ON-WHITE
   A few surfaces that look like the dark page's "carbon" with a
   hairline border need a touch more contrast on a white page so
   the panel reads as a panel rather than a soft tint.
   ───────────────────────────────────────────────────────────────────── */
:root[data-vs-theme="light"] .vs-scanbar {
  background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(15,23,42,.06), 0 28px 64px -22px rgba(15,23,42,.18);
}
:root[data-vs-theme="light"] .vs-tbl,
:root[data-vs-theme="light"] .vs-pillars,
:root[data-vs-theme="light"] .vs-faq,
:root[data-vs-theme="light"] .vs-plans,
:root[data-vs-theme="light"] .vs-matrix,
:root[data-vs-theme="light"] .vs-seq,
:root[data-vs-theme="light"] .vs-trend,
:root[data-vs-theme="light"] .vs-term {
  background: #FFFFFF;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
:root[data-vs-theme="light"] .vs-console {
  background: linear-gradient(180deg, #FFFFFF, #FAFBFD);
  border-color: var(--vs-hair-2);
}
:root[data-vs-theme="light"] .vs-term {
  background: #0A0A0A;          /* terminal stays dark on the light page —
                                   this is one of the dark "contrast
                                   sections" the brief authorises for
                                   developer audiences. */
  color: #DDE3EF;
}
:root[data-vs-theme="light"] .vs-term .vs-ttl { color: #A8B1C4; }
:root[data-vs-theme="light"] .vs-term-body { color: #DDE3EF; }
:root[data-vs-theme="light"] .vs-term-body .vs-c { color: #FFFFFF; }
:root[data-vs-theme="light"] .vs-term-body .vs-dim { color: #636C7D; }

:root[data-vs-theme="light"] .vs-matrix thead th { background: rgba(26,28,33,.025); }
:root[data-vs-theme="light"] .vs-matrix tbody tr:hover td { background: rgba(26,28,33,.02); }

:root[data-vs-theme="light"] .vs-tbl-head { background: rgba(26,28,33,.02); }
:root[data-vs-theme="light"] .vs-trow:hover { background: rgba(26,28,33,.02); }
:root[data-vs-theme="light"] .vs-trow .vs-desc code { background: rgba(26,28,33,.05); }

:root[data-vs-theme="light"] .vs-pil:hover { background: rgba(26,28,33,.02); }
:root[data-vs-theme="light"] .vs-faq summary:hover { background: rgba(26,28,33,.02); }

:root[data-vs-theme="light"] .vs-tbl-lock {
  background: linear-gradient(180deg, rgba(229,119,8,.08), transparent);
}

:root[data-vs-theme="light"] .vs-closer {
  background:
    linear-gradient(160deg, rgba(74,61,224,.10), transparent 55%),
    #FFFFFF;
}

:root[data-vs-theme="light"] .vs-marq { background: rgba(26,28,33,.018); }

:root[data-vs-theme="light"] .vs-plan.vs-hot { background: linear-gradient(180deg, rgba(229,119,8,.10), transparent 60%); }

:root[data-vs-theme="light"] .vs-pil-meter { background: rgba(26,28,33,.06); }

:root[data-vs-theme="light"] .vs-console-bar { background: rgba(26,28,33,.02); }
:root[data-vs-theme="light"] .vs-term-bar   { background: rgba(221,227,239,.05); }
:root[data-vs-theme="light"] .vs-radar { background: radial-gradient(circle at 50% 50%, rgba(74,61,224,.06), transparent 62%); }
:root[data-vs-theme="light"] .vs-logstream { color: var(--vs-ink-2); }
:root[data-vs-theme="light"] .vs-logstream::after { background: linear-gradient(transparent, #FFFFFF); }

:root[data-vs-theme="light"] ::selection { background: var(--vs-indigo); color: #fff; }


/* ─────────────────────────────────────────────────────────────────────
   8. THEME TOGGLE BUTTON
   The button lives in the page nav (wired in Stage 2) and is a small
   pill with an icon that hints at the destination theme. Sits in
   both palettes without a variant.
   ───────────────────────────────────────────────────────────────────── */
.vs-theme-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--vs-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 9px 14px; border-radius: var(--vs-radius);
  border: 1px solid var(--vs-hair-3);
  background: transparent; color: var(--vs-ink-2);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  text-decoration: none; flex: none;
}
.vs-theme-toggle:hover {
  background: rgba(221,227,239,.06);
  border-color: var(--vs-platinum-2);
  color: var(--vs-ink);
}
:root[data-vs-theme="light"] .vs-theme-toggle:hover {
  background: rgba(26,28,33,.04);
}
.vs-theme-toggle .vs-tt-sun,
.vs-theme-toggle .vs-tt-moon {
  width: 13px; height: 13px; flex: none; display: block;
}
/* Default (dark theme is active): the button advertises the OTHER side,
   so the sun is shown — clicking takes you to the light page. */
.vs-theme-toggle .vs-tt-sun  { display: block; }
.vs-theme-toggle .vs-tt-moon { display: none;  }
:root[data-vs-theme="light"] .vs-theme-toggle .vs-tt-sun  { display: none;  }
:root[data-vs-theme="light"] .vs-theme-toggle .vs-tt-moon { display: block; }

.vs-theme-toggle .vs-tt-sun  { color: #F59E0B; }
.vs-theme-toggle .vs-tt-moon { color: var(--vs-ink-2); }

@media (max-width: 900px) {
  .vs-theme-toggle { padding: 8px 12px; }
}


/* ─────────────────────────────────────────────────────────────────────
   9. RESPONSIVE BACKDROP HIDE
   The mobile media query in Index.razor.css already hides .vs-bg-shimmer
   and .vs-bg-graticule under 900px. Carry the same hide across themes.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root[data-vs-theme="light"] .vs-bg-shimmer,
  :root[data-vs-theme="light"] .vs-bg-graticule { display: none; }
}


/* ─────────────────────────────────────────────────────────────────────
   10. REDUCED MOTION
   Carry the existing dark-mode reduced-motion rule across the light
   theme — animations should still respect the user preference.
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root[data-vs-theme="light"] *, :root[data-vs-theme="light"] *::before, :root[data-vs-theme="light"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}