/* ==========================================================================
   HOLA CONNECTIONS — DESIGN TOKENS
   --------------------------------------------------------------------------
   Única fuente de verdad para color, tipografía, espaciado, radios y sombras.
   Extraído del design system original (_ds/.../tokens/*.css) sin alterar
   ningún valor. No escribir reglas de componentes en este archivo.
   ========================================================================== */

:root {

  /* ======================================================================
     1. COLOR — MARCA: AMARILLO (calidez, energía, bienvenida)
     ====================================================================== */
  --yellow-50:  #FFFBEB;
  --yellow-100: #FFF4C7;
  --yellow-200: #FFEC9E;
  --yellow-300: #FFE577;
  --yellow-400: #FFDE59;  /* Amarillo primario de marca (logo) */
  --yellow-500: #FCD12E;  /* Amarillo vivo (firma de correo) */
  --yellow-600: #E8B500;
  --yellow-700: #B98C00;
  --yellow-800: #7C5E00;

  /* ======================================================================
     2. COLOR — MARCA: AZUL (confianza, claridad, profesionalismo)
     ====================================================================== */
  --blue-50:  #EDF1FF;
  --blue-100: #DBE3FF;
  --blue-200: #B9C8FF;
  --blue-300: #8CA3FF;
  --blue-400: #4E6DFF;
  --blue-500: #073FFF;  /* Azul primario de marca (burbuja del logo) */
  --blue-600: #0731D6;
  --blue-700: #0827A8;
  --blue-800: #0B1E66;  /* Navy — secciones profundas y footer */
  --blue-900: #071340;

  /* ======================================================================
     3. COLOR — TINTA Y NEUTROS
     ====================================================================== */
  --ink:      #0A0A0B;  /* Negro del logo */
  --gray-900: #14161C;
  --gray-800: #22252E;
  --gray-700: #3A3F4C;
  --gray-600: #565C6B;
  --gray-500: #767D8C;
  --gray-400: #9BA1AE;
  --gray-300: #C4C8D1;
  --gray-200: #E2E5EA;
  --gray-100: #F0F2F5;
  --gray-50:  #F7F8FA;
  --white:    #FFFFFF;
  --cream:    #FFFCF2;  /* Blanco cálido, combina con el amarillo */

  /* ======================================================================
     4. COLOR — ESTADOS
     ====================================================================== */
  --success:    #178A50;  --success-bg: #E3F5EC;  --success-fg: #0C5231;
  --warning:    #B36B00;  --warning-bg: #FFF1D6;  --warning-fg: #7A4A00;
  --danger:     #C42B2B;  --danger-bg:  #FBE6E6;  --danger-fg:  #841C1C;
  --info:       #0731D6;  --info-bg:    #EDF1FF;  --info-fg:    #0827A8;

  /* ======================================================================
     5. ALIAS SEMÁNTICOS
     ====================================================================== */

  /* Superficies */
  --surface-page:    var(--white);
  --surface-subtle:  var(--gray-50);
  --surface-muted:   var(--gray-100);
  --surface-card:    var(--white);
  --surface-cream:   var(--cream);
  --surface-brand:   var(--yellow-400);
  --surface-accent:  var(--blue-500);
  --surface-inverse: var(--blue-800);

  /* Texto — SIEMPRE negro sobre amarillo, blanco sobre azul (accesibilidad) */
  --text-strong:     var(--ink);
  --text-body:       var(--gray-800);
  --text-muted:      var(--gray-600);
  --text-subtle:     var(--gray-500);
  --text-inverse:    var(--white);
  --text-on-brand:   var(--ink);
  --text-on-accent:  var(--white);
  --text-link:       var(--blue-600);
  --text-link-hover: var(--blue-700);

  /* Bordes */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--yellow-400);
  --border-focus:   var(--blue-500);

  /* Botones */
  --btn-primary-bg:       var(--yellow-400);
  --btn-primary-bg-hover: var(--yellow-500);
  --btn-primary-fg:       var(--ink);
  --btn-accent-bg:        var(--blue-500);
  --btn-accent-bg-hover:  var(--blue-600);
  --btn-accent-fg:        var(--white);
  --btn-ghost-fg:         var(--blue-600);

  /* Anillo de foco — cumple WCAG focus-visible */
  --ring: 0 0 0 3px var(--blue-200), 0 0 0 1.5px var(--blue-500);

  /* ======================================================================
     6. TIPOGRAFÍA
     --------------------------------------------------------------------
     Display/títulos: Poppins · Cuerpo/UI: Mulish
     Script: Caveat (decorativa, uso puntual) · Mono: IBM Plex Mono
     ====================================================================== */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Caveat', 'Segoe Script', cursive;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Pesos */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

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

  /* Interlineado */
  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Espaciado entre letras */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;

  /* ======================================================================
     7. ESPACIADO Y LAYOUT (grid base de 4px)
     ====================================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container-max:    1200px;
  --container-narrow: 760px;
  --container-wide:   1360px;
  --gutter:           24px;

  /* ======================================================================
     8. RADIOS
     ====================================================================== */
  --radius-xs:     6px;
  --radius-sm:     10px;
  --radius-md:     14px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-2xl:    36px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  --radius-button: var(--radius-pill);
  --radius-input:  var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-chip:   var(--radius-pill);

  /* ======================================================================
     9. ELEVACIÓN Y MOVIMIENTO
     ====================================================================== */
  --shadow-xs: 0 1px 2px rgba(16, 20, 30, 0.06);
  --shadow-sm: 0 2px 6px rgba(16, 20, 30, 0.08);
  --shadow-md: 0 6px 18px rgba(16, 20, 30, 0.10);
  --shadow-lg: 0 14px 40px rgba(16, 20, 30, 0.12);
  --shadow-xl: 0 28px 70px rgba(16, 20, 30, 0.16);

  /* Resplandores de marca — reservados para CTAs primarios */
  --shadow-brand:  0 12px 30px rgba(252, 209, 46, 0.38);
  --shadow-accent: 0 12px 30px rgba(7, 63, 255, 0.28);

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-reveal:   cubic-bezier(0.22, 1, 0.36, 1);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
  --dur-slower: 500ms;

  /* ======================================================================
     10. TONO DE PÁGINA — "cream" (el tono por defecto del sitio)
     --------------------------------------------------------------------
     El original aplicaba estos dos valores por JavaScript al montar el
     componente. Aquí quedan fijos en CSS para evitar el parpadeo inicial.
     ====================================================================== */
  --page-bg:        #FFFCF2;  /* Fondo general de la página */
  --surface-subtle: #F7F1E1;  /* Bandas y paneles cálidos (sobrescribe gray-50) */
}