/* ==========================================================================
   Futbolito type system
   Source of truth: futbolito/"Futbolito Mobile UI Branding.pdf"

   Every headline in that document is horizontally stretched in Illustrator.
   Three width values are used across the whole system (read straight out of
   the PDF content stream -- Tf size is 1, so the Tm matrix carries both size
   and width: hscale = a / d):

       41.83%   KC Tallboy Inked  -- display headlines           (condensed)
       168.99%  KC Funk Wagon     -- labels / wordmark           (expanded)
       181.27%  KC Tallboy Inked  -- form fields, "5 v 5"        (expanded)
       181.27%  KC Funk Wagon     -- small nav                   (expanded)

   Vertical scale is 100% everywhere. Tracking is -45/1000 em everywhere
   except the wordmark (-55) and PLAY (-65).

   The widths are baked into dedicated font files rather than applied with
   `transform: scaleX()`. Illustrator's horizontal scale *is* a geometric
   x-scale of the outlines, so a baked font reproduces it exactly -- and
   unlike a transform it leaves the element's own box alone. That matters
   here: the register fields are lime pills with a 1.5px border and a 999px
   radius, and in the artwork only the text inside them is stretched, not the
   pill. A transform would smear the border and the radius too, and would
   leave every headline reserving 2.4x its painted width.

   Regenerate with: python3 scripts/build-stretched-fonts.py
   ========================================================================== */

/* --- unstretched originals (kept for body copy / anything at 100%) ------- */
@font-face {
  font-family: 'KCFunkWagon';
  src: url('/assets/fonts/KCFunkWagon.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'KCTallboyInked';
  src: url('/assets/fonts/KCTallboy-Inked.otf') format('opentype');
  font-display: swap;
}

/* --- baked width variants ----------------------------------------------- */
@font-face {
  font-family: 'KCTallboyInked Cond';   /* 41.828% */
  src: url('/assets/fonts/KCTallboy-Inked-Cond42.woff2') format('woff2'),
       url('/assets/fonts/KCTallboy-Inked-Cond42.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'KCTallboyInked Wide';   /* 181.270% */
  src: url('/assets/fonts/KCTallboy-Inked-Wide181.woff2') format('woff2'),
       url('/assets/fonts/KCTallboy-Inked-Wide181.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'KCFunkWagon Wide';      /* 168.992% */
  src: url('/assets/fonts/KCFunkWagon-Wide169.woff2') format('woff2'),
       url('/assets/fonts/KCFunkWagon-Wide169.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'KCFunkWagon XWide';     /* 181.270% */
  src: url('/assets/fonts/KCFunkWagon-Wide181.woff2') format('woff2'),
       url('/assets/fonts/KCFunkWagon-Wide181.otf') format('opentype');
  font-display: swap;
}

/* --- tracking -----------------------------------------------------------
   Illustrator tracking is applied in em *before* the horizontal scale (in
   the PDF, Tc sits in unscaled text space and is then multiplied by the text
   matrix). Because the width is now baked into the glyphs, CSS letter-spacing
   is no longer scaled for us -- so each value below is the artwork's tracking
   pre-multiplied by that font's width.
   ------------------------------------------------------------------------ */
:root {
  /* -45/1000 em x 0.41828 */
  --track-display: -0.0188em;
  /* -45/1000 em x 1.81270 */
  --track-field: -0.0816em;
  /* -45/1000 em x 1.68992 */
  --track-label: -0.0760em;
  /* -55/1000 em x 1.68992 */
  --track-wordmark: -0.0929em;
  /* -45/1000 em x 1.81270 */
  --track-nav: -0.0816em;
  /* -65/1000 em x 1.81270 */
  --track-nav-tight: -0.1178em;
}

/* --- roles ---------------------------------------------------------------
   Named after how the artwork uses them, so markup reads as the design does.
   ------------------------------------------------------------------------ */

/* REGISTER, SHOP, OCTOBER 2026, PENAL POWER, DRAG TO AIM, 2-0, FIRST RELEASE */
.t-display {
  font-family: 'KCTallboyInked Cond', 'KCTallboyInked', serif;
  letter-spacing: var(--track-display);
}

/* "5 v 5", and the register field labels / placeholders */
.t-field {
  font-family: 'KCTallboyInked Wide', 'KCTallboyInked', serif;
  letter-spacing: var(--track-field);
}

/* NORTHIE / E360 / PARILLAS, UNDER 10-18, OPEN AGE, MUSIC, FOOD */
.t-label {
  font-family: 'KCFunkWagon Wide', 'KCFunkWagon', sans-serif;
  letter-spacing: var(--track-label);
}

/* FUTBOLITO.PRO */
.t-wordmark {
  font-family: 'KCFunkWagon Wide', 'KCFunkWagon', sans-serif;
  letter-spacing: var(--track-wordmark);
}

/* top nav: LOGIN / SPANISH */
.t-nav {
  font-family: 'KCFunkWagon XWide', 'KCFunkWagon', sans-serif;
  letter-spacing: var(--track-nav);
}

/* top nav: PLAY (tracked tighter than its neighbours in the artwork) */
.t-nav-tight {
  font-family: 'KCFunkWagon XWide', 'KCFunkWagon', sans-serif;
  letter-spacing: var(--track-nav-tight);
}