/**
 * 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 EXACTOS extraídos de D:\sitios\villatotoral.local\theme\estilos\generales\template_formato-basico.css */
    --color-primary: #449946;        /* Verde oscuro institucional */
    --color-secondary: #a8d85b;      /* Verde claro */
    --color-success: #1d4c1d;        /* Verde muy oscuro/terciario */
    --color-primary-hover: #367a38;   /* Verde oscuro hover (primary más oscuro) */
    
    /* Colores base */
    --color-negro: #232323;          /* Negro del legacy (no puro) */
    --color-blanco: #ffffff;
    
    /* Escala de grises (exactos del legacy) */
    --color-gris: #f0f4f6;           /* Fondo secciones */
    --color-grisclaro: #E8E8E8;      /* Bordes suaves */
    --color-grisoscuro: #8C8C8C;     /* Textos secundarios */
    --color-parrafo: #777777;        /* Texto párrafos */
    
    /* Colores adicionales del legacy */
    --color-lila: #61257f;           /* Lila */
    --color-rosa: #df1784;           /* Rosa */
    
    /* ========================================
       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;
    --btn-primary-bg-hover: var(--color-primary-hover);
    --btn-primary-border-hover: var(--color-primary-hover);
    
    /* 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
   ======================================== */

/**
 * Escala base para Villa del Totoral
 * El legacy usa 62.5% para convertir 1rem = 10px
 * Sobrescribe limpiamente el 100% de _base (sin necesidad de !important)
 */
html {
    font-size: 62.5%; /* 1rem = 10px */
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base); /* 1.5rem = 15px */
    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);
}

/* ========================================
   CONTAINERS - OVERRIDE BOOTSTRAP
   ======================================== */

/**
 * Override de anchos de .container para replicar legacy
 * Legacy: max-width fijo de 1110px
 * Bootstrap 5.3.2 default: 1320px, 1140px, 960px, 720px, 540px (según breakpoint)
 */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    max-width: 1110px !important;
}