/* ==========================================================================
   Pura Vida Distribution — dark.css
   Dark theme, active when <html data-theme="dark"> (see js/theme.js).
   Strategy: flip the surface/text tokens, then pin the few components that
   use --green-900 / --cream-50 as a *background* or as text on a dark
   background so they keep their contrast.
   ========================================================================== */

/* ----- Theme toggle button (shown in both themes) ----- */
.lang-bar-inner { align-items: center; gap: 12px; }
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  border: 1px solid rgba(27, 37, 33, 0.12);
  background: #fff;
  color: var(--ink-600);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(27, 37, 33, 0.06);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), color var(--transition);
}
.theme-toggle:hover { border-color: var(--green-700); box-shadow: 0 4px 12px rgba(14, 62, 46, 0.14); transform: translateY(-1px); color: var(--gold-500); }
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle:focus-visible { outline: 2px solid var(--green-700); outline-offset: 3px; }
.theme-toggle svg { width: 20px; height: 20px; transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s; }
.theme-toggle .icon-sun { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.5); }
html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: none; }

/* ----- Tokens ----- */
/* Light is the default for every first visit: the page declares color-scheme
   light so browsers' forced/auto dark modes don't recolor it behind our back. */
:root { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --cream-50: #0e1613;
  --cream-100: #15211c;
  --white: #1a2924;
  --ink-900: #e9f0ec;
  --ink-600: #a3b3ab;
  --green-900: #bfe6d3;   /* used mostly as heading/text colour */
  --green-700: #46b58a;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] body { background: var(--cream-50); color: var(--ink-900); }

/* ----- Surfaces that hard-code light colours ----- */
html[data-theme="dark"] .site-header { background: rgba(14, 22, 19, 0.88); border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .lang-bar { border-bottom-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .lang-toggle,
html[data-theme="dark"] .theme-toggle { background: var(--white); border-color: rgba(255, 255, 255, 0.14); }
html[data-theme="dark"] .theme-toggle { color: var(--gold-300); }
html[data-theme="dark"] .contact-page .form-field input,
html[data-theme="dark"] .contact-page .form-field textarea { background: var(--cream-100); }
html[data-theme="dark"] .contact-page .contact-form,
html[data-theme="dark"] .contact-page .contact-card,
html[data-theme="dark"] .contact-quick-item { border-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .form-field textarea { border-color: rgba(255, 255, 255, 0.16); }
html[data-theme="dark"] .btn-add[disabled] { background: #34423c; border-color: #34423c; color: #7e8d86; }
html[data-theme="dark"] .pv-bot-messages::-webkit-scrollbar-thumb,
html[data-theme="dark"] .pv-bot-chips::-webkit-scrollbar-thumb { background: #3a4a43; }

/* ----- Keep these dark-green backgrounds (their token is now light) ----- */
html[data-theme="dark"] .skip-link,
html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] .btn-add,
html[data-theme="dark"] .btn-view:hover,
html[data-theme="dark"] .chip.is-active,
html[data-theme="dark"] .combo-chip.is-selected,
html[data-theme="dark"] .contact-card-accent,
html[data-theme="dark"] .pv-msg.user,
html[data-theme="dark"] .pv-bot-send {
  background: #1f6f54;
  border-color: #1f6f54;
  color: #fff;
}
html[data-theme="dark"] .nav-cta:hover,
html[data-theme="dark"] .btn-add:hover,
html[data-theme="dark"] .pv-bot-send:hover { background: #2e9e74; border-color: #2e9e74; }
html[data-theme="dark"] .btn-add.is-added { background: var(--whatsapp); border-color: var(--whatsapp); }

/* ----- Text that sat on a dark background and used --cream-50 ----- */
html[data-theme="dark"] .site-footer .footer-brand,
html[data-theme="dark"] .site-footer .footer-social a { color: #faf6ef; }
html[data-theme="dark"] .btn-ghost { color: #fff; }
html[data-theme="dark"] .carousel-slide .btn-ghost { border-color: rgba(255, 255, 255, 0.55); }

/* Language switch: thumb is now light, so flip the active label to dark ink */
html[data-theme="dark"] .lang-toggle .lang-opt { color: var(--ink-600); }
html[data-theme="dark"] .lang-toggle .lang-opt-en { color: #0e1613; }
html[data-theme="dark"] .lang-toggle.is-es .lang-opt-en { color: var(--ink-600); }
html[data-theme="dark"] .lang-toggle.is-es .lang-opt-es { color: #0e1613; }

/* Smooth switch (skipped for people who prefer reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  body, .site-header, .lang-bar, .contact-form, .contact-card, .contact-quick-item {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
}