/* Light theme — token overrides only. The dark theme lives on :root and is
   untouched, so it stays byte-identical to the approved design. */
[data-theme="light"]{
--bg-page:#F6F8FB;
--surface-card:#FFFFFF;
--surface-2:#F1F4F8;
--surface-hover:#E8EDF4;

--text-primary:#111827;
--text-secondary:#5F6875;
--text-muted:#7B8490;

--border:rgba(17,24,39,0.12);
--border-hairline:rgba(17,24,39,0.10);
--card-stroke:inset 0 0 0 1px rgba(17,24,39,0.12),0 1px 2px rgba(17,24,39,0.05),0 8px 20px rgba(17,24,39,0.04);
--stroke-hairline:inset 0 0 0 1px rgba(17,24,39,0.12),0 1px 2px rgba(17,24,39,0.05),0 8px 20px rgba(17,24,39,0.04);
--shadow:0 8px 20px rgba(17,24,39,0.06);

/* step-number badge reads on white */
--alpha-white-10:rgba(17,24,39,0.06);

/* tier badge inverts so it stays visible on a white card */
--badge-bg:#111827;
--badge-fg:#FFFFFF;

/* glass keeps its glass: translucent light surface, blur, neutral hairline, soft highlight */
--alpha-surface-20:rgba(255,255,255,0.55);
--glass-fill:rgba(255,255,255,0.55);
--glass-border:inset 0 0 0 1px rgba(17,24,39,0.10); /* @kind shadow */
--glass-sheen:inset 0 1px 0 0 rgba(255,255,255,0.9); /* @kind shadow */

/* floating header glass, light */
--header-fill:rgba(255,255,255,0.65);
--header-fill-top:rgba(255,255,255,0.45);
--header-border:inset 0 0 0 1px rgba(17,24,39,0.10); /* @kind shadow */
--header-sheen:inset 0 1px 0 0 rgba(255,255,255,0.85); /* @kind shadow */
--header-shadow:0 6px 24px rgba(17,24,39,0.10);

/* the electric blue is unchanged; the mocked-up UI panels stay dark on purpose */
}

/* secondary band uses the secondary surface rather than card white */
[data-theme="light"] .st-why{background:var(--surface-2)!important}

/* the hero sits on a dark photograph in both themes, so its copy stays white.
   Not design tokens — a local re-scope of two of them for one subtree. */
[data-theme="light"] .st-hero-body{color:#FFFFFF}
[data-theme="light"] .st-hero-body h1,[data-theme="light"] .st-hero-body p,[data-theme="light"] .st-hero-body .nai-gallery-cap{color:#FFFFFF!important}

/* the supplied moon SVG is stroked white; on the white toggle it is rendered as
   graphite so the original shape stays exactly as drawn, no redraw involved */
[data-theme="light"] .st-moon{filter:brightness(0) opacity(.92)}

/* white circular toggle needs a hairline to separate from the white header bar */
[data-theme="light"] .nai-iconbtn{box-shadow:inset 0 0 0 1px var(--border)!important}

/* monochrome white social marks become graphite */
[data-theme="light"] .st-footer footer img{filter:brightness(0) opacity(.86)}

/* Decorative rings: same bitmap, same position and scale. The source PNG carries an
   opaque black field, so on a light page it is inverted+hue-rotated back to blue and
   multiplied, which drops the black and keeps the ring. Softer presence than dark. */
[data-theme="light"] .st-glow{filter:invert(1) hue-rotate(180deg) saturate(1.35) blur(2px)!important;mix-blend-mode:multiply;opacity:.5}

/* FAQ hover surface */
[data-theme="light"] .nai-faq:hover{background:var(--surface-hover)}

/* smooth, one-off cross-fade while the theme flips */
html.theme-switching *{transition:background-color 260ms ease,color 260ms ease,box-shadow 260ms ease,opacity 260ms ease,filter 260ms ease!important}