/* =====================================================
   TOKENS.CSS — Sistema de Diseño
   Hilton Bogotá Corferias · Web v1.1
   @bibrandco
   ===================================================== */

@font-face {
  font-family: 'Hilton Serif';
  src: url('../fonts/HiltonSerif-Regular.woff2') format('woff2'),
       url('../fonts/Hilton-SerifRegular.ttf')   format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Hilton Sans';
  src: url('../fonts/HiltonSans-Regular.woff2') format('woff2'),
       url('../fonts/HiltonSans_Rg.ttf')        format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ── COLORES ── */
  --c-navy:        #00284f;           /* Hilton navy oficial */
  --c-navy-80:     rgba(0,40,79,.80);
  --c-taupe:       #b9b3ab;           /* fondo principal de la landing        */
  --c-taupe-60:    rgba(185,179,171,.60);
  --c-gold:        #C9A96E;           /* acento dorado                         */
  --c-gold-light:  #E8D5B0;
  --c-white:       #FFFFFF;
  --c-white-70:    rgba(255,255,255,.70);
  --c-white-40:    rgba(255,255,255,.40);
  --c-white-15:    rgba(255,255,255,.15);
  --c-brown-dark:  #4a4947;           /* texto opcional sobre taupe            */
  --c-brown-mid:   #8a837a;
  --c-brown-light: #aba198;
  --c-divider:     rgba(255,255,255,.25); /* líneas divisorias sobre taupe    */
  --c-overlay:     rgba(18,18,16,.52);

  /* ── TIPOGRAFÍA ── */
  --f-serif: 'Hilton Serif', Georgia, serif;
  --f-sans:  'Hilton Sans', 'Helvetica Neue', Arial, system-ui, sans-serif;

  --t-xs:   clamp(.68rem, 1.0vw, .75rem);
  --t-sm:   clamp(.80rem, 1.2vw, .875rem);
  --t-base: clamp(.93rem, 1.4vw, 1rem);
  --t-lg:   clamp(1rem,   1.6vw, 1.125rem);
  --t-xl:   clamp(1.1rem, 2.0vw, 1.25rem);
  --t-2xl:  clamp(1.25rem,2.5vw, 1.5rem);
  --t-3xl:  clamp(1.5rem, 3.0vw, 1.875rem);
  --t-4xl:  clamp(1.8rem, 3.5vw, 2.25rem);
  --t-5xl:  clamp(2.2rem, 5.0vw, 3.5rem);
  --t-hero: clamp(2.8rem, 6.5vw, 5.25rem);

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.72;

  --ls-tight:   -0.03em;
  --ls-normal:   0em;
  --ls-wide:     0.07em;
  --ls-wider:    0.13em;
  --ls-widest:   0.22em;

  /* ── ESPACIADO ── */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.25rem;--s-6:1.5rem; --s-8:2rem;   --s-10:2.5rem;
  --s-12:3rem;  --s-16:4rem;  --s-20:5rem;  --s-24:6rem;

  /* ── LAYOUT ── */
  --container:  1280px;
  --nav-h:      80px;
  --section-py: clamp(4rem, 10vw, 8rem);

  /* ── BORDES & TRAZO GLOBAL ── */
  --stroke:    1.5px;               /* grosor único para todos los trazos   */
  --b-line:    1.5px solid rgba(255,255,255,.28); /* divisores y marcos    */
  --b-ui:      1.5px solid rgba(255,255,255,.50); /* botones e iconos UI   */
  --b-gold:    1.5px solid var(--c-gold);
  --radius-sm: 4px;

  /* ══════════════════════════════════════
     SISTEMA DE ANIMACIONES
     Cambia aquí para afectar toda la web.
     ══════════════════════════════════════ */
  --ease-smooth:  cubic-bezier(.40,.00,.20,1);
  --ease-out:     cubic-bezier(.00,.00,.20,1);
  --ease-in:      cubic-bezier(.40,.00,1.00,1);

  --dur-fast:    200ms;
  --dur-mid:     380ms;
  --dur-slow:    650ms;
  --dur-hero:    900ms;

  --del-1: 80ms; --del-2:160ms; --del-3:240ms;
  --del-4:320ms; --del-5:400ms;

  --reveal-y:    28px;
  --reveal-dur:  var(--dur-slow);
  --reveal-ease: var(--ease-out);

  --hero-interval: 6000ms;
  --hero-fade:      800ms;

  --carousel-interval: 5000ms;
  --carousel-fade:      600ms;

  --accordion-dur:  var(--dur-mid);
  --accordion-ease: var(--ease-smooth);

  --nav-scroll-dur: var(--dur-mid);
}