/* ============================================================
   duallo.ai · Light theme (preview)
   Activated by <html data-theme="light">. Dark stays the default.
   Product visuals (app mock-ups, photo heroes, the 3D viewer) stay
   dark on purpose: a light page with dark product shots.
   ============================================================ */

html[data-theme="light"] {
  --duallo-brand-bright: #038A8D;   /* readable teal on white      */
  --duallo-brand-soft:   #027A7C;

  --bg-app:             #F5F7F8;
  --bg-surface:         #FFFFFF;
  --bg-surface-2:       #F0F3F4;
  --bg-surface-3:       #E7ECEE;
  --bg-elev:            #FFFFFF;
  --bg-elev-hover:      #F2F6F7;
  --bg-row:             #FFFFFF;
  --bg-row-hover:       #F2F6F7;
  --bg-card-light:      #FFFFFF;

  --fg-1:               #12202A;
  --fg-2:               #4B5B64;
  --fg-3:               #7D8C94;
  --fg-disabled:        rgba(18,32,42,0.35);

  --line-soft:          rgba(18,32,42,0.09);
  --line-strong:        rgba(18,32,42,0.18);
  --scrollbar-track:    #F0F3F4;
  --scrollbar-thumb:    #C3CDD2;

  --shadow-card:        0 8px 24px rgba(18,32,42,0.08);
  --shadow-card-soft:   0 2px 8px rgba(18,32,42,0.06);
  --shadow-card-hover:  0 14px 30px rgba(18,32,42,0.12);

  --grad-title:         linear-gradient(90deg, #049598, #027A7C);
}

/* ---- Keep product visuals and photo areas dark ------------- */
html[data-theme="light"] :is(
  .hero:has(.hero-photo-bg),
  .closer-photo,
  .hero-annot,
  .hero-demo,
  .sc-window,
  .pstep-thumb,
  .wbeat-visual,
  .modelviewer,
  .pv-finding-frame
) {
  --duallo-brand-bright: #4FE0E8;
  --duallo-brand-soft:   #13A3B2;
  --bg-app:       #1A1F24;
  --bg-surface:   #1D2B33;
  --bg-surface-2: #1C272C;
  --bg-surface-3: #25333A;
  --bg-row:       #1F2D38;
  --bg-elev:      #2B3B43;
  --bg-elev-hover:#34454D;
  --fg-1: #FFFFFF;
  --fg-2: #B0BEC5;
  --fg-3: #6B7A82;
  --line-soft:   rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --shadow-card: 0 6px 18px rgba(0,0,0,0.40);
  --grad-title:  linear-gradient(90deg, #4FE0E8, #13A3B2, #049598);
  color: var(--fg-1);
}
html[data-theme="light"] .hero:has(.hero-photo-bg) { background: #1A1F24; }
html[data-theme="light"] .pstep-thumb { background: #1D2B33; }

/* ---- Base ---------------------------------------------------- */
html[data-theme="light"] body {
  background:
    radial-gradient(ellipse 60% 50% at 70% -10%, rgba(4,149,152,0.07), transparent 60%),
    var(--bg-app);
}
html[data-theme="light"] a:hover { color: var(--fg-1); }
html[data-theme="light"] .hero::before { opacity: 0.6; }

/* Nav + footer */
html[data-theme="light"] .site-nav { background: rgba(255,255,255,0.92); }
html[data-theme="light"] .site-brand img { filter: none; }

/* Footer: deep navy base that closes the page */
html[data-theme="light"] .site-footer {
  background: #0C1A2B; border-top: 0;
  --fg-1: #FFFFFF; --fg-2: rgba(255,255,255,0.72); --fg-3: rgba(255,255,255,0.56);
  --line-soft: rgba(255,255,255,0.12);
}
html[data-theme="light"] .site-footer-brand img { filter: brightness(0) invert(1); }
html[data-theme="light"] .site-footer h5 { color: rgba(255,255,255,0.56); }
html[data-theme="light"] .site-footer a { color: rgba(255,255,255,0.86); }
html[data-theme="light"] .site-footer a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

/* Cards get a hairline + soft shadow instead of tone steps */
html[data-theme="light"] :is(.card, .persona, .faq-item, .sec-item, .compare-col, .form-inline, .cta-banner, .closer-split, .closer-ask, .anatomy-card) {
  box-shadow: var(--shadow-card-soft);
}
html[data-theme="light"] .band { background: #EEF2F3; }
html[data-theme="light"] .band :is(.card, .persona, .faq-item, .sec-item, .compare-col:not(.is-after)) { background: #FFFFFF; }
html[data-theme="light"] .compare-col.is-after,
html[data-theme="light"] .persona.persona-lead { background: rgba(4,149,152,0.06); border-color: rgba(4,149,152,0.35); }
html[data-theme="light"] .trustbar { background: #FFFFFF; }

/* Small bits with hard-coded dark values */
html[data-theme="light"] .sev-low { background: rgba(18,32,42,0.06); }
html[data-theme="light"] .persona-jump { background: rgba(255,255,255,0.92) !important; }
html[data-theme="light"] .wwg-without { background: rgba(18,32,42,0.02); }
html[data-theme="light"] .wwg-note { background: #FFFFFF; box-shadow: 0 2px 6px rgba(18,32,42,0.10); }
html[data-theme="light"] .wwg-bar { background: rgba(18,32,42,0.12); }
html[data-theme="light"] .walk-pad { background: radial-gradient(120% 120% at 50% 0%, #202c33, #161c21); }