/* Verigas v0.1 — Design tokens + temas claro/oscuro */
:root {
  /* Verde corporativo VERIGAS IBERIA (#6BAE44) */
  --verde-50:  #F2F8EC;
  --verde-100: #E2F0D4;
  --verde-200: #C6E0AC;
  --verde-400: #8DC65F;
  --verde-500: #6BAE44; /* primario corporativo */
  --verde-600: #5A9A38;
  --verde-700: #3E6E25; /* tinta verde (textos/iconos sobre verde claro) */
  --verde-900: #294D17; /* verde profundo de marca (heros) */

  /* Grises corporativos (negro #0D0D0D, gris #6B6B6B, gris claro #E6E6E6) */
  --gris-0:   #FFFFFF;
  --gris-50:  #F7F8F7;
  --gris-100: #EFF0EF;
  --gris-200: #E6E6E6;
  --gris-400: #9A9A9A;
  --gris-600: #6B6B6B;
  --gris-900: #0D0D0D;

  /* Acentos */
  --naranja-500: #F97316; /* alertas / no aptas */
  --rojo-500:    #EF4444; /* errores */

  /* Sombras y radios */
  --sombra-card: 0 1px 2px rgba(10,40,24,.05), 0 6px 20px rgba(10,40,24,.06);
  --sombra-pop:  0 12px 40px rgba(10,40,24,.16);
  --radio-card:  20px;
  --radio-input: 12px;
  --radio-pill:  999px;

  /* Tipografia */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-head: 'Montserrat', 'Inter', system-ui, sans-serif;

  /* Escala */
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-20: 20px; --t-28: 28px; --t-40: 40px;

  /* Espaciado */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  --sidebar-w: 248px;

  /* Heros (gradiente de marca, se adapta en oscuro) */
  --hero-grad: linear-gradient(155deg, #0D0D0D 0%, #294D17 55%, #6BAE44 135%);
  --hero-glow: rgba(255,255,255,.10);
}

/* --- Tema oscuro: invertimos la rampa de grises y oscurecemos los verdes de
   superficie, de modo que TODO el CSS existente (que usa --gris-* y --verde-*)
   se adapta sin tocar los componentes. --- */
html[data-theme="dark"] {
  --gris-0:   #161D1A;  /* superficie de cards/sidebar */
  --gris-50:  #0E1411;  /* fondo de pagina */
  --gris-100: #1F2925;  /* hover/sutil */
  --gris-200: #2C3833;  /* bordes */
  --gris-400: #6B7A72;
  --gris-600: #9DACA3;  /* texto secundario */
  --gris-900: #E8F0EB;  /* titulares/texto */

  --verde-50:  #1A2913;  /* tinte verde oscuro (chips, kpi, pills) */
  --verde-100: #233914;
  --verde-200: #355720;
  --verde-400: #8DC65F;
  --verde-500: #7DBE52;  /* primario, mas brillante sobre fondo oscuro */
  --verde-600: #6BAE44;
  --verde-700: #B7E08C;  /* texto verde claro sobre chips oscuros */
  --verde-900: #0F1A0A;

  --sombra-card: 0 1px 2px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.35);
  --sombra-pop:  0 16px 48px rgba(0,0,0,.55);

  --hero-grad: linear-gradient(155deg, #06251A 0%, #0E3D27 55%, #15803D 135%);
  --hero-glow: rgba(255,255,255,.06);

  color-scheme: dark;
}