/* =========================================
   TOKENS DE TEMA (GrowerDATA)
   - Variables base para colores, estados y layout
   - Modo claro por defecto
   ========================================= */
:root{
  /* Superficies (fondo, tarjetas, hover, etc.) */
  --fondo: #F4F6F5;
  --superficie: #FFFFFF;
  --superficie_alt: #ECEFEA;
  --borde: #D1D5DB;

  /* Tipografía / texto */
  --texto: #1F2933;
  --texto_sec: #6B7280;
  --texto_suave: #9CA3AF;

  /* Identidad / marca */
  --marca: #2F6F4E;

  /* Estados (semáforo) */
  --ok: #3FAE6C;
  --advertencia: #E6A23C;
  --error: #C0392B;
   --info: #3B82F6;

  /* Estilo visual */
  --sombra: 0 10px 25px rgba(0,0,0,0.06);
  --radio: 16px;
  --radio_sm: 12px;

  /* Layout */
  --ancho_barra: 280px;

  /* -----------------------------------------
     (Opcional) Tokens derivados
     Útiles para reutilizar transparencias/gradientes
     ----------------------------------------- */
  --overlay: rgba(0,0,0,0.45);
  --marca_tinte: rgba(47,111,78,0.14);
  --marca_borde: rgba(47,111,78,0.25);
}

/* =========================================
   TEMA OSCURO
   - Se activa con html[data-tema="oscuro"]
   - Solo redefinimos tokens (no estilos)
   ========================================= */
html[data-tema="oscuro"]{
  /* Superficies */
  --fondo: #0F172A;
  --superficie: #111827;
  --superficie_alt: #1F2937;
  --borde: #243041;

  /* Texto */
  --texto: #E5E7EB;
  --texto_sec: #9CA3AF;
  --texto_suave: #6B7280;

  /* Marca */
  --marca: #4FA37D;

  /* Estados */
  --ok: #34D399;
  --advertencia: #FBBF24;
  --error: #F87171;
  --info: #60A5FA;

  /* Estilo visual */
  --sombra: 0 10px 25px rgba(0,0,0,0.35);

  /* (Opcional) derivados */
  --overlay: rgba(0,0,0,0.55);
  --marca_tinte: rgba(79,163,125,0.16);
  --marca_borde: rgba(79,163,125,0.30);
}