/* =============================================================================
   HABLAME · DESIGN TOKENS
   Variables base del sistema de diseno. Importadas primero, antes de Bootstrap
   y de los componentes custom. Sirven como unica fuente de verdad para color,
   tipografia, espaciado, radios, sombras y motion.
   ============================================================================= */

:root {
    /* -------- Marca principal -------- */
    --hb-blue:        #0099FF;   /* Color institucional */
    --hb-blue-50:     #E6F4FF;
    --hb-blue-100:    #CCE9FF;
    --hb-blue-200:    #99D3FF;
    --hb-blue-300:    #66BDFF;
    --hb-blue-400:    #33A8FF;
    --hb-blue-500:    #0099FF;
    --hb-blue-600:    #007ACC;   /* Hover de botones primarios */
    --hb-blue-700:    #005A99;
    --hb-blue-800:    #003A66;   /* Titulares grandes en fondos claros */
    --hb-blue-900:    #001E3C;   /* Inicio gradiente hero */
    --hb-cyan:        #00D4FF;   /* Companero de gradiente y micro-acentos */

    /* -------- Neutros -------- */
    --ink:            #0E1116;
    --slate-700:      #334155;
    --slate-500:      #64748B;
    --slate-400:      #94A3B8;
    --slate-300:      #CBD5E1;
    --slate-200:      #E2E8F0;
    --slate-100:      #F1F5F9;
    --surface:        #FFFFFF;
    --bg:             #F8FAFC;

    /* -------- Secciones oscuras -------- */
    --midnight:       #0A1628;
    --deep-navy:      #001E3C;

    /* -------- Gradientes -------- */
    --gradient-hero:  linear-gradient(135deg, #001E3C 0%, #0066B3 60%, #0099FF 100%);
    --gradient-cta:   linear-gradient(90deg, #0099FF 0%, #00D4FF 100%);
    --gradient-soft:  linear-gradient(180deg, #F8FAFC 0%, #E6F4FF 100%);

    /* -------- Semanticos -------- */
    --success:        #10B981;
    --warning:        #F59E0B;
    --error:          #EF4444;
    --info:           var(--hb-blue);

    /* -------- Tipografia -------- */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Space Grotesk', var(--font-sans);
    --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;

    --fs-xs:        0.75rem;     /* 12 */
    --fs-sm:        0.875rem;    /* 14 */
    --fs-base:      1rem;        /* 16 */
    --fs-md:        1.125rem;    /* 18 */
    --fs-lg:        1.25rem;     /* 20 */
    --fs-xl:        1.5rem;      /* 24 */
    --fs-2xl:       1.875rem;    /* 30 */
    --fs-3xl:       2.25rem;     /* 36 */
    --fs-4xl:       3rem;        /* 48 */
    --fs-5xl:       3.75rem;     /* 60 */
    --fs-6xl:       4.5rem;      /* 72 */

    --lh-tight:     1.15;
    --lh-snug:      1.3;
    --lh-normal:    1.5;
    --lh-relaxed:   1.7;

    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

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

    /* -------- Radios -------- */
    --radius-sm:   4px;
    --radius:      8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    /* -------- Sombras -------- */
    --shadow-xs:  0 1px 2px rgba(14, 17, 22, 0.05);
    --shadow-sm:  0 1px 3px rgba(14, 17, 22, 0.08), 0 1px 2px rgba(14, 17, 22, 0.04);
    --shadow:     0 4px 12px rgba(14, 17, 22, 0.06), 0 1px 3px rgba(14, 17, 22, 0.04);
    --shadow-md:  0 10px 25px rgba(14, 17, 22, 0.08), 0 2px 6px rgba(14, 17, 22, 0.04);
    --shadow-lg:  0 20px 40px rgba(14, 17, 22, 0.12), 0 4px 10px rgba(14, 17, 22, 0.06);
    --shadow-xl:  0 30px 60px rgba(14, 17, 22, 0.18);
    --shadow-blue: 0 10px 30px rgba(0, 153, 255, 0.25);
    --shadow-blue-lg: 0 20px 50px rgba(0, 153, 255, 0.35);

    /* -------- Layout -------- */
    --container-max: 1280px;
    --header-height: 76px;

    /* -------- Motion -------- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:   150ms;
    --duration:        250ms;
    --duration-slow:   500ms;

    /* -------- Z-index -------- */
    --z-base:      1;
    --z-sticky:    100;
    --z-dropdown:  1000;
    --z-modal:     2000;
    --z-toast:     3000;
}

/* Override de variables Bootstrap para alinearlas a la marca */
:root {
    --bs-primary:        var(--hb-blue);
    --bs-primary-rgb:    0, 153, 255;
    --bs-link-color:     var(--hb-blue);
    --bs-link-hover-color: var(--hb-blue-700);
    --bs-body-font-family: var(--font-sans);
    --bs-body-color:     var(--ink);
    --bs-body-bg:        var(--surface);
    --bs-border-radius:  var(--radius);
    --bs-border-radius-lg: var(--radius-md);
}