/* ============================================================
   Mixturas — Sistema de Diseño (Design Tokens)
   Paleta: navy profundo del logo + gris pizarra + acento ámbar
   ============================================================ */

:root {
    /* --- Marca --- */
    --mx-navy-900: #0a1730;   /* navy más profundo */
    --mx-navy-800: #0e2041;   /* primario del logo */
    --mx-navy-700: #142d5a;
    --mx-navy-600: #1d3f78;
    --mx-navy-500: #2b5296;

    /* --- Acento (calidez del isotipo / construcción) --- */
    --mx-amber-600: #d97706;
    --mx-amber-500: #f59e0b;   /* acento principal */
    --mx-amber-400: #fbbf24;
    --mx-amber-300: #fcd34d;

    /* --- Neutros --- */
    --mx-white: #ffffff;
    --mx-slate-50: #f8fafc;
    --mx-slate-100: #f1f5f9;
    --mx-slate-200: #e2e8f0;
    --mx-slate-300: #cbd5e1;
    --mx-slate-400: #94a3b8;
    --mx-slate-500: #64748b;
    --mx-slate-600: #475569;
    --mx-slate-700: #334155;
    --mx-slate-800: #1e293b;
    --mx-slate-900: #0f172a;

    /* --- Roles semánticos --- */
    --mx-color-primario: var(--mx-navy-800);
    --mx-color-secundario: var(--mx-slate-600);
    --mx-color-acento: var(--mx-amber-500);
    --mx-color-fondo: var(--mx-white);
    --mx-color-fondo-alt: var(--mx-slate-50);
    --mx-color-texto: var(--mx-slate-800);
    --mx-color-texto-suave: var(--mx-slate-500);
    --mx-color-borde: var(--mx-slate-200);

    /* --- Gradientes --- */
    --mx-grad-navy: linear-gradient(135deg, var(--mx-navy-900) 0%, var(--mx-navy-700) 100%);
    --mx-grad-amber: linear-gradient(135deg, var(--mx-amber-600) 0%, var(--mx-amber-400) 100%);
    --mx-grad-overlay: linear-gradient(180deg, rgba(10,23,48,0.35) 0%, rgba(10,23,48,0.82) 100%);

    /* --- Tipografía --- */
    --mx-fuente-titulo: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --mx-fuente-cuerpo: 'Inter', system-ui, -apple-system, sans-serif;

    --mx-fs-xs: 0.78rem;
    --mx-fs-sm: 0.9rem;
    --mx-fs-base: 1rem;
    --mx-fs-lg: 1.15rem;
    --mx-fs-xl: 1.4rem;
    --mx-fs-2xl: 1.85rem;
    --mx-fs-3xl: 2.4rem;
    --mx-fs-4xl: clamp(2.4rem, 5vw, 3.6rem);
    --mx-fs-hero: clamp(2.6rem, 6.5vw, 5rem);

    /* --- Espaciado --- */
    --mx-space-1: 0.25rem;
    --mx-space-2: 0.5rem;
    --mx-space-3: 0.75rem;
    --mx-space-4: 1rem;
    --mx-space-6: 1.5rem;
    --mx-space-8: 2rem;
    --mx-space-12: 3rem;
    --mx-space-16: 4rem;
    --mx-space-20: 5rem;
    --mx-space-24: 6rem;
    --mx-section-y: clamp(4rem, 9vw, 7.5rem);

    /* --- Layout --- */
    --mx-container: 1200px;
    --mx-container-wide: 1400px;
    --mx-header-h: 90px;

    /* --- Radios --- */
    --mx-radius-sm: 6px;
    --mx-radius: 12px;
    --mx-radius-lg: 20px;
    --mx-radius-xl: 28px;
    --mx-radius-full: 9999px;

    /* --- Sombras --- */
    --mx-shadow-sm: 0 1px 3px rgba(15,23,42,0.08);
    --mx-shadow: 0 8px 24px rgba(15,23,42,0.1);
    --mx-shadow-lg: 0 20px 50px -12px rgba(15,23,42,0.22);
    --mx-shadow-amber: 0 12px 30px -8px rgba(245,158,11,0.45);

    /* --- Transiciones --- */
    --mx-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --mx-transition: 0.4s var(--mx-ease);
    --mx-transition-fast: 0.22s var(--mx-ease);
}