/* BeFun Variables — design system tokens */

:root {
  /* COLORES */
  --bf-yellow:      #ffe102;
  --bf-black:       #0e0e0e;
  --bf-white:       #f1f1f1;
  --bf-pure-white:  #ffffff;
  --bf-yellow-dark: #e6c900;
  --bf-yellow-pale: #fff5a8;
  --bf-ink:         #000000;
  --bf-smoke:       #1a1a1a;
  --bf-graphite:    #2a2a2a;
  --bf-ash:         #8c8c8c;
  --bf-fog:         #d9d9d9;
  --bf-cream:       #faf9f4;

  /* SEMÁNTICOS */
  --bg-primary:    var(--bf-white);
  --bg-inverse:    var(--bf-black);
  --bg-accent:     var(--bf-yellow);
  --bg-surface:    var(--bf-pure-white);
  --bg-surface-dk: var(--bf-smoke);
  --fg-primary:    var(--bf-black);
  --fg-inverse:    var(--bf-white);
  --fg-muted:      var(--bf-ash);
  --fg-on-yellow:  var(--bf-black);
  --fg-on-black:   var(--bf-white);
  --fg-link:       var(--bf-black);

  /* BORDES */
  --border-hair:    #0e0e0e;
  --border-hair-dk: rgba(255,255,255,0.14);
  --border-soft:    rgba(14,14,14,0.1);

  /* FUENTES — Adobe Fonts (Typekit uzv1tfa) */
  --font-display:            roc-grotesk, 'Helvetica Neue', Arial, sans-serif;
  --font-display-condensed:  roc-grotesk-condensed, roc-grotesk, sans-serif;
  --font-display-compressed: roc-grotesk-compressed, roc-grotesk, sans-serif;
  --font-display-wide:       roc-grotesk-wide, roc-grotesk, sans-serif;
  --font-body:               roc-grotesk, 'Helvetica Neue', Arial, sans-serif;

  /* ESCALA TIPOGRÁFICA */
  --fs-hero:    clamp(64px, 10vw, 160px);
  --fs-display: clamp(48px, 7vw, 96px);
  --fs-h1:      clamp(40px, 5vw, 72px);
  --fs-h2:      clamp(32px, 4vw, 56px);
  --fs-h3:      clamp(24px, 3vw, 36px);
  --fs-h4:      22px;
  --fs-lead:    20px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;
  --fs-label:   11px;

  /* PESOS */
  --fw-thin:    100;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-xbold:   800;
  --fw-heavy:   850;
  --fw-black:   900;

  /* INTERLINEADO */
  --lh-tight:   0.95;
  --lh-display: 1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.45;
  --lh-loose:   1.65;

  /* TRACKING */
  --ls-tight:   -0.02em;
  --ls-display: -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-wider:   0.12em;

  /* ESPACIADO (8pt base) */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;
  --sp-4:  16px;  --sp-5:  24px;  --sp-6:  32px;
  --sp-7:  48px;  --sp-8:  64px;  --sp-9:  96px;
  --sp-10: 128px;

  /* RADII */
  --r-0:    0px;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-card: 16px;
  --r-pill: 999px;

  /* SOMBRAS */
  --shadow-hard:         4px 4px 0 0 var(--bf-smoke);
  --shadow-hard-lg:      8px 8px 0 0 var(--bf-smoke);
  --shadow-hard-yellow:  6px 6px 0 0 var(--bf-yellow);
  --shadow-inset-hair:   inset 0 0 0 2px var(--bf-black);
  --shadow-soft:         0 8px 32px rgba(14,14,14,0.12);

  /* MOTION */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-pop:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  120ms;
  --dur-med:   220ms;
  --dur-slow:  400ms;

  /* LAYOUT */
  --container-max: 1360px;
  --container-pad: 32px;
  --nav-h: 64px;

  /* MOUSE TRACKING (actualizado por JS) */
  --mouse-x: 0.5;
  --mouse-y: 0.5;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
  background: var(--bg-primary);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}