/* ========================================
   CSS VARIABLES — MIGA CLUB v3
   Identidad: Argentina — Celeste, Blanco y Oro
   ======================================== */

:root {
    /* ─── Paleta principal ─── */
    --color-bg:             #ffffff;
    --color-background:     var(--color-bg);  /* alias — usar --color-bg */
    --color-primary:        #1B3A6B;        /* Navy argentino — reemplaza el negro */
    --color-accent:         #74ACDF;        /* Celeste bandera */
    --color-accent-hover:   #5A9BCE;        /* Celeste oscuro */
    --color-accent-light:   #E8F4FC;        /* Celeste muy suave para fondos */
    --color-accent-dark:    #2D6CA8;        /* Celeste profundo */

    /* ─── Dorado Sol de Mayo (detalles) ─── */
    --color-gold:           #D4A617;        /* Solo decoración / fondos / dorado sobre navy. NO usar como texto sobre blanco: 2.27:1 (falla AA) */
    --color-gold-hover:     #B8890A;
    --color-gold-light:     #FEF3CC;
    --color-gold-dark:      #8A6500;        /* Dorado para TEXTO sobre fondo claro: 5.33:1 (cumple AA) */
    --color-gold-text:      #8A6500;        /* Alias semántico: texto dorado accesible */

    /* ─── Texto ─── */
    --color-text:           #1B3A6B;
    --color-text-secondary: #3D5A87;
    --color-text-light:     #3E6A96;        /* WCAG AA sobre blanco (ratio 4.6:1) — era #7A9CBF (2.86:1) */
    --text-white:           #ffffff;

    /* ─── Neutros ─── */
    --color-white:          #ffffff;
    --color-gray-50:        #f7fafd;
    --color-gray-100:       #eef4fa;
    --color-gray-200:       #d8e8f5;
    --color-gray-300:       #b8d0e8;
    --color-gray-600:       #3d6a96;

    /* ─── Bordes — una sola fuente de verdad ─── */
    --color-border:         #1B3A6B;   /* borde oscuro (navy) */
    --color-border-light:   #C8E0F4;   /* borde suave (celeste claro) */

    /* ─── Fondos semánticos ─── */
    --bg-primary:           #ffffff;
    --bg-secondary:         #eef4fa;
    --bg-dark:              #1B3A6B;
    --bg-overlay:           rgba(27, 58, 107, 0.6);

    /* ─── Semánticos ─── */
    --color-success:        #22c55e;
    --color-error:          #ef4444;
    --color-warning:        #f59e0b;
    --color-info:           #3b82f6;

    /* ─── Tipografía ─── */
    --font-display:         'Josefin Sans', 'Arial Black', Impact, sans-serif;
    --font-body:            'DM Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-primary:         var(--font-body);
    --font-heading:         'Josefin Sans', 'DM Sans', sans-serif;

    /* ─── Tamaños fluidos ─── */
    --text-xs:              clamp(0.7rem,  0.68rem + 0.08vw, 0.75rem);
    --text-sm:              clamp(0.8rem,  0.77rem + 0.13vw, 0.875rem);
    --text-base:            clamp(0.9375rem, 0.91rem + 0.11vw, 1rem);
    --text-lg:              clamp(1.0625rem, 1.04rem + 0.11vw, 1.125rem);
    --text-xl:              clamp(1.15rem, 1.12rem + 0.17vw, 1.25rem);
    --text-2xl:             clamp(1.35rem, 1.3rem  + 0.26vw, 1.5rem);
    --text-3xl:             clamp(1.6rem,  1.5rem  + 0.48vw, 1.875rem);
    --text-4xl:             clamp(1.9rem,  1.7rem  + 0.61vw, 2.25rem);
    --text-5xl:             clamp(2.25rem, 2rem    + 1.28vw, 3rem);
    --text-6xl:             clamp(2.75rem, 2.5rem  + 1.7vw,  3.75rem);

    /* ─── Pesos ─── */
    --font-light:           300;
    --font-normal:          400;
    --font-medium:          500;
    --font-semibold:        600;
    --font-bold:            700;

    /* ─── Tracking ─── */
    --tracking-tight:       -0.025em;
    --tracking-normal:      0em;
    --tracking-wide:        0.05em;
    --tracking-wider:       0.1em;
    --tracking-widest:      0.2em;

    /* ─── Leading ─── */
    --leading-none:         1;
    --leading-tight:        1.15;
    --leading-snug:         1.35;
    --leading-normal:       1.5;
    --leading-relaxed:      1.65;
    /* ─── Espaciado ─── */
    --spacing-1:    0.25rem;
    --spacing-2:    0.5rem;
    --spacing-3:    0.75rem;
    --spacing-4:    1rem;
    --spacing-5:    1.25rem;
    --spacing-6:    1.5rem;
    --spacing-8:    2rem;
    --spacing-10:   2.5rem;
    --spacing-12:   3rem;
    --spacing-14:   3.5rem;   /* ordenado entre 12 y 16 */
    --spacing-16:   4rem;
    --spacing-20:   5rem;
    --spacing-24:   6rem;
    --spacing-xl:   2.75rem;  /* 44px en rem — consistente con la escala */

    /* ─── Radios ─── */

    --radius-sm:    2px;
    --radius-md:    4px;
    --radius-lg:    8px;
    --radius-xl:    14px;
    --radius-2xl:   20px;
    --radius-full:  9999px;

    /* ─── Sombras ─── */
    --shadow-sm:    0 1px 2px 0 rgba(0,0,0,0.06);
    --shadow-md:    0 4px 8px -1px rgba(0,0,0,0.09);
    --shadow-lg:    0 10px 15px -3px rgba(0,0,0,0.08);
    --shadow-xl:    0 20px 25px -5px rgba(0,0,0,0.08);
    --shadow-2xl:   0 25px 50px -12px rgba(0,0,0,0.15);

    /* ─── Sombra offset editorial (dorado Sol de Mayo) ─── */
    --shadow-offset:        4px 4px 0 var(--color-gold);
    --shadow-offset-dark:   4px 4px 0 var(--color-primary);

    /* ─── Transiciones ─── */
    --transition-fast:  150ms ease;
    --transition-base:  200ms ease;
    --transition-slow:  400ms ease;

    /* ─── Z-Index — higher value = closer to user ─── */
    --z-dropdown:       1000;
    --z-sticky:        1020;
    --z-fixed:          1030;
    --z-modal-backdrop: 1040;
    --z-modal:          1050;
    --z-popover:        1060;
    --z-tooltip:        1070;

    /* ─── Contenedores ─── */
    --container-max-width:  1400px;
    --container-sm:         640px;
    --container-md:         768px;
    --container-lg:         1024px;
    --container-xl:         1280px;
    --container-2xl:        1536px;

    /* ─── Header ─── */
    --header-height:        52px;
    --header-height-mobile: 48px;
    --top-bar-height:       26px;

    /* ─── Hero viewport offsets (header + top-bar) ─── */
    --hero-offset:          calc(var(--header-height) + var(--top-bar-height));
    --hero-offset-mobile:   calc(var(--header-height-mobile) + var(--top-bar-height));

    /* ─── Sin noise texture (editorial = clean) ─── */
    --noise-texture:        none;

    /* ─── WhatsApp ─── */
    --color-whatsapp:       #25D366;
    --color-whatsapp-dark:  #128C7E;
    --color-whatsapp-light: #dcf8c6;

    /* ─── Cubic easing ─── */
    --transition-cubic:     cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Safe area (mobile notch support) ─── */
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-top:    env(safe-area-inset-top, 0px);
}