/* ============================================
   YIA | VARIABLES GLOBALES
   Paleta extraída del logo oficial YIA
   ============================================ */

:root {
    /* === COLORES BASE (extraídos del logo) === */
    --color-navy: #030a1a;           /* Fondo del logo - base */
    --color-navy-alt: #0a1529;       /* Elevación leve */
    --color-navy-elevado: #122038;   /* Cards, superficies */
    --color-navy-borde: #1a2c4d;

    --color-azul: #173567;           /* Y / I del logo */
    --color-azul-claro: #2a4d8a;
    --color-azul-oscuro: #0f2547;

    --color-cyan: #097c91;           /* A del logo - ACENTO PRINCIPAL */
    --color-cyan-claro: #0fa3bd;
    --color-cyan-brillante: #1bc4dd;
    --color-cyan-oscuro: #065968;

    --color-blanco: #ffffff;
    --color-blanco-suave: #f1f5f9;

    /* === GRISES (tono azulado para coherencia) === */
    --color-gris-100: #e2e8f0;
    --color-gris-300: #94a3b8;
    --color-gris-500: #64748b;
    --color-gris-700: #334155;
    --color-gris-900: #1e293b;

    /* === SEMÁNTICA === */
    --color-bg: var(--color-navy);
    --color-bg-alt: var(--color-navy-alt);
    --color-bg-elevado: var(--color-navy-elevado);
    --color-texto: var(--color-blanco);
    --color-texto-suave: var(--color-gris-300);
    --color-acento: var(--color-cyan);
    --color-acento-claro: var(--color-cyan-claro);
    --color-acento-oscuro: var(--color-cyan-oscuro);
    --color-secundario: var(--color-azul);
    --color-borde: rgba(9, 124, 145, 0.25);
    --color-borde-suave: rgba(42, 77, 138, 0.2);

    /* RGB para rgba() dinámicos */
    --rgb-cyan: 9, 124, 145;
    --rgb-azul: 23, 53, 103;

    /* === ALIASES (compatibilidad) === */
    --color-teal: var(--color-cyan);
    --color-teal-claro: var(--color-cyan-claro);
    --color-teal-oscuro: var(--color-cyan-oscuro);
    --color-negro: var(--color-navy);
    --color-negro-suave: var(--color-navy-alt);
    --color-negro-elevado: var(--color-navy-elevado);

    /* === GRADIENTES OFICIALES YIA === */
    /* Azul profundo → Cyan (replica la transición del logo) */
    --gradiente-yia: linear-gradient(135deg, #173567 0%, #097c91 100%);
    --gradiente-yia-suave: linear-gradient(135deg, rgba(23, 53, 103, 0.15) 0%, rgba(9, 124, 145, 0.15) 100%);
    --gradiente-cyan: linear-gradient(135deg, #097c91 0%, #0fa3bd 100%);
    --gradiente-azul: linear-gradient(135deg, #0f2547 0%, #173567 100%);
    --gradiente-hero: linear-gradient(135deg, #030a1a 0%, #0a1529 50%, #122038 100%);

    /* === TIPOGRAFÍA === */
    --fuente-principal: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fuente-display: 'Inter', sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.5rem;
    --fs-4xl: 3.5rem;
    --fs-5xl: 4.5rem;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;

    /* === ESPACIADO === */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 8rem;

    /* === CONTENEDOR === */
    --container-max: 1280px;
    --container-padding: 1.5rem;

    /* === BORDER RADIUS === */
    --radio-sm: 4px;
    --radio-md: 8px;
    --radio-lg: 12px;
    --radio-xl: 20px;
    --radio-full: 999px;

    /* === SOMBRAS === */
    --sombra-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --sombra-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --sombra-lg: 0 20px 50px rgba(0, 0, 0, 0.6);
    --sombra-acento: 0 10px 40px rgba(9, 124, 145, 0.35);
    --sombra-azul: 0 10px 40px rgba(23, 53, 103, 0.45);

    /* === TRANSICIONES === */
    --transicion-rapida: 150ms ease;
    --transicion-media: 300ms ease;
    --transicion-lenta: 500ms ease;

    /* === Z-INDEX === */
    --z-header: 100;
    --z-modal: 500;
    --z-tooltip: 1000;

    /* === ALTURAS === */
    --altura-header: 80px;
}