/* ============================================================================
   TOKENS.CSS — Sistema de Design Tokens Unificado
   ============================================================================
   Este archivo centraliza TODAS las variables de diseño del proyecto.
   Se carga ANTES que cualquier otro CSS para que todos los archivos
   puedan consumir estas variables sin redeclararlas.
   
   Paleta basada en la identidad corporativa de Gestión Ganadera.
   ============================================================================ */

:root {
    /* ========================================
       PALETA CORPORATIVA — Colores Primarios
       ======================================== */
    --gn-navy:          #1D3D6F;   /* Azul oscuro principal */
    --gn-blue:          #436AB3;   /* Azul medio */
    --gn-blue-light:    #8296CC;   /* Azul claro */
    --gn-teal:          #0C949E;   /* Verde azulado / teal */
    --gn-teal-dark:     #0a7d85;   /* Teal oscuro (hover) */
    --gn-mint:          #7ECBB6;   /* Verde menta */
    --gn-lime:          #D1E39B;   /* Verde lima */
    --gn-gold:          #C79F2F;   /* Dorado */

    /* ========================================
       PALETA CORPORATIVA — Colores Neutros
       ======================================== */
    --gn-charcoal:      #414042;   /* Texto principal oscuro */
    --gn-gray:          #A7A9AC;   /* Texto secundario / muted */
    --gn-gray-light:    #F1F1F2;   /* Fondo principal gris */
    --gn-gray-border:   #DEE2E6;   /* Bordes estándar */
    --gn-gray-divider:  #e9ecef;   /* Divisores sutiles */
    --gn-white:         #FFFFFF;   /* Blanco */
    --gn-off-white:     #f8f9fa;   /* Fondo tarjetas secundarias */

    /* ========================================
       COLORES FUNCIONALES (estados)
       ======================================== */
    --gn-success:       #28a745;
    --gn-success-light: #ecfdf5;
    --gn-danger:        #dc3545;
    --gn-danger-dark:   #c82333;
    --gn-danger-light:  #fef2f2;
    --gn-warning:       #ffc107;
    --gn-warning-light: #fff3cd;
    --gn-info:          #17a2b8;
    --gn-info-light:    #eff6ff;

    /* ========================================
       TIPOGRAFÍA
       ======================================== */
    --gn-font-primary:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --gn-font-size-xs:    0.75rem;    /* 12px */
    --gn-font-size-sm:    0.875rem;   /* 14px */
    --gn-font-size-base:  1rem;       /* 16px */
    --gn-font-size-md:    1.125rem;   /* 18px */
    --gn-font-size-lg:    1.25rem;    /* 20px */
    --gn-font-size-xl:    1.5rem;     /* 24px */
    --gn-font-size-2xl:   2rem;       /* 32px */
    --gn-font-size-3xl:   2.5rem;     /* 40px */

    /* ========================================
       ESPACIADO
       ======================================== */
    --gn-space-xs:   0.25rem;   /* 4px */
    --gn-space-sm:   0.5rem;    /* 8px */
    --gn-space-md:   1rem;      /* 16px */
    --gn-space-lg:   1.5rem;    /* 24px */
    --gn-space-xl:   2rem;      /* 32px */
    --gn-space-2xl:  3rem;      /* 48px */

    /* ========================================
       BORDES Y RADIO
       ======================================== */
    --gn-radius-sm:    4px;
    --gn-radius-md:    8px;
    --gn-radius-lg:    12px;
    --gn-radius-xl:    16px;
    --gn-radius-full:  9999px;

    /* ========================================
       SOMBRAS
       ======================================== */
    --gn-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
    --gn-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
    --gn-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.1);
    --gn-shadow-lg:   0 8px 25px rgba(0, 0, 0, 0.12);
    --gn-shadow-xl:   0 12px 48px rgba(0, 0, 0, 0.2);

    /* ========================================
       TRANSICIONES
       ======================================== */
    --gn-transition-fast:  0.15s ease;
    --gn-transition-base:  0.3s ease;
    --gn-transition-slow:  0.5s ease-in-out;

    /* ========================================
       Z-INDEX (escala predecible)
       ======================================== */
    --gn-z-dropdown:   100;
    --gn-z-sticky:     200;
    --gn-z-header:     1000;
    --gn-z-overlay:    5000;
    --gn-z-modal:      9000;
    --gn-z-toast:      10000;
}

/* ============================================================================
   ACCESIBILIDAD — Reducir movimiento
   ============================================================================
   Respeta la preferencia del usuario que deshabilita animaciones
   en la configuración del sistema operativo.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   FOCUS VISIBLE — Accesibilidad de teclado
   ============================================================================
   Asegura que los elementos interactivos tengan un anillo de enfoque
   visible cuando se navega con teclado (Tab), sin afectar el click.
   ============================================================================ */
:focus-visible {
    outline: 2px solid var(--gn-teal);
    outline-offset: 2px;
}

/* Quitar el outline genérico en click (solo se muestra con teclado) */
:focus:not(:focus-visible) {
    outline: none;
}