/**
 * VARIABLES CSS - Template Villa del Totoral
 * Archivo: /templates/villatotoral/assets/css/variables.css
 * 
 * Define colores, tipografía y espaciado específicos del municipio.
 * Sobrescribe variables base del framework.
 */

:root {
    /* ========================================
       COLORES INSTITUCIONALES VILLA DEL TOTORAL
       ======================================== */
    
    /* Valores extraídos del sitio legacy villatotoral.local */
    --color-primary: #186CB4;        /* Azul institucional (mantener) */
    --color-secondary: #47a36b;      /* Verde detectado en CSS legacy */
    --color-success: #FD8B4C;        /* Naranja (mantener) */
    
    /* Colores base */
    --color-negro: #000000;
    --color-blanco: #ffffff;
    
    /* Escala de grises */
    --color-gris: #f5f5f5;           /* Fondo secciones */
    --color-grisclaro: #e5e7eb;      /* Bordes suaves */
    --color-grisoscuro: #4b5563;     /* Textos secundarios */
    --color-parrafo: #374151;        /* Texto párrafos */
    
    /* Aliases para compatibilidad con CSS legacy */
    --primario: var(--color-primary);
    --secundario: var(--color-secondary);
    --negro: var(--color-negro);
    --blanco: var(--color-blanco);
    --gris: var(--color-gris);
    --grisclaro: var(--color-grisclaro);
    --grisoscuro: var(--color-grisoscuro);
    --parrafo: var(--color-parrafo);
    
    /* ========================================
       TIPOGRAFÍA
       ======================================== */
    
    --font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --fuente: var(--font-family); /* Alias legacy */
    
    /* Tamaños de fuente */
    --font-size-base: 1.5rem;     /* Base 15px */
    --font-size-h1: 3.2rem;
    --font-size-h2: 3.2rem;
    --font-size-h3: 2rem;
    --font-size-h5: 1.8rem;
    --font-size-p: 1.9rem;
    --font-size-small: 1.4rem;
    
    /* ========================================
       ESPACIADO
       ======================================== */
    
    --spacing-xs: 1rem;
    --spacing-sm: 1.5rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 5rem;
    
    /* ========================================
       HEADER
       ======================================== */
    
    --header-bg-top: var(--color-negro);      /* Barra superior negra */
    --header-bg-main: var(--color-blanco);    /* Menú principal blanco */
    --header-height-top: auto;
    --header-height-main: auto;
    --header-padding-top: 1.5rem;
    --header-padding-main: 2rem 0;
    
    /* ========================================
       FOOTER
       ======================================== */
    
    --footer-bg-telefonos: var(--color-blanco);
    --footer-bg-main: var(--color-negro);
    --footer-color-text: var(--color-blanco);
    --footer-padding: 3rem 0;
    
    /* ========================================
       COMPONENTES
       ======================================== */
    
    /* Botones */
    --btn-primary-bg: var(--color-primary);
    --btn-primary-color: var(--color-blanco);
    --btn-primary-border: var(--color-blanco);
    --btn-border-radius: 5rem;
    --btn-padding: 0.5rem 0.8rem;
    
    /* Cards */
    --card-border-radius: 0.5rem;
    --card-shadow: 0rem 0.1rem 0.5rem 0.3rem rgba(212, 212, 212, 0.43);
    --card-border: 0.1rem solid var(--color-grisclaro);
    
    /* Slider */
    --slider-border-bottom: 0.8rem solid var(--color-secondary);
    --slider-height-desktop: 55rem;
    --slider-height-mobile: 30rem;
    
    /* Teléfonos Útiles */
    --telefonos-bg: var(--color-blanco);
    --telefonos-card-bg: var(--color-gris);
    --telefonos-card-radius: 1rem;
    --telefonos-padding: 3rem 0;
    
    /* ========================================
       RESPONSIVE BREAKPOINTS
       (Heredados del framework pero documentados aquí)
       ======================================== */
    
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    
    /* ========================================
       TRANSICIONES Y ANIMACIONES
       ======================================== */
    
    --transition-default: all 0.5s ease-in-out;
    --transition-fast: all 0.2s ease-in-out;
}

/* ========================================
   APLICACIÓN DE VARIABLES A ELEMENTOS BASE
   ======================================== */

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--color-negro);
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

p {
    font-size: var(--font-size-p);
    color: var(--color-parrafo);
}