/**
 * ============================================
 * VARIABLES CSS - VISIT XOCHIMILCO
 * ============================================
 *
 * Este archivo contiene todas las variables de diseño
 * Edita estos valores para cambiar colores, tipografías, etc.
 */

:root {
    /* ========================================
       COLORES DE MARCA
       ======================================== */

    /* Color principal - Rosa Mexicano */
    --color-principal: #E91E63;
    --color-principal-oscuro: #C2185B;
    --color-principal-claro: #F48FB1;
    --color-principal-muy-claro: #FCE4EC;
    --color-principal-hover: #c2185b;

    /* Colores secundarios - Complementarios */
    --color-secundario: #00BCD4;          /* Cyan/Turquesa */
    --color-secundario-oscuro: #0097A7;
    --color-secundario-claro: #80DEEA;

    /* Color acento - Naranja */
    --color-acento: #FF6F00;
    --color-acento-oscuro: #E65100;
    --color-acento-claro: #FFB74D;

    /* Colores terciarios - Verdes y amarillos */
    --color-verde: #8BC34A;
    --color-verde-oscuro: #689F38;
    --color-amarillo: #FDD835;
    --color-amarillo-oscuro: #F9A825;

    /* Colores tradicionales de Xochimilco */
    --color-magenta: #D81B60;
    --color-azul: #1E88E5;
    --color-morado: #8E24AA;

    /* ========================================
       COLORES NEUTRALES
       ======================================== */
    --color-blanco: #FFFFFF;
    --color-negro: #000000;
    --color-gris-muy-oscuro: #212121;
    --color-gris-oscuro: #424242;
    --color-gris: #757575;
    --color-gris-claro: #BDBDBD;
    --color-gris-muy-claro: #E0E0E0;
    --color-gris-fondo: #F5F5F5;
    --color-gris-fondo-claro: #FAFAFA;


    /* ========================================
       COLORES DE ESTADO
       ======================================== */
    --color-exito: #4CAF50;
    --color-exito-claro: #C8E6C9;
    --color-advertencia: #FF9800;
    --color-advertencia-claro: #FFE0B2;
    --color-error: #F44336;
    --color-error-claro: #FFCDD2;
    --color-info: #2196F3;
    --color-info-claro: #BBDEFB;

    /* ========================================
       TIPOGRAFÍA
       ======================================== */

    /* Familias de fuente */
    --fuente-principal: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fuente-secundaria: 'Montserrat', sans-serif;
    --fuente-titulo: 'Bebas Neue', 'Arial Black', sans-serif;
    --fuente-monoespaciada: 'Courier New', monospace;

    /* Tamaños de fuente */
    --texto-xs: 0.75rem;      /* 12px */
    --texto-sm: 0.875rem;     /* 14px */
    --texto-base: 1rem;       /* 16px */
    --texto-lg: 1.125rem;     /* 18px */
    --texto-xl: 1.25rem;      /* 20px */
    --texto-2xl: 1.5rem;      /* 24px */
    --texto-3xl: 1.875rem;    /* 30px */
    --texto-4xl: 2.25rem;     /* 36px */
    --texto-5xl: 3rem;        /* 48px */
    --texto-6xl: 3.75rem;     /* 60px */

    /* Pesos de fuente */
    --peso-ligero: 300;
    --peso-normal: 400;
    --peso-medio: 500;
    --peso-semibold: 600;
    --peso-bold: 700;
    --peso-extrabold: 800;

    /* ========================================
       ESPACIADO
       ======================================== */
    --espacio-xs: 0.25rem;    /* 4px */
    --espacio-sm: 0.5rem;     /* 8px */
    --espacio-md: 1rem;       /* 16px */
    --espacio-lg: 1.5rem;     /* 24px */
    --espacio-xl: 2rem;       /* 32px */
    --espacio-2xl: 2.5rem;    /* 40px */
    --espacio-3xl: 3rem;      /* 48px */
    --espacio-4xl: 4rem;      /* 64px */
    --espacio-5xl: 5rem;      /* 80px */

    /* ========================================
       BORDES Y SOMBRAS
       ======================================== */

    /* Radio de borde */
    --radio-sm: 0.25rem;      /* 4px */
    --radio-md: 0.5rem;       /* 8px */
    --radio-lg: 0.75rem;      /* 12px */
    --radio-xl: 1rem;         /* 16px */
    --radio-2xl: 1.5rem;      /* 24px */
    --radio-completo: 9999px;

    /* Sombras */
    --sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sombra-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sombra-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --sombra-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --sombra-interior: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Sombras de color (para efectos especiales) */
    --sombra-rosa: 0 10px 30px -5px rgba(233, 30, 99, 0.3);
    --sombra-azul: 0 10px 30px -5px rgba(0, 188, 212, 0.3);
    --sombra-naranja: 0 10px 30px -5px rgba(255, 111, 0, 0.3);

    /* ========================================
       TRANSICIONES Y ANIMACIONES
       ======================================== */
    --transicion-rapida: 0.15s ease-in-out;
    --transicion-normal: 0.3s ease-in-out;
    --transicion-lenta: 0.5s ease-in-out;

    /* Curvas de animación */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ========================================
       DISEÑO RESPONSIVO (Breakpoints)
       ======================================== */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ========================================
       CONTENEDORES
       ======================================== */
    --ancho-contenedor-sm: 640px;
    --ancho-contenedor-md: 768px;
    --ancho-contenedor-lg: 1024px;
    --ancho-contenedor-xl: 1280px;
    --ancho-contenedor-2xl: 1536px;

    /* ========================================
       Z-INDEX (Capas)
       ======================================== */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ========================================
       HEADER Y FOOTER
       ======================================== */
    --altura-header: 80px;
    --altura-header-mobile: 60px;
    --altura-footer: auto;

    /* ========================================
       GRADIENTES
       ======================================== */
    --gradiente-principal: linear-gradient(135deg, var(--color-principal) 0%, var(--color-principal-oscuro) 100%);
    --gradiente-secundario: linear-gradient(135deg, var(--color-secundario) 0%, var(--color-secundario-oscuro) 100%);
    --gradiente-acento: linear-gradient(135deg, var(--color-acento) 0%, var(--color-acento-oscuro) 100%);
    --gradiente-multicolor: linear-gradient(135deg,
        var(--color-principal) 0%,
        var(--color-magenta) 25%,
        var(--color-morado) 50%,
        var(--color-azul) 75%,
        var(--color-secundario) 100%);
    --gradiente-xochimilco: linear-gradient(135deg,
        var(--color-principal) 0%,
        var(--color-naranja) 50%,
        var(--color-amarillo) 100%);

    /* Overlay oscuro para imágenes */
    --overlay-oscuro: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    --overlay-gradiente: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}

/* ========================================
   MODO OSCURO (OPCIONAL)
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Si deseas implementar modo oscuro más adelante,
           puedes redefinir las variables aquí */
    }
}

/* ========================================
   UTILIDADES PARA FACILITAR EDICIÓN
   ======================================== */

/* Clase helper para usar el color principal */
.color-principal {
    color: var(--color-principal) !important;
}

.bg-principal {
    background-color: var(--color-principal) !important;
}

.border-principal {
    border-color: var(--color-principal) !important;
}

/* Clase helper para usar el color secundario */
.color-secundario {
    color: var(--color-secundario) !important;
}

.bg-secundario {
    background-color: var(--color-secundario) !important;
}

/* Clase helper para usar el color acento */
.color-acento {
    color: var(--color-acento) !important;
}

.bg-acento {
    background-color: var(--color-acento) !important;
}

/* ========================================
   NOTAS PARA EDICIÓN
   ======================================== */
/*
CÓMO EDITAR COLORES:
1. Cambia los valores hexadecimales en la sección "COLORES DE MARCA"
2. Los colores se aplicarán automáticamente en todo el sitio
3. Para oscurecer un color: usa una herramienta como https://www.colorhexa.com/
4. Para aclarar un color: aumenta el valor del código hexadecimal

CÓMO EDITAR TIPOGRAFÍA:
1. Cambia --fuente-principal para la fuente del cuerpo del texto
2. Cambia --fuente-titulo para los títulos
3. Ajusta los tamaños en la sección "Tamaños de fuente"

CÓMO EDITAR ESPACIADO:
1. Modifica los valores en la sección "ESPACIADO"
2. Usa múltiplos de 4px o 8px para mantener consistencia

¡IMPORTANTE!
- No elimines las variables, solo cambia sus valores
- Mantén las unidades (rem, px, etc.)
- Prueba los cambios en diferentes navegadores
*/