/**
 * HEADER TOKENS — Variables unificadas para todos los componentes del header
 * 
 * SINGLE SOURCE OF TRUTH para anchos y breakpoints del header.
 * Todos los componentes del header deben usar estas variables.
 * 
 * Sincronizado con: 1-tokens/tokens.css
 * 
 * @package InformeDigital
 */

:root {
    /* ==========================================================
       HEADER: MAX-WIDTH
       Heredado de tokens.css para consistencia global
    ========================================================== */
    --header-max-width: var(--max-width-container, 1320px);
    
    /* ==========================================================
       HEADER: PADDINGS
       Heredado de tokens.css para consistencia global
    ========================================================== */
    --header-padding-desktop: var(--container-padding-desktop, 20px);
    --header-padding-tablet: var(--container-padding-tablet, 20px);
    --header-padding-mobile: var(--container-padding-mobile, 16px);
    
    /* ==========================================================
       HEADER: BREAKPOINTS
       Referencias semánticas a los breakpoints del sistema
    ========================================================== */
    /* Nota: Las variables CSS no pueden usarse en media queries,
       pero estos valores sirven como documentación y referencia.
       Usar los valores numéricos directamente en media queries. */
    
    /* Mobile: ≤768px */
    /* Tablet: 769px - 1024px */
    /* Desktop: ≥1025px */
}