/* ================================================================
   Vconexion — Design Tokens (fuente única)
   Cargar ANTES de main.css y site-refined.css
   ================================================================ */

:root {
    /* ── Marca ─────────────────────────────────────────────────── */
    --clr-primary:          #0D2B5F;
    --clr-primary-dark:     #071A3E;
    --clr-primary-light:    #1A3D7A;
    --clr-blue-mid:         #1A56A8;

    /* Acento suave — legible, no chillón */
    --clr-accent:           #0891A5;
    --clr-accent-dark:      #067085;
    --clr-accent-light:     #B8E4EE;
    --clr-accent-on-dark:   #A8DFEB;
    --clr-accent-soft:      rgba(8, 145, 165, 0.08);
    --clr-accent-ring:      rgba(8, 145, 165, 0.12);

    /* ── Neutros cálidos ───────────────────────────────────────── */
    --clr-white:            #FFFFFF;
    --clr-bg:               #FAFAF8;
    --clr-bg-alt:           #F3F2EF;
    --clr-bg-dark:          #071A3E;
    --clr-text:             #1C1A17;
    --clr-text-muted:       #78736A;
    --clr-text-light:       #A09B92;
    --clr-border:           #E6E4DF;
    --clr-border-dark:      rgba(255, 255, 255, 0.14);

    /* ── Semánticos ────────────────────────────────────────────── */
    --clr-success:          #2D6A4F;
    --clr-error:            #B91C1C;
    --clr-warning:          #B45309;

    /* ── Fondos decorativos ────────────────────────────────────── */
    --grad-hero:            #071A3E;
    --grad-accent:          #0891A5;
    --grad-card:            linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    --grad-shine:           linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.07) 50%, transparent 60%);

    /* ── Tipografía ────────────────────────────────────────────── */
    --font-display:         'Sora', system-ui, sans-serif;
    --font-body:            'Nunito Sans', system-ui, sans-serif;
    --font-mono:            var(--font-display);

    /* Escala fija (portal + sitio público) */
    --text-xs:              0.75rem;
    --text-sm:              0.875rem;
    --text-base:            1rem;
    --text-lg:              1.25rem;
    --text-xl:              1.5rem;
    --text-2xl:             2rem;
    --text-3xl:             3rem;
    --text-4xl:             2.25rem;
    --text-5xl:             3rem;
    --text-hero:            clamp(2rem, 5vw, 3rem);

    /* ── Interlineado ──────────────────────────────────────────── */
    --leading-tight:        1.2;
    --leading-snug:         1.35;
    --leading-normal:       1.6;
    --leading-relaxed:      1.7;
    --leading-loose:        1.8;

    /* ── Espaciado ─────────────────────────────────────────────── */
    --sp-1:                 0.25rem;
    --sp-2:                 0.5rem;
    --sp-3:                 0.75rem;
    --sp-4:                 1rem;
    --sp-5:                 1.25rem;
    --sp-6:                 1.5rem;
    --sp-8:                 2rem;
    --sp-10:                2.5rem;
    --sp-12:                3rem;
    --sp-16:                4rem;
    --sp-20:                5rem;
    --sp-24:                6rem;
    --sp-section:           clamp(4rem, 9vw, 8rem);

    /* ── Radios contenidos ─────────────────────────────────────── */
    --radius-sm:            4px;
    --radius-md:            6px;
    --radius-lg:            8px;
    --radius-xl:            12px;
    --radius-2xl:           12px;
    --radius-pill:          9999px;

    /* ── Sombras funcionales ───────────────────────────────────── */
    --shadow-sm:            0 1px 2px rgba(28, 26, 23, 0.04);
    --shadow-md:            0 2px 8px rgba(28, 26, 23, 0.06);
    --shadow-lg:            0 4px 16px rgba(28, 26, 23, 0.08);
    --shadow-xl:            0 8px 24px rgba(28, 26, 23, 0.10);
    --shadow-glow:          none;
    --shadow-card:          var(--shadow-md);
    --shadow-dark:          0 8px 32px rgba(0, 0, 0, 0.35);

    /* ── Transiciones ──────────────────────────────────────────── */
    --ease-fast:            cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce:          cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:             cubic-bezier(0, 0, 0.2, 1);
    --t-fast:               0.15s var(--ease-fast);
    --t-base:               0.25s var(--ease-fast);
    --t-slow:               0.4s var(--ease-fast);
    --t-entry:              0.6s var(--ease-out);

    /* ── Layout ────────────────────────────────────────────────── */
    --container-max:        1280px;
    --container-pad:        clamp(1rem, 5vw, 2rem);
    --navbar-h:             70px;
}