/* ==========================================================================
   Light mode. The server puts data-theme="light" on <html> for customers who
   chose it (and /static/js/theme.js switches "match my phone" before paint).
   Tokens first, then the handful of colours that were written for dark.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f6fa;
  --bg-2: #eceef4;
  --surface: #ffffff;
  --surface-2: #f6f7fb;
  --surface-3: #eceef4;
  --border: #e2e5ed;
  --border-2: #d2d7e2;
  --text: #12141b;
  --text-2: #464c60;
  --muted: #6c7389;

  --accent: #6552ec;
  --accent-2: #a24ee0;
  --accent-soft: rgba(101, 82, 236, .10);
  --accent-ring: rgba(101, 82, 236, .38);

  --sales: #a86a00;
  --sales-soft: rgba(214, 150, 20, .14);
  --good: #0f8a58;
  --good-soft: rgba(15, 138, 88, .10);
  --warn: #a86a00;
  --bad: #d23b3b;
  --bad-soft: rgba(210, 59, 59, .09);

  --viz-1: #2f6fd0;
  --viz-under: #c4501e;
  --viz-grid: #e2e5ed;
  --viz-axis: #6c7389;
  --tiktok: #0a9a96;

  --shadow: 0 1px 2px rgba(16, 20, 40, .05), 0 10px 28px -14px rgba(16, 20, 40, .18);
  --tabbar-bg: rgba(255, 255, 255, .92);
}

/* Glass bars and overlays */
[data-theme="light"] .topbar { background: rgba(245, 246, 250, .82); }
[data-theme="light"] .loading-overlay { background: rgba(245, 246, 250, .8); }
[data-theme="light"] .scrim { background: rgba(18, 20, 27, .35); }
[data-theme="light"] .brand-logo { filter: drop-shadow(0 4px 10px rgba(101, 82, 236, .18)); }

/* Accent-coloured text (pale lavender on dark → deep violet) */
[data-theme="light"] .link, [data-theme="light"] .ob-count, [data-theme="light"] .next-step .go,
[data-theme="light"] .pay-linkbtn, [data-theme="light"] .pay-guide > summary, [data-theme="light"] .pay-alt > summary,
[data-theme="light"] .insight .ico, [data-theme="light"] .feature .ico, [data-theme="light"] .auth-art .points .ti,
[data-theme="light"] .choice .box .ti, [data-theme="light"] .audience-read .ti, [data-theme="light"] .pay-note .ti,
[data-theme="light"] .pill.ai, [data-theme="light"] .next-step .num, [data-theme="light"] .flash.info,
[data-theme="light"] .btn.on, [data-theme="light"] .chip-opt input:checked + span,
[data-theme="light"] .mode-switch button.on.growth, [data-theme="light"] .mode-switch button.on.combined { color: #4a39cf; }

/* Sales / gold text */
[data-theme="light"] .mode-switch button.on.sales, [data-theme="light"] .pill.sales, [data-theme="light"] .stage-track div.on b,
[data-theme="light"] .choice.sales .box .ti, [data-theme="light"] .revenue-stat .stat-value { color: #8a5600; }

/* Good / bad text */
[data-theme="light"] .flash.success, [data-theme="light"] .pill.good, [data-theme="light"] .pay-result.good { color: #0b6d45; }
[data-theme="light"] .flash.error, [data-theme="light"] .btn-danger, [data-theme="light"] .pill.err, [data-theme="light"] .pay-err,
[data-theme="light"] .pay-result.bad, [data-theme="light"] .insight.warning .ico, [data-theme="light"] .why-sheet [data-why="bad"] { color: #b42828; }
[data-theme="light"] .pill.top { color: #b3461a; }
[data-theme="light"] .lift-row .val.up { color: #2358b8; }
[data-theme="light"] .lift-row .val.down { color: #b3461a; }

/* Hover states that went to white */
[data-theme="light"] .post-row:hover .title, [data-theme="light"] .idea-toggle > summary:hover h3 { color: var(--text); }
[data-theme="light"] .btn:hover, [data-theme="light"] .choice:hover .box, [data-theme="light"] .chip-opt:hover span, [data-theme="light"] .pay-item:hover { border-color: var(--border-2); }
[data-theme="light"] .btn-filmed:hover, [data-theme="light"] .btn-posted:hover { color: #fff; }

/* Idea purposes: deeper colours, white step numbers */
[data-theme="light"] .purpose-views { --p: #4058d4; --p-soft: rgba(64, 88, 212, .09); --p-ring: rgba(64, 88, 212, .32); }
[data-theme="light"] .purpose-engagement { --p: #c0357f; --p-soft: rgba(192, 53, 127, .08); --p-ring: rgba(192, 53, 127, .3); }
[data-theme="light"] .purpose-sales { --p: #a86a00; --p-soft: rgba(214, 150, 20, .11); --p-ring: rgba(168, 106, 0, .32); }
[data-theme="light"] .idea .step-num { color: #fff; }

/* Menus and popovers that were painted dark */
[data-theme="light"] .toast-host .flash { box-shadow: 0 16px 40px -14px rgba(16, 20, 40, .28); }

/* Soft glows read as dirt on white: tone them down */
[data-theme="light"] body.onboard { background: radial-gradient(1200px 600px at 20% -10%, rgba(101, 82, 236, .10), transparent 60%), var(--bg); }
[data-theme="light"] .auth-art { background: radial-gradient(1200px 600px at 10% -10%, rgba(101, 82, 236, .14), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(255, 122, 182, .10), transparent 60%), var(--bg-2); }
[data-theme="light"] .tooltip { background: #fff; color: var(--text); box-shadow: 0 10px 30px -12px rgba(16, 20, 40, .3); }
[data-theme="light"] .sheet-scrim { background: rgba(18, 20, 27, .3); }
[data-theme="light"] .more-sheet { box-shadow: 0 -16px 40px -18px rgba(16, 20, 40, .25); }