/* ============================================
   SISTEMLUX — Temas (Oscuro / Claro)
   Modo oscuro como default, claro como alternativa
   ============================================ */

/* ── Modo Oscuro (Default) ── */
[data-theme="dark"] {
  --bg-primary: var(--color-navy);
  --bg-secondary: var(--color-navy-light);
  --bg-tertiary: rgba(13, 40, 71, 0.5);
  --bg-card: rgba(13, 40, 71, 0.6);
  --bg-card-hover: rgba(13, 40, 71, 0.8);

  --text-primary: var(--color-white);
  --text-secondary: var(--color-sage);
  --text-tertiary: var(--color-sage-dark);
  --text-accent: var(--color-gold);
  --text-heading: var(--color-white-pure);

  --border-primary: rgba(187, 152, 88, 0.15);
  --border-secondary: rgba(176, 183, 171, 0.1);
  --border-hover: rgba(187, 152, 88, 0.4);

  --navbar-bg: rgba(4, 27, 51, 0.85);
  --navbar-bg-scroll: rgba(4, 27, 51, 0.95);

  --btn-primary-bg: var(--color-gold);
  --btn-primary-text: var(--color-navy);
  --btn-primary-hover: var(--color-gold-light);
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--color-gold);
  --btn-secondary-border: var(--color-gold);

  --input-bg: rgba(13, 40, 71, 0.5);
  --input-border: rgba(176, 183, 171, 0.2);
  --input-focus-border: var(--color-gold);
  --input-text: var(--color-white);
  --input-placeholder: var(--color-sage-dark);

  --overlay-bg: rgba(2, 14, 26, 0.7);

  --glass-card-bg: rgba(4, 27, 51, 0.6);
  --glass-card-border: rgba(187, 152, 88, 0.12);

  --footer-bg: var(--color-navy-dark);

  color-scheme: dark;
}

/* ── Modo Claro ── */
[data-theme="light"] {
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-100);
  --bg-tertiary: rgba(224, 224, 219, 0.5);
  --bg-card: var(--color-white-pure);
  --bg-card-hover: var(--color-gray-100);

  --text-primary: var(--color-brown);
  --text-secondary: var(--color-gray-500);
  --text-tertiary: var(--color-gray-400);
  --text-accent: var(--color-gold-dark);
  --text-heading: var(--color-navy);

  --border-primary: rgba(85, 54, 28, 0.12);
  --border-secondary: rgba(85, 54, 28, 0.06);
  --border-hover: rgba(187, 152, 88, 0.5);

  --navbar-bg: rgba(245, 245, 240, 0.85);
  --navbar-bg-scroll: rgba(245, 245, 240, 0.95);

  --btn-primary-bg: var(--color-gold);
  --btn-primary-text: var(--color-white-pure);
  --btn-primary-hover: var(--color-gold-dark);
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--color-gold-dark);
  --btn-secondary-border: var(--color-gold-dark);

  --input-bg: var(--color-white-pure);
  --input-border: rgba(85, 54, 28, 0.15);
  --input-focus-border: var(--color-gold);
  --input-text: var(--color-brown);
  --input-placeholder: var(--color-gray-400);

  --overlay-bg: rgba(245, 245, 240, 0.7);

  --glass-card-bg: rgba(255, 255, 255, 0.7);
  --glass-card-border: rgba(85, 54, 28, 0.08);

  --footer-bg: var(--color-gray-100);

  color-scheme: light;
}

/* ── Transición Global de Tema ── */
[data-theme] body,
[data-theme] .navbar,
[data-theme] .card,
[data-theme] .section,
[data-theme] footer,
[data-theme] input,
[data-theme] textarea,
[data-theme] button {
  transition:
    background-color var(--transition-theme),
    color var(--transition-theme),
    border-color var(--transition-theme),
    box-shadow var(--transition-theme);
}