/**
 * 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
       ======================================== */

   --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;
   --color-negro: #232323;
   /* Negro del legacy (no puro) */
   --color-blanco: #ffffff;

   /* 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 */
}