/* Light mode. The page is built on the named colors in app.css and theme.css,
   so most of it switches by giving those names light values. Loaded last. */
:root[data-theme="light"] {
  color-scheme:light;
  --bg:#f7f4ec; --s2:#ffffff; --s3:#f1ede2;
  --b1:#ece7da; --b2:#d9d1bd; --b3:#bfb59c;
  --card:#ffffff; --card-b:#e2d9c3;
  --text:#1c1a2b; --muted:#585570;
  --gold:#946f12; --gold-bg:rgba(148,111,18,0.09); --gold-border:rgba(148,111,18,0.35);
  --green:#1c7a48; --green-bg:rgba(28,122,72,0.08); --green-border:rgba(28,122,72,0.30);
  --red:#bf3434; --red-bg:rgba(191,52,52,0.07); --red-border:rgba(191,52,52,0.30);
  --blue:#2a62b0; --blue-bg:rgba(42,98,176,0.07); --blue-border:rgba(42,98,176,0.30);
  --teal:#176f6f; --teal-bg:rgba(23,111,111,0.08); --teal-border:rgba(23,111,111,0.30);
  --angA:#1f7a4a; --angA-bg:rgba(31,122,74,0.09); --angA-border:rgba(31,122,74,0.30);
  --angB:#a8427a; --angB-bg:rgba(168,66,122,0.08); --angB-border:rgba(168,66,122,0.30);
}

/* The mode button, in the app's menu and on the sales page. */
.theme-btn { background:none; border:1px solid var(--b2); color:var(--muted); border-radius:20px; cursor:pointer;
  padding:5px 12px; font-size:13px; line-height:1.2; white-space:nowrap; flex-shrink:0; margin-left:8px;
  display:inline-flex; align-items:center; gap:6px; transition:border-color .2s, color .2s; }
.theme-btn:hover { border-color:var(--gold-border); color:var(--gold); }
.theme-btn .theme-icon { font-size:16px; line-height:1; }
@media (max-width:760px){ .nav .theme-btn { flex:0 0 auto !important; min-height:40px; border-radius:8px !important; } .nav .theme-btn .theme-word { display:none; } }

/* Bars and panels that were written with a fixed dark color. */
:root[data-theme="light"] { --s1:#ffffff; }
:root[data-theme="light"] .nav,
:root[data-theme="light"] .sp-nav { background:rgba(255,253,247,0.94); }
:root[data-theme="light"] #flowCard { box-shadow:0 10px 30px rgba(40,30,10,.16); }
:root[data-theme="light"] #salesPage .sp-deep { background:#efe9da; }
:root[data-theme="light"] #salesPage .sp-glow { background:radial-gradient(ellipse at top, rgba(148,111,18,0.12), transparent 62%), var(--bg); }
:root[data-theme="light"] .sp-note,
:root[data-theme="light"] .sp-fit,
:root[data-theme="light"] .sp-price-card,
:root[data-theme="light"] .sp-step { box-shadow:0 10px 28px rgba(40,30,10,0.12); }
:root[data-theme="light"] .wiz-modal-box,
:root[data-theme="light"] .vc-panel { box-shadow:0 20px 50px rgba(40,30,10,.25); }
/* Buttons that are solid gold: white text on the deeper gold. */
:root[data-theme="light"] .btn,
:root[data-theme="light"] .sp-btn,
:root[data-theme="light"] .tp-btn.gold,
:root[data-theme="light"] .pe-auto,
:root[data-theme="light"] .pe-act.primary,
:root[data-theme="light"] #authGate button,
:root[data-theme="light"] .flow-steps li.next .flow-dot { color:#fff; }
:root[data-theme="light"] .nav-menu { box-shadow:0 18px 50px rgba(40,30,10,.22); }
/* On the bright gold buttons inside cards, keep the dark text. */
:root[data-theme="light"] .sp-note .sp-btn,
:root[data-theme="light"] .sp-step .sp-btn,
:root[data-theme="light"] .sp-price-card .sp-btn,
:root[data-theme="light"] .sp-fit .sp-btn { color:#0a0a12; }
:root[data-theme="light"] .fd-violet { --fd:#6a56b8; --fdb:rgba(106,86,184,.32); --fdbg:rgba(106,86,184,.08); }
:root[data-theme="light"] .fd-go:hover { color:#fff; }

/* Sales page sections written with a fixed dark background. */
:root[data-theme="light"] #salesPage .sp-alt { background:#f0ebdd; }
:root[data-theme="light"] #salesPage .sp-warm { background:linear-gradient(180deg, rgba(148,111,18,0.12), rgba(148,111,18,0.03)), #f3ecd9; }
:root[data-theme="light"] .sp-urgent { background-color:#f6ecc9; background-image:linear-gradient(90deg, rgba(148,111,18,0.16), rgba(148,111,18,0.04)); }
:root[data-theme="light"] .sp-demo { box-shadow:0 20px 50px rgba(40,30,10,.25); }
/* The report mock-up is a dark panel on purpose, so inside it the dark colors stay. */
:root[data-theme="light"] .sp-report {
  --b1:#1e1e35; --b2:#252540; --b3:#303055; --s2:#111120; --s3:#16162a;
  --text:#e8e8f0; --muted:#b0b0c8;
  --gold:#c9a84c; --gold-bg:rgba(201,168,76,0.08); --gold-border:rgba(201,168,76,0.25);
  --green:#4caf78; --green-bg:rgba(76,175,120,0.08); --green-border:rgba(76,175,120,0.25);
  --red:#e05c5c; --red-bg:rgba(224,92,92,0.08); --red-border:rgba(224,92,92,0.25);
  --blue:#5c9ae0; --blue-bg:rgba(92,154,224,0.08); --blue-border:rgba(92,154,224,0.25);
  --teal:#4cb8b8; --teal-bg:rgba(76,184,184,0.08); --teal-border:rgba(76,184,184,0.25);
  color:var(--text);
}
@media (max-width:760px){
  /* On a phone the comparison table turns into dark cards. */
  :root[data-theme="light"] .sp-table tr {
    --b1:#1e1e35; --b2:#252540; --b3:#303055;
    --text:#e8e8f0; --muted:#b0b0c8;
    --gold:#c9a84c; --gold-bg:rgba(201,168,76,0.08); --gold-border:rgba(201,168,76,0.25);
  }
}

:root[data-theme="light"] .tone-gold   { background:rgba(148,111,18,.14);  color:#8a6610; }
:root[data-theme="light"] .tone-teal   { background:rgba(23,111,111,.14);  color:#176f6f; }
:root[data-theme="light"] .tone-violet { background:rgba(106,86,184,.14);  color:#5a48a6; }
:root[data-theme="light"] .tone-green  { background:rgba(28,122,72,.14);   color:#1c7a48; }
:root[data-theme="light"] .tone-blue   { background:rgba(42,98,176,.14);   color:#2a62b0; }
:root[data-theme="light"] .tone-rose   { background:rgba(180,52,110,.14);  color:#a8346a; }
:root[data-theme="light"] .tone-orange { background:rgba(190,100,30,.14);  color:#b0601a; }