/* =========================
   01-tokens.css
   Design Tokens del sistema
   ========================= */

/* Paleta nueva (semántica) */
:root {
  /* Colores base */
  --color-primary:    #234F35; /* verde oscuro institucional */
  --color-accent:     #D8A933; /* amarillo dorado (CTA) */
  --color-secondary:  #6C8E4F; /* verde medio agrícola (hover/detalles) */
  --color-bg:         #F5F0E3; /* beige claro, fondo principal */
  --color-surface:    #FFFFFF; /* blanco para tarjetas/áreas limpias */
  --color-text:       #1E1E1E; /* negro suave para texto */

  /* Estados y utilitarios (opcional, por si los necesitas pronto) */
  --color-danger:     #DC3545;
  --color-success:    #198754;
  --color-info:       #0DCAF0;

  /* ENFOQUE/FOCUS: anillo accesible */
  --focus-border-color: var(--color-accent);      /* borde de inputs al foco */
  --focus-ring-color: rgba(216, 169, 51, .45); /* acento con transparencia */

  /* Tipografía */
  --font-sans:        "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  /* Escala tipográfica (puedes ajustarla luego) */
  --fs-100: 0.875rem; /* 14 */
  --fs-200: 1rem;     /* 16 */
  --fs-300: 1.125rem; /* 18 */
  --fs-400: 1.25rem;  /* 20 */
  --fs-500: 1.5rem;   /* 24 */
  --fs-600: 2rem;     /* 32 */

  /* Espaciados (8pt grid aprox) */
  --space-1: .25rem;  /* 4  */
  --space-2: .5rem;   /* 8  */
  --space-3: .75rem;  /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.5rem;  /* 24 */
  --space-6: 2rem;    /* 32 */

  /* Radios y sombras */
  --radius-sm: .375rem;
  --radius-md: .5rem;
  --radius-lg: .75rem;
  --radius-xl: 1rem;
    /* Radios específicos de marca */
  --radius-logo: 1rem; /* 12px aprox: sutil, profesional */
  /* Estética del aro del logo (sobre fondos oscuros) */
  --logo-ring-color: rgba(255, 255, 255, 0.9);


  --shadow-sm: 0 1px 6px rgba(0,0,0,.08);
  --shadow-md: 0 6px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.16);

  /* Z-index (referencias) */
  --z-navbar:   1020;
  --z-sidebar:  1030;
  --z-offcanvas:1040;
  --z-modal:    1050;

  /* Transiciones */
  --transition-fast:  .15s ease;
  --transition:       .25s ease;
  --transition-slow:  .4s  ease;

  /* -------------------------
     ALIAS de variables legado
     (no rompen el CSS actual)
     ------------------------- */
  --verde-intenso:        var(--color-primary);
  --amarillo-brillante:   var(--color-accent);
  --verde-claro:          var(--color-secondary);
  --gris-oscuro:          var(--color-text);
  --blanco:               var(--color-surface);
  --negro:                #000000;

  /* Mantén el azul por ahora; lo cambiaremos en la fase 2 si quieres */
  --azul-electrico:       #0033FF;
}