/* ═══════════════════════════════════════════════════════════════
   ReplyMate — Shared Theme System
   Include: <link rel="stylesheet" href="theme.css">
   Light = html.light class | Dark = default
   ═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
html.light {
  --bg:#f0f4f8; --s1:#ffffff; --s2:#e8edf5;
  --card:#ffffff; --card2:#f5f8fb;
  --border:rgba(0,0,0,.09); --b2:rgba(0,0,0,.14); --b3:rgba(0,0,0,.04);
  --white:#1a2436; --muted:#5a6a80; --dim:#8a9ab0;
  --gd:rgba(37,211,102,.08); --gg:rgba(37,211,102,.22);
}
html.light body                       { background:var(--bg)!important; color:var(--white)!important; }

/* ── Nav ── */
html.light nav, html.light #nav       { background:rgba(255,255,255,.96)!important; border-bottom-color:var(--border)!important; box-shadow:0 1px 12px rgba(0,0,0,.07)!important; }
html.light .nl a                      { color:var(--muted)!important; }
html.light .nl a:hover                { color:var(--white)!important; }
html.light .bo                        { border-color:rgba(0,0,0,.18)!important; color:var(--white)!important; }
html.light .bo:hover                  { background:rgba(0,0,0,.04)!important; }

/* ── Layout sections ── */
html.light section                    { background:var(--bg)!important; }
html.light footer                     { background:var(--s1)!important; border-top-color:var(--border)!important; }
html.light .sb                        { background:var(--s1)!important; border-color:var(--border)!important; }
html.light .lstrip                    { background:rgba(37,211,102,.06)!important; border-color:rgba(37,211,102,.15)!important; }

/* ── Cards ── */
html.light .card,.plan,.kk,.pc,.hs,.ac,.cw,.pdemo,
html.light .plan, html.light .kk, html.light .pc,
html.light .hs, html.light .ac, html.light .cw, html.light .pdemo { background:var(--s1)!important; border-color:var(--border)!important; }
html.light .hs:hover                  { background:rgba(37,211,102,.04)!important; }
html.light .plan.best                 { border-color:var(--green)!important; background:rgba(37,211,102,.04)!important; }
html.light .kk.top                    { border-color:var(--gg)!important; background:rgba(37,211,102,.03)!important; }
html.light .hgrid2, html.light .kg, html.light .pg { background:var(--border)!important; }

/* ── Stat strip ── */
html.light .ss+.ss                    { border-left-color:var(--border)!important; }

/* ── Tables ── */
html.light th                         { background:var(--s2)!important; border-bottom-color:var(--border)!important; color:var(--muted)!important; }
html.light td                         { border-bottom-color:var(--border)!important; }
html.light tr.hl td                   { background:rgba(37,211,102,.03)!important; }

/* ── Inputs ── */
html.light .inp, html.light .sel,
html.light input, html.light textarea,
html.light select                     { background:var(--s2)!important; border-color:var(--border)!important; color:var(--white)!important; }
html.light .inp:focus                 { border-color:var(--gg)!important; }

/* ── Chat bubbles ── */
html.light .msg.in, html.light .cp-in { background:var(--s2)!important; }
html.light .msg.out,.cp-out           { background:#005c4b!important; color:#fff!important; }
html.light .msg.ai, html.light .cp-ai { background:rgba(37,211,102,.08)!important; border-color:var(--gg)!important; }

/* ── Dashboard sidebar ── */
html.light .sidebar                   { background:var(--s1)!important; border-right-color:var(--border)!important; }
html.light .topbar                    { background:var(--s1)!important; border-bottom-color:var(--border)!important; }
html.light .stat                      { background:var(--s1)!important; border-color:var(--border)!important; }
html.light .nav-item                  { color:var(--muted)!important; }
html.light .nav-item:hover            { background:rgba(0,0,0,.04)!important; color:var(--white)!important; }
html.light .nav-item.active           { background:var(--gd)!important; color:var(--green)!important; }
html.light .content                   { background:var(--bg)!important; }

/* ── Buttons secondary ── */
html.light .btn-s, html.light .co,
html.light .tb-btn.sec                { background:var(--s2)!important; color:var(--white)!important; border-color:var(--border)!important; }
html.light .cf                        { background:var(--s2)!important; color:var(--muted)!important; border-color:var(--border)!important; }

/* ── Pricing toggle ── */
html.light .tog                       { background:var(--s2)!important; border-color:var(--border)!important; }
html.light .tog.on                    { background:var(--green)!important; }

/* ── Tags ── */
html.light .tag.dim                   { background:var(--s2)!important; color:var(--muted)!important; }

/* ── Alerts ── */
html.light .alert.green               { background:rgba(37,211,102,.07)!important; }
html.light .alert.gold                { background:rgba(255,200,64,.07)!important; }
html.light .alert.coral               { background:rgba(255,111,91,.07)!important; }

/* ── Modal ── */
html.light .modal                     { background:var(--s1)!important; border-color:var(--b2)!important; }
html.light .modal-bg                  { background:rgba(0,0,0,.4)!important; }
html.light .prog-bar                  { background:var(--s2)!important; }

/* ── CTA / agency blocks ── */
html.light .cb                        { background:linear-gradient(135deg,rgba(37,211,102,.08),rgba(37,211,102,.03))!important; border-color:var(--gg)!important; }
html.light .ac.pr                     { background:rgba(37,211,102,.05)!important; border-color:var(--gg)!important; }

/* ── Setup / onboarding ── */
html.light .step                      { background:var(--s1)!important; border-color:var(--border)!important; }
html.light .step.done                 { background:rgba(37,211,102,.04)!important; border-color:var(--gg)!important; }
html.light .detail                    { background:var(--s2)!important; }

/* ── Comparison table cross marks — invisible in light without fix ── */
html.light .cx                        { color:rgba(0,0,0,.25)!important; }
html.light .cp                        { color:#b8860b!important; }
html.light .rmc                       { color:var(--green)!important; }

/* ── Hero glow — soften in light mode ── */
html.light .hglow                     { background:radial-gradient(circle,rgba(37,211,102,.04) 0%,transparent 65%)!important; }
html.light .hgrid                     { background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px)!important; }

/* ── Login box — visible card in light ── */
html.light .box                       { background:var(--s1)!important; border-color:var(--border)!important; box-shadow:0 4px 24px rgba(0,0,0,.06)!important; }

/* ── Scrollbar ── */
html.light ::-webkit-scrollbar-thumb { background:rgba(37,211,102,.35); }

/* ═══════════════════════════════════════════════════════════════
   Theme toggle button — injected by theme.js into every nav
   ═══════════════════════════════════════════════════════════════ */
#theme-btn {
  width:34px; height:34px; border-radius:8px;
  border:1px solid var(--border);
  background:transparent; color:var(--muted);
  font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; flex-shrink:0; margin-left:4px; padding:0; line-height:1;
  font-family:inherit;
}
#theme-btn:hover {
  background:rgba(37,211,102,.1);
  color:var(--green);
  border-color:var(--gg);
}