/* =========================================================
   Archivo: assets/css/02-variables.css
   Proyecto: INEM Kennedy Child Theme

   Función:
   - Definir la fuente única de variables globales del sistema visual.
   - Centralizar colores, tipografías, contenedores, espaciados,
     radios, sombras, transiciones y capas.
   - Evitar valores repetidos en componentes como header, footer,
     cards, grids y secciones internas.
========================================================= */

:root {

    /* =====================================================
       1. Tipografía
    ===================================================== */

    --inem-font: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;


    /* =====================================================
       2. Colores institucionales
    ===================================================== */

    --inem-primary: #0b3a63;
    --inem-primary-dark: #062a46;

    --inem-secondary: #0f6d3b;
    --inem-secondary-dark: #08492b;

    --inem-accent: #f4c430;


    /* Compatibilidad con archivos existentes */
    --inem-blue: var(--inem-primary);
    --inem-green: var(--inem-secondary);
    --inem-green-dark: var(--inem-secondary-dark);
    --inem-yellow: var(--inem-accent);


    /* =====================================================
       3. Colores neutros
    ===================================================== */

    --inem-white: #ffffff;

    --inem-gray-50: #f8fafc;
    --inem-gray-100: #eef2f5;
    --inem-gray-200: #e2e8f0;
    --inem-gray-300: #d5dde5;
    --inem-gray-500: #74808c;
    --inem-gray-600: #5f6b76;
    --inem-gray-800: #2f3a45;
    --inem-gray-900: #1f2933;


    /* =====================================================
       4. Superficies y bordes
    ===================================================== */

    --inem-page-bg: #f3f6f8;
    --inem-surface: #ffffff;

    --inem-border: rgba(15, 23, 42, .10);
    --inem-border-soft: rgba(15, 23, 42, .08);
    --inem-border-strong: rgba(15, 23, 42, .18);


    /* =====================================================
       5. Degradados institucionales
    ===================================================== */

    --inem-gradient-main:
        linear-gradient(
            135deg,
            var(--inem-primary-dark) 0%,
            var(--inem-primary) 45%,
            var(--inem-secondary) 100%
        );

    --inem-gradient-footer:
        linear-gradient(
            135deg,
            #07385c 0%,
            #075368 48%,
            var(--inem-secondary) 100%
        );

    --inem-footer-gradient: var(--inem-gradient-footer);


    /* =====================================================
       6. Contenedores
    ===================================================== */

    --inem-container: 1280px;
    --inem-container-wide: 1440px;
    --inem-container-narrow: 960px;

    --inem-container-padding-desktop: 48px;
    --inem-container-padding-tablet: 32px;
    --inem-container-padding-mobile: 20px;


    /* =====================================================
       7. Espaciados
    ===================================================== */

    --inem-space-2xs: 4px;
    --inem-space-xs: 8px;
    --inem-space-sm: 12px;
    --inem-space-md: 16px;
    --inem-space-lg: 24px;
    --inem-space-xl: 32px;
    --inem-space-2xl: 48px;
    --inem-space-3xl: 64px;
    --inem-space-4xl: 96px;


    /* =====================================================
       8. Border radius
    ===================================================== */

    --inem-radius-xs: 8px;
    --inem-radius-sm: 14px;
    --inem-radius-md: 20px;
    --inem-radius-lg: 28px;
    --inem-radius-xl: 36px;
    --inem-radius-xxl: 44px;

    --inem-radius: var(--inem-radius-md);


    /* =====================================================
       9. Sombras
    ===================================================== */

    --inem-shadow-soft: 0 12px 34px rgba(15, 23, 42, .06);
    --inem-shadow-medium: 0 18px 48px rgba(15, 23, 42, .10);
    --inem-shadow-strong: 0 28px 70px rgba(15, 23, 42, .14);

    --inem-shadow: var(--inem-shadow-soft);


    /* =====================================================
       10. Transiciones
    ===================================================== */

    --inem-transition-fast: 160ms ease;
    --inem-transition: 250ms ease;
    --inem-transition-slow: 360ms ease;


    /* =====================================================
       11. Z-index
    ===================================================== */

    --inem-z-header: 100;
    --inem-z-dropdown: 200;
    --inem-z-overlay: 300;
    --inem-z-modal: 400;


    /* =====================================================
       12. Breakpoints de referencia
       Nota: CSS custom properties no funcionan directamente
       dentro de @media en CSS nativo. Se documentan aquí para
       mantener consistencia de diseño.
    ===================================================== */

    --inem-breakpoint-sm: 576px;
    --inem-breakpoint-md: 768px;
    --inem-breakpoint-lg: 1024px;
    --inem-breakpoint-xl: 1280px;
}