/* ══════════════════════════════════════════════════════════════
   VARIABLES CSS — Paleta Institucional Oficial
   I Congreso Internacional de Psicología · Universidad de Pamplona
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Colores primarios (logo 25 años) ─── */
    --color-navy:        #193264;
    --color-red:         #963232;
    --color-gold:        #E1C864;
    --color-gold-light:  #FAE17D;
    --color-navy-deep:   #19324B;
    --color-navy-dark:   #001932;

    /* ─── Colores del afiche (complementarios) ─── */
    --color-cyan:        #4DB7FF;
    --color-teal:        #12B8B0;
    --color-violet:      #8A5CFF;
    --color-magenta:     #C86BFF;

    /* ─── Neutros ─── */
    --color-white:       #FFFFFF;
    --color-off-white:   #F4F7FB;
    --color-text:        #1F2937;
    --color-text-muted:  #6B7280;
    --color-border:      #E5E7EB;
    --color-success:     #12B8B0;
    --color-error:       #963232;
    --color-warning:     #E1C864;
    --color-info:        #193264;
    --color-whatsapp:    #25D366;

    /* ─── Gradientes institucionales ─── */
    --gradient-hero:     linear-gradient(135deg, #001932 0%, #193264 40%, #19324B 70%, #0B1A3B 100%);
    --gradient-gold:     linear-gradient(90deg, #E1C864 0%, #FAE17D 50%, #C8960C 100%);
    --gradient-accent:   linear-gradient(135deg, #193264 0%, #8A5CFF 100%);
    --gradient-warm:     linear-gradient(135deg, #193264 0%, #963232 100%);
    --gradient-psi:      linear-gradient(135deg, #4DB7FF 0%, #8A5CFF 50%, #C86BFF 100%);

    /* ─── Tipografía ─── */
    --font-display:  'Playfair Display', Georgia, serif;
    --font-heading:  'Montserrat', sans-serif;
    --font-body:     'Inter', system-ui, sans-serif;
    --font-mono:     'JetBrains Mono', monospace;

    /* ─── Tamaños tipográficos (mobile-first) ─── */
    --fs-xs:    0.75rem;    /* 12px */
    --fs-sm:    0.875rem;   /* 14px */
    --fs-base:  1rem;       /* 16px */
    --fs-md:    1.125rem;   /* 18px */
    --fs-lg:    1.25rem;    /* 20px */
    --fs-xl:    1.5rem;     /* 24px */
    --fs-2xl:   2rem;       /* 32px */
    --fs-3xl:   2.5rem;     /* 40px */
    --fs-4xl:   3rem;       /* 48px */
    --fs-5xl:   3.75rem;    /* 60px */

    /* ─── Espaciado ─── */
    --space-1:  0.25rem;    /* 4px */
    --space-2:  0.5rem;     /* 8px */
    --space-3:  0.75rem;    /* 12px */
    --space-4:  1rem;       /* 16px */
    --space-5:  1.25rem;    /* 20px */
    --space-6:  1.5rem;     /* 24px */
    --space-8:  2rem;       /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */

    /* ─── Layout ─── */
    --max-width:     1280px;
    --max-width-sm:  960px;
    --max-width-xs:  640px;
    --navbar-height: 80px;
    --topbar-height: 40px;

    /* ─── Bordes y radios ─── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-2xl: 24px;
    --radius-full: 50%;

    /* ─── Sombras ─── */
    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-gold: 0 4px 20px rgba(225, 200, 100, 0.3);
    --shadow-navy: 0 4px 20px rgba(25, 50, 100, 0.2);

    /* ─── Transiciones ─── */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-smooth: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Z-index scale ─── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-navbar:    300;
    --z-modal:     400;
    --z-toast:     500;
    --z-tooltip:   600;
    --z-cursor:    700;
    --z-preloader: 900;
}

/* ─── Dark sections ─── */
.section--dark {
    --color-text:       #FFFFFF;
    --color-text-muted: rgba(255, 255, 255, 0.7);
    --color-border:     rgba(255, 255, 255, 0.15);
}