/* ============================================================
   variables.css — Lokal
   Tokens de diseño: colores, sombras y temas
   ============================================================ */

/* ── TEMA BASE (verde / bosque) ── */
:root {
  --verde:        #1B4332;
  --verde-claro:  #2D6A4F;
  --tierra:       #52B788;
  --crema:        #F5E6C8;
  --crema-oscura: #E8D5A3;
  --cafe:         #2C1A00;
  --blanco:       #FDF6E3;
  --gris:         #6B7280;
  --sombra:       0 4px 24px rgba(27, 67, 50, 0.15);
}

/* ── TEMA: Petróleo ── */
body[data-tema="petroleo"] {
  --verde:        #0A4D5C;
  --verde-claro:  #0E6D82;
  --tierra:       #00B4D8;
  --crema:        #E8F7FA;
  --crema-oscura: #CCEdf5;
  --cafe:         #0A2D38;
  --blanco:       #F4FBFD;
  --gris:         #4A7A8A;
  --sombra:       0 4px 24px rgba(10, 77, 92, 0.15);
}

/* ── TEMA: Pizarra ── */
body[data-tema="pizarra"] {
  --verde:        #1A4A44;
  --verde-claro:  #22635C;
  --tierra:       #2AB5A8;
  --crema:        #E8FAF8;
  --crema-oscura: #C6EEEB;
  --cafe:         #0D2926;
  --blanco:       #F3FDFC;
  --gris:         #4A7A75;
  --sombra:       0 4px 24px rgba(26, 74, 68, 0.15);
}

/* ── TEMA: Cobalto ── */
body[data-tema="cobalto"] {
  --verde:        #1A2E7A;
  --verde-claro:  #253DA0;
  --tierra:       #4C6EF5;
  --crema:        #EEF2FF;
  --crema-oscura: #D5DCFF;
  --cafe:         #0D1A4A;
  --blanco:       #F5F7FF;
  --gris:         #5A6AB5;
  --sombra:       0 4px 24px rgba(26, 46, 122, 0.15);
}

/* ── TEMA: Bosque Oscuro ── */
body[data-tema="bosque-oscuro"] {
  --verde:        #0F2419;
  --verde-claro:  #639922;
  --tierra:       #97C459;
  --crema:        #EAF3DE;
  --crema-oscura: #D0E8BB;
  --cafe:         #0A1A0D;
  --blanco:       #F4FBED;
  --gris:         #5A7A4A;
  --sombra:       0 4px 24px rgba(15, 36, 25, 0.18);
}

/* ── TEMA: Casi Negro ── */
body[data-tema="casi-negro"] {
  --verde:        #062D38;
  --verde-claro:  #0A4558;
  --tierra:       #00C8E8;
  --crema:        #E0F7FB;
  --crema-oscura: #B8EEF5;
  --cafe:         #031820;
  --blanco:       #F0FBFD;
  --gris:         #4A8A9A;
  --sombra:       0 4px 24px rgba(6, 45, 56, 0.2);
}

/* Ajuste de logo/hero para tema casi-negro */
body[data-tema="casi-negro"] .logo span,
body[data-tema="casi-negro"] .hero h1 em,
body[data-tema="casi-negro"] .admin-logo span {
  color: #74C69D;
}