/* Theme v3 (dark default) — light mode is a real palette (not "backlight") */

:root{
  color-scheme: dark;
  /* Dark (default) */
  --page-bg: radial-gradient(1000px 520px at 15% 0%, rgba(34, 197, 94, 0.10), transparent 58%),
             radial-gradient(900px 460px at 85% 18%, rgba(59, 130, 246, 0.10), transparent 58%),
             linear-gradient(180deg, rgba(7,11,22,1) 0%, rgba(4,6,16,1) 100%);

  --surface: rgba(12, 18, 35, 0.88);
  --surface-2: rgba(15, 23, 42, 0.62);
  --surface-3: rgba(15, 23, 42, 0.78);

  --text: #e5e7eb;
  --text-strong: #f3f4f6;
  --muted: rgba(203, 213, 225, 0.72);

  --border: rgba(148, 163, 184, 0.22);
  --shadow: 0 20px 55px rgba(0, 0, 0, 0.35);

  --accent: #22c55e;
  --accent-soft: rgba(34, 197, 94, 0.22);
  --ring: rgba(34, 197, 94, 0.45);
}

:root[data-theme="light"]{
  color-scheme: light;
  /* Light palette (soft grey-blue, dark text) */
  --page-bg: linear-gradient(180deg, #edf2f7 0%, #e2e8f0 55%, #d8e0ec 100%);

  --surface: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(15, 23, 42, 0.06);
  --surface-3: rgba(15, 23, 42, 0.08);

  --text: #0f172a;
  --text-strong: #0b1224;
  --muted: rgba(71, 85, 105, 0.85);

  --border: rgba(15, 23, 42, 0.14);
  --shadow: 0 18px 45px rgba(2, 6, 23, 0.10);

  --accent: #16a34a;
  --accent-soft: rgba(22, 163, 74, 0.18);
  --ring: rgba(22, 163, 74, 0.28);
}

/* Page background + default text */
body{
  background: var(--page-bg) !important;
  color: var(--text) !important;
}

/* Force readable typography in light mode (some elements in the original CSS are hardcoded) */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] .title,
:root[data-theme="light"] .kpi-title,
:root[data-theme="light"] .section-title{
  color: var(--text-strong) !important;
  text-shadow: none !important;
}

:root[data-theme="light"] p,
:root[data-theme="light"] label,
:root[data-theme="light"] .subtitle,
:root[data-theme="light"] .hint,
:root[data-theme="light"] .small,
:root[data-theme="light"] .muted{
  color: var(--muted) !important;
}

/* Cards/panels */
:root[data-theme="light"] .card,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .container-card,
:root[data-theme="light"] .box,
:root[data-theme="light"] .results-card,
:root[data-theme="light"] .calculator-card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Inputs/selects */
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="light"] input::placeholder{
  color: rgba(71, 85, 105, 0.65) !important;
}

/* Some dropdowns / custom fields */
:root[data-theme="light"] .dropdown,
:root[data-theme="light"] .select,
:root[data-theme="light"] .input{
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
}

/* Pills/toggles keep the same structure but adapt colors */
:root[data-theme="light"] .units-toggle,
:root[data-theme="light"] .sex-toggle{
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid var(--border) !important;
}

/* Buttons */
:root[data-theme="light"] button{
  color: var(--text);
}

:root[data-theme="light"] .primary-btn,
:root[data-theme="light"] .calculate-btn{
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.20) !important;
}

/* Segmented theme toggle (small, like other toggles) */
.theme-toggle{
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(15, 23, 42, 0.9);
  border-radius: 999px;
  padding: 2px;
  border: 1px solid rgba(55, 65, 81, 0.9);
  gap: 2px;
  height: 24px;
  overflow: hidden;
}
:root[data-theme="light"] .theme-toggle{
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--border);
}

.theme-toggle input{ display:none; }

.theme-toggle label{
  height: 100%;
  width: 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.08s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
  color: var(--muted);
  font-size: 13px;
}

.theme-toggle label:active{ transform: translateY(1px); }

.theme-toggle input:checked + label{
  background: var(--accent-soft);
  color: var(--text-strong);
}

.theme-toggle label:focus{ outline:none; }

@media (max-width: 600px){
  .theme-toggle{ height: 30px; }
  .theme-toggle label{ width: 34px; font-size: 15px; }
}

/* Light mode: components in index that use hardcoded dark backgrounds */
:root[data-theme="light"] .info-box,
:root[data-theme="light"] details.faq-item,
:root[data-theme="light"] .goal-card,
:root[data-theme="light"] .macro-card,
:root[data-theme="light"] .water-card{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

:root[data-theme="light"] .info-box li,
:root[data-theme="light"] details.faq-item summary,
:root[data-theme="light"] details.faq-item p,
:root[data-theme="light"] details.faq-item a{
  color: var(--text) !important;
}

:root[data-theme="light"] details.faq-item summary{ font-weight: 600; }
:root[data-theme="light"] .mini-note{ color: var(--muted) !important; }

/* Language selector in light mode */
:root[data-theme="light"] .lang-select-wrap select{
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
:root[data-theme="light"] .lang-select-wrap::after{ color: var(--muted) !important; }

/* Footer in light mode */
:root[data-theme="light"] footer.site-footer{ color: rgba(71,85,105,0.85) !important; }
:root[data-theme="light"] footer.site-footer a{ color: rgba(71,85,105,0.85) !important; }
:root[data-theme="light"] footer.site-footer a.learn-more{ color: var(--text) !important; }

/* Light mode: chips/pills/text that were dark */
:root[data-theme="light"] .goal-chip{
  background: rgba(15, 23, 42, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
:root[data-theme="light"] .goal-chip.active{
  background: var(--accent-soft) !important;
  border-color: rgba(22, 163, 74, 0.55) !important;
  color: var(--text-strong) !important;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.18) !important;
}

:root[data-theme="light"] .macro-label{ color: rgba(15,23,42,0.70) !important; }
:root[data-theme="light"] .macro-value span{ color: rgba(71,85,105,0.75) !important; }

/* Light mode: top badge + estimates tag + ghost buttons */
:root[data-theme="light"] .badge{
  background: rgba(15, 23, 42, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}
:root[data-theme="light"] .badge span{ color: var(--muted) !important; }
:root[data-theme="light"] .badge-dot{
  box-shadow: 0 0 0 4px rgba(22,163,74,0.10) !important;
}

:root[data-theme="light"] .estimates-tag{
  background: rgba(15, 23, 42, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

:root[data-theme="light"] .btn-ghost,
:root[data-theme="light"] #resetBtn{
  background: rgba(15, 23, 42, 0.06) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] .btn-ghost:hover,
:root[data-theme="light"] #resetBtn:hover{
  background: rgba(15, 23, 42, 0.09) !important;
}