/* ============================================================
   G1SEVA — Theme Variables
   Light + Dark Mode
   ============================================================ */

:root {
  --bg:
    radial-gradient(circle at top left, rgba(251,191,36,.28), transparent 24%),
    radial-gradient(circle at top right, rgba(245,158,11,.24), transparent 22%),
    linear-gradient(180deg, #fffef4 0%, #fff8df 54%, #fdf3cc 100%);
  --text: #1e1800;
  --text-muted: #7a6524;
  --accent: #f4b400;
  --accent-strong: #b77900;
  --accent-dark: #1e1800;
  --panel-bg: rgba(255,255,255,.85);
  --panel-border: rgba(183,121,0,.14);
  --shadow: 0 24px 60px rgba(147,101,10,.13);
  --shadow-sm: 0 4px 16px rgba(147,101,10,.10);
  --radius: 22px;
  --radius-sm: 12px;
}

/* ---- Dark Mode Variables ---- */
[data-theme="dark"] {
  --bg:
    radial-gradient(circle at top left, rgba(244,180,0,.08), transparent 24%),
    radial-gradient(circle at top right, rgba(245,158,11,.06), transparent 22%),
    linear-gradient(180deg, #0f0d00 0%, #151100 54%, #1a1500 100%);
  --text: #f5e9c0;
  --text-muted: #a08840;
  --accent: #f4b400;
  --accent-strong: #f4c842;
  --accent-dark: #f4b400;
  --panel-bg: rgba(30,24,0,.75);
  --panel-border: rgba(244,180,0,.12);
  --shadow: 0 24px 60px rgba(0,0,0,.45);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.35);
  --radius: 22px;
  --radius-sm: 12px;
}

/* Dark mode body bg fix */
[data-theme="dark"] body {
  background: var(--bg);
  background-attachment: fixed;
}

/* Dark mode header */
[data-theme="dark"] .site-header {
  background: linear-gradient(135deg, rgba(30,24,0,.92), rgba(20,16,0,.97));
  border-bottom: 1.5px solid rgba(244,180,0,.15);
}
[data-theme="dark"] .brand-text strong { color: #f5e9c0; }
[data-theme="dark"] .brand-text small  { color: rgba(245,233,192,.5); }
[data-theme="dark"] .site-nav a        { color: rgba(245,233,192,.8); }
[data-theme="dark"] .site-nav a:hover  { background: rgba(244,180,0,.12); color: #f4b400; }
[data-theme="dark"] .nav-toggle span   { background: #f5e9c0; }

/* Dark mode cards */
[data-theme="dark"] .card,
[data-theme="dark"] .hero-copy,
[data-theme="dark"] .hero-panel,
[data-theme="dark"] .panel,
[data-theme="dark"] .apply-card,
[data-theme="dark"] .service-info,
[data-theme="dark"] .track-card,
[data-theme="dark"] .kpi {
  background: rgba(30,24,0,.8);
  border-color: rgba(244,180,0,.13);
}

/* Dark mode stat cards */
[data-theme="dark"] .stat-card {
  background: rgba(244,180,0,.08);
  border-color: rgba(244,180,0,.15);
}

/* Dark mode process items */
[data-theme="dark"] .process-item {
  background: rgba(244,180,0,.06);
  border-color: rgba(244,180,0,.1);
}

/* Dark mode section alt */
[data-theme="dark"] .section-alt {
  background: rgba(244,180,0,.04);
}

/* Dark mode faq */
[data-theme="dark"] .faq-item {
  background: rgba(30,24,0,.8);
  border-color: rgba(244,180,0,.12);
}
[data-theme="dark"] .faq-toggle { color: #f5e9c0; }

/* Dark mode forms */
[data-theme="dark"] .form input,
[data-theme="dark"] .form textarea,
[data-theme="dark"] .form select {
  background: rgba(244,180,0,.06);
  border-color: rgba(244,180,0,.2);
  color: #f5e9c0;
}

/* Dark mode benefit chips */
[data-theme="dark"] .benefit-chip {
  background: rgba(244,180,0,.1);
  border-color: rgba(244,180,0,.2);
  color: #f4c842;
}

/* Dark mode trust badges */
[data-theme="dark"] .trust-badge {
  background: rgba(244,180,0,.08);
  border-color: rgba(244,180,0,.15);
  color: #a08840;
}

/* Dark mode trust cert cards */
[data-theme="dark"] .trust-cert-card {
  background: rgba(30,24,0,.8);
  border-color: rgba(244,180,0,.18);
}

/* Dark mode mobile nav */
[data-theme="dark"] .site-nav {
  background: rgba(15,12,0,.97);
  border-color: rgba(244,180,0,.12);
}

/* Dark mode auth panel */
[data-theme="dark"] .auth-overlay-panel {
  background: #1a1500;
  border: 1.5px solid rgba(244,180,0,.18);
}

/* ---- Dark Mode Toggle Button ---- */
.dark-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(183,121,0,.25);
  background: rgba(255,255,255,.4);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  transition: background .2s, border-color .2s, transform .15s;
  flex-shrink: 0;
  line-height: 1;
}
.dark-toggle:hover {
  background: rgba(255,255,255,.7);
  transform: rotate(20deg);
}
[data-theme="dark"] .dark-toggle {
  background: rgba(244,180,0,.12);
  border-color: rgba(244,180,0,.3);
}
[data-theme="dark"] .dark-toggle:hover {
  background: rgba(244,180,0,.22);
}