/* Theme: Light — sobrescribe las custom properties cuando el body tenga la clase "light" */

/* ajustes globales de transición para suavizar el cambio de tema */
* {
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, box-shadow 260ms ease;
}

/* Variables de tema claro (se aplican cuando body tiene la clase `light`) */
body.light {
  --bg-main: #f6f7fb;
  --bg-elevated: rgba(255, 255, 255, 0.9);
  --bg-card: rgba(255, 255, 255, 0.98);
  --accent: #0ea5e9; /* mantiene la identidad, ligeramente más profunda sobre fondo claro */
  --accent-soft: rgba(14, 165, 233, 0.12);
  --border-subtle: rgba(11, 18, 32, 0.06);
  --text-main: #0b1220;
  --text-muted: #536178;
  --danger: #b91c1c;
  --radius-lg: 18px;
  --shadow-soft: 0 10px 30px rgba(11, 18, 32, 0.06);
  --blur-glass: 12px;
  --transition-fast: 180ms ease-out;
  --transition-med: 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Override de fondo general: eliminamos la imagen de fondo oscura para tema claro */
body.light,
body.light .page {
  background-image: none !important;
  background-color: var(--bg-main) !important;
  color: var(--text-main);
}

/* Header */
body.light .header {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.9), transparent);
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(12px);
}

/* Logo */
body.light .logo {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(11, 18, 32, 0.04);
  box-shadow: 0 4px 18px rgba(11, 18, 32, 0.06);
}
body.light .logo span {
  color: var(--text-muted);
}

/* Nav */
body.light .nav {
  color: var(--text-muted);
}
body.light .nav__link:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.95);
}
body.light .nav__link--primary {
  background: radial-gradient(circle at top left, var(--accent), #06b6d4);
  color: white;
  border: none;
}

/* Hero / textos */
body.light .eyebrow {
  color: var(--accent);
}
body.light .hero__subtitle,
body.light .section__header p,
body.light .split__col p {
  color: var(--text-muted);
}

/* Botones */
body.light .btn--primary {
  background: radial-gradient(circle at top left, var(--accent), #06b6d4);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(14, 165, 233, 0.12);
  border-color: transparent;
}
body.light .btn--ghost,
body.light .btn--outline {
  background: transparent;
  color: var(--text-main);
  border-color: var(--border-subtle);
}

/* Paneles y tarjetas */
body.light .panel,
body.light .card,
body.light .contact__form,
body.light .card--outline,
body.light .pill,
body.light .chip {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
}

/* Diagramas / conexiones: hacemos el glow más sutil en claro */
body.light .diagram::before {
  opacity: 0.8;
}
body.light .diagram__connection::before {
  filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.18));
}

/* Timeline */
body.light .timeline {
  border-left: 1px dashed rgba(11, 18, 32, 0.06);
}
body.light .timeline__item::before {
  box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.08);
}

/* Inputs */
body.light .contact__form input,
body.light .contact__form textarea {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-main);
  border: 1px solid rgba(11, 18, 32, 0.06);
}

body.light .contact__form input:focus,
body.light .contact__form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Ajuste para el logo remoto: si añades data-dark-src/data-light-src JS los intercambiará */
.logo img {
  transition: filter 220ms ease, opacity 220ms ease;
}

/* Pequeño helper para el botón toggle si lo insertas */
#theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
}