/* Light theme for the standalone OS pages (get-started, signup, onboard, marketplace,
   books, health, status, dashboard, invoice, book, voice-calls, studio-tour).
   Those pages define their tokens inline with a dark default; this sheet overrides the
   same token names under [data-theme="light"] with the Gold Thread paper values, so a page
   needs no per-page light rules. Colour comes only from the variables.
   Two vocabularies exist: the navy family (--navy-deep/--navy/--card/--ivory) and the
   short family on signup and dashboard (--bg/--panel/--txt). Both are covered. */
:root { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --navy-deep: #fdfcf4; --navy: #f5f2e9; --card: #ffffff;
  --ivory: #1a1614; --muted: #6b6459;
  --line: rgba(94, 84, 72, .16); --line-strong: rgba(94, 84, 72, .30);
  --gold: #9a7134; --gold-soft: #7d5a26;
  --green: #4f6f48; --amber: #8a6a2a; --red: #8e030f;
  --bg: #fdfcf4; --panel: #ffffff; --txt: #1a1614;
}
/* Every page paints a navy radial glow on body with literal hex; replace it, do not tint it. */
:root[data-theme="light"] body { background: #fdfcf4; color: #1a1614; }
/* Gold fills keep dark ink on dark canvases; on paper the gold is darker, so the ink flips. */
:root[data-theme="light"] .btn, :root[data-theme="light"] .btn-gold, :root[data-theme="light"] button.primary,
:root[data-theme="light"] .cta { color: #fdfcf4; }
:root[data-theme="light"] ::selection { background: rgba(154, 113, 52, .22); }
/* The floating toggle that feertheme.js adds when the script tag carries data-toggle. */
.feertheme-btn {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card, #151e33); color: var(--gold-soft, #d8b375);
  border: 1px solid var(--line, rgba(233, 227, 215, .16));
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.feertheme-btn:hover { border-color: var(--gold, #b68b53); }
.feertheme-btn:focus-visible { outline: 2px solid var(--gold, #b68b53); outline-offset: 2px; }
@media print { .feertheme-btn { display: none; } }

/* The pages also paint a handful of surfaces with literal dark values rather than tokens
   (a translucent navy top bar, near-black inputs, hover tints). These generic selectors
   cover every occurrence found across the twelve pages; they reference tokens so a page
   that later moves to tokens needs nothing removed here. */
:root[data-theme="light"] .topbar, :root[data-theme="light"] .controls, :root[data-theme="light"] header.top,
:root[data-theme="light"] .search { background: rgba(253, 252, 244, .86); border-color: var(--line); }
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea,
:root[data-theme="light"] .fld, :root[data-theme="light"] .search input {
  background: #ffffff; color: var(--ivory); border-color: var(--line-strong);
}
:root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: rgba(26, 22, 20, .42); }
:root[data-theme="light"] input:focus, :root[data-theme="light"] select:focus, :root[data-theme="light"] textarea:focus,
:root[data-theme="light"] .fld:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(154, 113, 52, .16); }
:root[data-theme="light"] input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: #1a1614; }
:root[data-theme="light"] button.ghost, :root[data-theme="light"] .btn.ghost, :root[data-theme="light"] .copybtn,
:root[data-theme="light"] .refresh, :root[data-theme="light"] .search .clr, :root[data-theme="light"] .iconbtn {
  background: #ffffff; color: var(--ivory); border-color: var(--line-strong);
}
:root[data-theme="light"] button.ghost:hover, :root[data-theme="light"] .copybtn:hover, :root[data-theme="light"] .iconbtn:hover { background: var(--navy); }
:root[data-theme="light"] .chip, :root[data-theme="light"] .pill, :root[data-theme="light"] .badge.src, :root[data-theme="light"] .kv,
:root[data-theme="light"] .pack, :root[data-theme="light"] .kpi, :root[data-theme="light"] .log, :root[data-theme="light"] .skel {
  background: var(--navy); border-color: var(--line);
}
:root[data-theme="light"] th { background: var(--navy); }
:root[data-theme="light"] tbody tr:nth-child(even) { background: rgba(94, 84, 72, .04); }
:root[data-theme="light"] tbody tr:hover, :root[data-theme="light"] .clientrow:hover { background: rgba(154, 113, 52, .07); }
:root[data-theme="light"] .card:hover, :root[data-theme="light"] .pack:hover, :root[data-theme="light"] .hero,
:root[data-theme="light"] .toast { box-shadow: 0 8px 24px rgba(94, 84, 72, .12); }
:root[data-theme="light"] .toast { background: #ffffff; color: var(--ivory); }
:root[data-theme="light"] ul.pts li, :root[data-theme="light"] .desc, :root[data-theme="light"] .sub, :root[data-theme="light"] .muted { color: var(--muted); }
:root[data-theme="light"] .spin, :root[data-theme="light"] .spin.d { border-color: var(--line-strong); border-top-color: var(--gold); }