/* CVChingón — Theme variables: dark (default) + light */

/* ===== DARK MODE (default) ===== */
:root,
[data-theme="dark"] {
  --g1: #00ff87;
  --g2: #00d4ff;
  --g3: #7c3aed;
  --g4: #ff006e;
  --bg: #050508;
  --bg2: #0d0d18;
  --bg3: #0f0f1e;
  --card: #0f0f1e;
  --card2: #14141f;
  --text: #f0f0ff;
  --muted: #8888aa;
  --border: rgba(255,255,255,.1);
  --border2: rgba(255,255,255,.06);
  --grad: linear-gradient(135deg, #00ff87, #00d4ff);
  --grad2: linear-gradient(135deg, #7c3aed, #ff006e);
  --nav-bg: rgba(5,5,8,.85);
  --input-bg: #0f0f1e;
  --shadow: 0 8px 40px rgba(0,0,0,.6);
  --blob1: rgba(0,255,135,.12);
  --blob2: rgba(124,58,237,.15);
  --blob3: rgba(0,212,255,.1);
  --noise-opacity: .4;
  --mockup-line: rgba(255,255,255,.07);
  --mockup-title: rgba(255,255,255,.12);
  --comp-row-hover: rgba(255,255,255,.02);
}

/* ===== LIGHT MODE ===== */
[data-theme="light"] {
  --g1: #00a855;
  --g2: #0099cc;
  --g3: #6d28d9;
  --g4: #db2777;
  --bg: #f5f7fa;
  --bg2: #eef0f5;
  --bg3: #ffffff;
  --card: #ffffff;
  --card2: #f0f2f7;
  --text: #0f0f1a;
  --muted: #5a5a7a;
  --border: rgba(0,0,0,.1);
  --border2: rgba(0,0,0,.07);
  --grad: linear-gradient(135deg, #00a855, #0099cc);
  --grad2: linear-gradient(135deg, #6d28d9, #db2777);
  --nav-bg: rgba(245,247,250,.92);
  --input-bg: #ffffff;
  --shadow: 0 8px 40px rgba(0,0,0,.12);
  --blob1: rgba(0,168,85,.1);
  --blob2: rgba(109,40,217,.08);
  --blob3: rgba(0,153,204,.07);
  --noise-opacity: .15;
  --mockup-line: rgba(0,0,0,.06);
  --mockup-title: rgba(0,0,0,.1);
  --comp-row-hover: rgba(0,0,0,.02);
}

/* ===== TOGGLE BUTTON ===== */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: var(--muted);
  transition: all .2s;
  white-space: nowrap;
}
.theme-toggle:hover {
  border-color: var(--g1);
  color: var(--text);
}

/* ===== LIGHT MODE OVERRIDES for index.html ===== */
[data-theme="light"] body::before { opacity: var(--noise-opacity); }
[data-theme="light"] nav { background: var(--nav-bg); }
[data-theme="light"] .hero { background: var(--bg); }
[data-theme="light"] .hero .blob:nth-child(1) { background: var(--blob1); }
[data-theme="light"] .hero .blob:nth-child(2) { background: var(--blob2); }
[data-theme="light"] .hero .blob:nth-child(3) { background: var(--blob3); }
[data-theme="light"] .hero-badge {
  background: rgba(0,168,85,.08);
  border-color: rgba(0,168,85,.2);
}
[data-theme="light"] .btn-secondary {
  border-color: rgba(0,0,0,.15);
  color: var(--text);
}
[data-theme="light"] .btn-secondary:hover {
  background: rgba(0,0,0,.04);
}
[data-theme="light"] section { background: var(--bg); }
[data-theme="light"] section[style*="background:var(--bg2)"],
[data-theme="light"] .preview-section,
[data-theme="light"] #faq { background: var(--bg2); }
[data-theme="light"] .feat-card { background: var(--card); }
[data-theme="light"] .feat-card::before { background: linear-gradient(135deg,rgba(0,168,85,.03),transparent); }
[data-theme="light"] .feat-icon { background: rgba(0,168,85,.1); border-color: rgba(0,168,85,.15); }
[data-theme="light"] .price-card { background: var(--card); }
[data-theme="light"] .price-card.featured { background: linear-gradient(160deg,rgba(0,168,85,.05),rgba(0,153,204,.03),#fff); }
[data-theme="light"] .comp-table-wrap { background: var(--card); }
[data-theme="light"] .ct-head { background: var(--bg2); }
[data-theme="light"] .test-card { background: var(--card); }
[data-theme="light"] .faq-item { background: var(--card); }
[data-theme="light"] .cta-card { background: linear-gradient(135deg,rgba(0,168,85,.06),rgba(0,153,204,.04),rgba(109,40,217,.05)); border-color: rgba(0,168,85,.18); }
[data-theme="light"] .mockup-wrap { background: var(--card); box-shadow: 0 20px 60px rgba(0,0,0,.1); }
[data-theme="light"] .mockup-bar { background: var(--bg2); }
[data-theme="light"] .mockup-left { background: var(--bg2); }
[data-theme="light"] .mkl-photo { background: linear-gradient(135deg,rgba(0,168,85,.2),rgba(0,153,204,.15)); }
[data-theme="light"] .mkl-name { background: rgba(0,0,0,.12); }
[data-theme="light"] .mkl-bar { background: rgba(0,0,0,.07); }
[data-theme="light"] .mkr-block { background: var(--bg2); }
[data-theme="light"] .steps-bar { background: var(--card); }
[data-theme="light"] footer { background: var(--bg2); }
[data-theme="light"] .ct-no { color: #c0c0cc; }
[data-theme="light"] .ct-yes { color: var(--g1); }
[data-theme="light"] .ct-you { color: var(--g1); }

/* ===== LIGHT MODE OVERRIDES for app.html ===== */
[data-theme="light"] .card { background: var(--card); }
[data-theme="light"] .field input,
[data-theme="light"] .field select,
[data-theme="light"] .field textarea,
[data-theme="light"] .skill-row input,
[data-theme="light"] .font-sel,
[data-theme="light"] .ats-job-field { background: var(--input-bg); color: var(--text); border-color: rgba(0,0,0,.12); }
[data-theme="light"] .field input:focus,
[data-theme="light"] .field select:focus,
[data-theme="light"] .field textarea:focus,
[data-theme="light"] .skill-row input:focus { border-color: var(--g1); }
[data-theme="light"] .exp-item { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .st-card { background: var(--bg3); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .st-card.sel { background: rgba(0,168,85,.07); border-color: var(--g1); }
[data-theme="light"] .add-btn { border-color: rgba(0,0,0,.12); }
[data-theme="light"] .add-btn:hover { border-color: var(--g1); background: rgba(0,168,85,.05); }
[data-theme="light"] .photo-box { background: rgba(0,168,85,.04); border-color: rgba(0,168,85,.25); }
[data-theme="light"] .photo-box:hover { background: rgba(0,168,85,.08); }
[data-theme="light"] .ph-opt { background: var(--card); color: var(--muted); }
[data-theme="light"] .ph-opt.active { background: rgba(0,168,85,.1); color: #005c2e; border-color: var(--g1); }
[data-theme="light"] .lang-opt { background: var(--card); }
[data-theme="light"] .lang-opt.active { background: rgba(0,168,85,.1); color: #005c2e; }
[data-theme="light"] .plan-banner { background: linear-gradient(135deg,rgba(0,168,85,.06),rgba(0,153,204,.04)); }
[data-theme="light"] .wm-blur { background: linear-gradient(to bottom,transparent,rgba(245,247,250,.97) 45%); }
[data-theme="light"] .pay-card { background: var(--card); border-color: rgba(0,168,85,.2); }
[data-theme="light"] .success-banner { background: rgba(0,168,85,.07); border-color: rgba(0,168,85,.2); color: #005c2e; }
[data-theme="light"] .action-btn { background: var(--card); }
[data-theme="light"] .ats-panel { background: var(--card); }
[data-theme="light"] .ats-tip { background: rgba(0,153,204,.05); border-color: rgba(0,153,204,.15); color: #00607a; }
[data-theme="light"] .loading p { color: var(--muted); }
[data-theme="light"] .err-msg { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.2); color: #991b1b; }
[data-theme="light"] .steps-bar { background: var(--bg2); }
[data-theme="light"] nav { background: var(--nav-bg); }

/* Smooth theme transition */
body, nav, .card, section, footer, .feat-card, .price-card, .test-card,
.faq-item, .exp-item, .pay-card, .ats-panel, .plan-banner {
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}