/* Verigas v0.1 — Design tokens + temas claro/oscuro */
:root {
  /* Verde de marca — verde real, profundo, con carácter (no turquesa) */
  --verde-50:  #F0FDF4;
  --verde-100: #DCFCE7;
  --verde-200: #B7F0C6;
  --verde-400: #45C972;
  --verde-500: #1A9E4B; /* primario */
  --verde-600: #15803D;
  --verde-700: #14532D; /* tinta verde (textos/iconos sobre verde claro) */
  --verde-900: #0A3D26; /* verde profundo de marca (heros) */

  /* Grises (rampa neutra) */
  --gris-0:   #FFFFFF;
  --gris-50:  #F7F9F8;
  --gris-100: #F0F3F1;
  --gris-200: #E3E8E5;
  --gris-400: #9CA8A1;
  --gris-600: #566159;
  --gris-900: #102016;

  /* 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, #0A3D26 0%, #14532D 52%, #1A9E4B 130%);
  --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:  #0E2A1C;  /* tinte verde oscuro (chips, kpi, pills) */
  --verde-100: #123A28;
  --verde-200: #1C5236;
  --verde-400: #45C972;
  --verde-500: #2EB85F;  /* primario, mas brillante sobre fondo oscuro */
  --verde-600: #25A052;
  --verde-700: #86EFAC;  /* texto verde claro sobre chips oscuros */
  --verde-900: #08301F;

  --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;
}