/**
 * Design Tokens - Moreval & Asociados
 * Variables globales CSS con soporte para temas Dark & Light intercalados,
 * patrones visuales y bordes con gradientes.
 */

:root {
    /* ─── PALETA DARK ──────────────────────────────────── */
    --mv-bg-dark-900: #05080C;
    --mv-bg-dark-800: #070B10;
    --mv-bg-dark-700: #0A1118;
    --mv-bg-dark-card: #0F1824;
    --mv-bg-dark-card-hover: #152234;

    /* ─── PALETA LIGHT ─────────────────────────────────── */
    --mv-bg-light-100: #FFFFFF;
    --mv-bg-light-200: #F8FAFC;
    --mv-bg-light-300: #F1F5F9;
    --mv-bg-light-card: #FFFFFF;
    --mv-bg-light-card-hover: #F8FAFC;

    /* Acentos */
    --mv-color-primary: #C62828;
    --mv-color-primary-hover: #E53935;
    --mv-color-primary-glow: rgba(198, 40, 40, 0.35);
    
    --mv-color-gold: #C5A880;
    --mv-color-gold-light: #E2CCA8;
    --mv-color-gold-glow: rgba(197, 168, 128, 0.25);

    --mv-color-success: #10B981;
    --mv-color-success-bg: rgba(16, 185, 129, 0.12);
    --mv-color-whatsapp: #25D366;
    --mv-color-whatsapp-hover: #128C7E;

    /* Textos Dark Mode */
    --mv-text-heading: #FFFFFF;
    --mv-text-main: #F1F5F9;
    --mv-text-muted: #94A3B8;
    --mv-text-subtle: #64748B;

    /* Textos Light Mode */
    --mv-text-light-heading: #0F172A;
    --mv-text-light-main: #334155;
    --mv-text-light-muted: #64748B;
    --mv-text-light-subtle: #94A3B8;

    /* Bordes */
    --mv-border-light: rgba(255, 255, 255, 0.08);
    --mv-border-subtle: rgba(255, 255, 255, 0.05);
    --mv-border-hover: rgba(255, 255, 255, 0.2);
    --mv-border-gold: rgba(197, 168, 128, 0.3);
    --mv-border-red: rgba(198, 40, 40, 0.4);

    --mv-border-light-mode: rgba(15, 23, 42, 0.08);
    --mv-border-light-hover: rgba(15, 23, 42, 0.18);

    /* ─── TIPOGRAFÍA Y CLAMP RESPONSIVE ────────────────── */
    --mv-font-display: 'Cinzel', serif;
    --mv-font-heading: 'Plus Jakarta Sans', sans-serif;
    --mv-font-body: 'Inter', sans-serif;

    --mv-fs-hero: clamp(2.35rem, 5.5vw, 4.2rem);
    --mv-fs-h2: clamp(1.85rem, 3.8vw, 2.85rem);
    --mv-fs-h3: clamp(1.35rem, 2.6vw, 2.1rem);
    --mv-fs-h4: clamp(1.15rem, 1.8vw, 1.4rem);
    --mv-fs-body: clamp(0.95rem, 1.1vw, 1.05rem);
    --mv-fs-small: clamp(0.8rem, 0.9vw, 0.88rem);
    --mv-fs-tiny: 0.75rem;

    /* ─── ESPACIADOS Y LAYOUT ──────────────────────────── */
    --mv-container-max: 1240px;
    --mv-container-padding: clamp(1.25rem, 3vw, 2.5rem);
    --mv-section-spacing: clamp(5rem, 8vw, 8rem);
    --mv-section-spacing-sm: clamp(3rem, 5vw, 4.5rem);

    /* Radios */
    --mv-radius-sm: 8px;
    --mv-radius-md: 14px;
    --mv-radius-lg: 20px;
    --mv-radius-full: 9999px;

    /* Transiciones */
    --mv-transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --mv-transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --mv-transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);

    /* Sombras */
    --mv-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --mv-shadow-md: 0 10px 25px rgba(0, 0, 0, 0.45);
    --mv-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.6);
    --mv-shadow-light-md: 0 10px 30px rgba(15, 23, 42, 0.08);
    --mv-shadow-light-lg: 0 20px 45px rgba(15, 23, 42, 0.12);
    --mv-shadow-glow-red: 0 0 30px rgba(198, 40, 40, 0.35);
    --mv-shadow-glow-gold: 0 0 30px rgba(197, 168, 128, 0.3);
}