/* V3 white-green surface, matched to voice3 Studio whitegreen01.
   The reference studio.css/app.css/flow.css were verified against the live files.
   Keep this palette separate so V2 and the V3 workflow implementation stay intact. */
body.theme-light {
  color-scheme: light;
  --bg: #F7FCF8;
  --bg-grain: #EFF8F2;
  --panel: #FFFFFF;
  --panel-hi: #EAF7EE;
  --panel-in: #F7FCF8;
  --line: rgba(15, 32, 51, 0.12);
  --line-hi: rgba(15, 32, 51, 0.22);
  --text: #0F2033;
  --text-soft: #2F4F3B;
  --muted: #5C7165;
  --dim: #789083;
  --brand-navy: #0F2033;
  --brand-cream: #EFE7DA;
  --brand-600: #017741;
  --brand-500: #01A040;
  --brand-400: #35D073;
  --signal: #01A040;
  --signal-text: #007A37;
  --signal-lo: rgba(1, 160, 64, 0.10);
  --signal-mid: rgba(1, 160, 64, 0.34);
  --on-signal: #FFFFFF;
  --ok: #087F44;
}
body.theme-light::before {
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(1, 160, 64, 0.10), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(1, 119, 65, 0.07), transparent 62%);
}
body.theme-light::after { opacity: 0.12; }
body.theme-light .topbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(1, 119, 65, 0.18);
}
.brand-lockup {
  width: 140px;
  height: 48px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
  object-position: left center;
  background: #FFFFFF;
  border: 1px solid rgba(1, 119, 65, 0.18);
  border-radius: 10px;
  padding: 2px 4px;
}
body.theme-light .brand { min-height: 48px; }
body.theme-light .brand-name { display: block; color: var(--text); }
body.theme-light .brand-sub { display: block; margin-top: 1px; }
body.theme-light .ghost-link:hover,
body.theme-light .nav-item:hover { background: rgba(1, 119, 65, 0.08); }
body.theme-light ::-webkit-scrollbar-thumb { background: rgba(15, 32, 51, 0.16); }
body.theme-light ::-webkit-scrollbar-thumb:hover {
  background: rgba(1, 119, 65, 0.32);
  background-clip: content-box;
}

/* The old amber theme used dark text on a bright fill. The live green uses white. */
body.theme-light .go:not(:disabled),
body.theme-light .rec-btn.is-rec,
body.theme-light .step-tag.done,
body.theme-light .fstep.is-done .fnum,
body.theme-light .cvoice b { color: var(--on-signal); }
body.theme-light .go:not(:disabled) { box-shadow: 0 2px 14px rgba(1, 160, 64, 0.24); }
body.theme-light .go:hover:not(:disabled) { box-shadow: 0 4px 22px rgba(1, 160, 64, 0.34); }
body.theme-light .rec-btn:hover:not(:disabled) {
  background: rgba(1, 160, 64, 0.2);
  box-shadow: 0 0 0 6px rgba(1, 160, 64, 0.07);
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--signal-mid); }
  70% { box-shadow: 0 0 0 7px rgba(1, 160, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(1, 160, 64, 0); }
}
@keyframes recPulse {
  0% { box-shadow: 0 0 0 0 rgba(1, 160, 64, 0.4); }
  70% { box-shadow: 0 0 0 18px rgba(1, 160, 64, 0); }
  100% { box-shadow: 0 0 0 0 rgba(1, 160, 64, 0); }
}

/* Match the reference's darker green text separately from button fills. */
body.theme-light .voice.is-on .voice-name,
body.theme-light .picked-mark,
body.theme-light .rec-btn,
body.theme-light .sample-dur,
body.theme-light .acct.is-user,
body.theme-light .banner b,
body.theme-light .banner-btn,
body.theme-light .vbadge-clone,
body.theme-light .blank-art,
body.theme-light .mode.is-on .mode-ic,
body.theme-light .seg-b.is-on,
body.theme-light .recipe code,
body.theme-light .empty a,
body.theme-light .vtag:not(.vtag-off),
body.theme-light .sub-swatch.is-on i,
body.theme-light .drop-bulk-ic,
body.theme-light .ccap b,
body.theme-light .subtitle-size-heading output,
body.theme-light .subtitle-batch-note { color: var(--signal-text); }
body.theme-light .picked-none .picked-mark { color: var(--dim); }
body.theme-light .rec-btn.is-rec { color: var(--on-signal); }
body.theme-light .subtitle-size.is-unavailable .subtitle-size-heading output { color: var(--muted); }
body.theme-light .studio-bottom-nav,
body.theme-light .mobile-action-dock { background: rgba(255, 255, 255, 0.94); }
body.theme-light .studio-bottom-nav > .is-on,
body.theme-light .studio-bottom-nav > [aria-current="page"],
body.theme-light .studio-bottom-nav > [aria-expanded="true"],
body.theme-light .studio-more-menu .nav-item.is-on {
  color: var(--signal-text);
  background: var(--signal-lo);
}

@media (max-width: 620px) {
  body.theme-light .brand { gap: 5px; }
  .brand-lockup { width: 84px; height: 40px; padding: 2px; border-radius: 8px; }
  body.theme-light .topbar .brand-name { font-size: 12px; }
  body.theme-light .topbar .brand-sub { display: none; }
  body.theme-light .topbar .status { max-width: 68px; }
}