/**
 * TEMPLATE BASE - Variables CSS
 * Archivo: /templates/_base/assets/css/variables.css
 * 
 * Variables del template base que pueden ser sobrescritas
 * por templates específicos.
 */

:root {
    /* ========================================
       COLORES INSTITUCIONALES
       ======================================== */
    
    /* Colores principales (se cargan dinámicamente desde BD) */
    --color-primary: #1e3a5f;        /* Azul institucional */
    --color-secondary: #2d6f4d;      /* Verde */
    --color-success: #FD8B4C;        /* Naranja */
    
    /* Variantes de primary */
    --color-primary-light: #2a7ec4;
    --color-primary-dark: #125a96;
    --color-primary-hover: #125a96;
    
    /* Variantes de secondary */
    --color-secondary-light: #4dbd94;
    --color-secondary-dark: #255f45;
    
    /* Estados */
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    
    /* Grises del template */
    --color-text: #333333;
    --color-text-light: #666666;
    --color-text-muted: #999999;
    --color-border: #dee2e6;
    --color-background: #f8f9fa;
    
    /* ========================================
       TIPOGRAFÍA
       ======================================== */
    
    --font-family: 'Nunito Sans', sans-serif;
    --font-family-headings: var(--font-family);
    
    --font-size-base: 1rem;        /* 16px */
    --font-size-h1: 2.5rem;        /* 40px */
    --font-size-h2: 2rem;          /* 32px */
    --font-size-h3: 1.75rem;       /* 28px */
    --font-size-h4: 1.5rem;        /* 24px */
    --font-size-h5: 1.25rem;       /* 20px */
    --font-size-h6: 1rem;          /* 16px */
    
    --line-height-base: 1.5;
    --line-height-headings: 1.2;
    
    /* ========================================
       ESPACIADO ESPECÍFICO DEL TEMPLATE
       ======================================== */
    
    --section-padding: 3rem;
    --component-gap: 2rem;
    --content-max-width: 1200px;
    
    /* ========================================
       COMPONENTES
       ======================================== */
    
    /* Header */
    --header-height: 80px;
    --header-bg: var(--fw-color-white);
    --header-border: 1px solid var(--color-border);
    
    /* Footer */
    --footer-bg: var(--color-primary);
    --footer-color: var(--fw-color-white);
    --footer-padding: 3rem 0;
    
    /* Menú */
    --menu-bg: var(--color-primary);
    --menu-color: var(--fw-color-white);
    --menu-hover-bg: var(--color-primary-hover);
    
    /* Botones */
    --btn-padding: 0.5rem 1.5rem;
    --btn-border-radius: var(--fw-border-radius-md);
    
    /* Cards */
    --card-border-radius: var(--fw-border-radius-lg);
    --card-shadow: var(--fw-shadow-md);
    --card-padding: 1.5rem;
    
    /* ========================================
       TRANSICIONES
       ======================================== */
    
    --transition-hover: var(--fw-transition-fast);
}

/* ========================================
   APLICACIÓN DE ESCALA BASE
   ======================================== */

/**
 * Escala base del template _base
 * Default: 100% = 16px (respeta preferencias del navegador)
 * Los templates específicos pueden sobrescribir este valor
 */
html {
    font-size: 100%; /* = 16px en navegadores estándar */
}