/* Volkswagen's corporate typefaces.

   VW Head for headlines and key messages, VW Text for body copy and captions,
   which is the split the brand guide sets out. Supplied by the brand in the
   BU Bhandari pack along with permission to use them.

   base.css deliberately keeps no web font in the critical path, because this app
   has to paint for 250 people at once on venue wifi, and that rule still holds:

   - Only Volkswagen loads these, and only the four weights actually used. The
     files are subset to Latin plus the rupee sign, 103KB for the whole set
     against 287KB unsubset.
   - font-display: swap, so type paints immediately in the system stack and
     reflows into VW when the file lands. A guest never waits on a font to read
     what a field is asking for.
   - The system stack stays as the fallback in every rule, so a failed font
     request costs nothing but the brand's typeface. */

@font-face {
  font-family: 'VW Head';
  src: url('/assets/fonts/VWHead-Regular-v1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VW Head';
  src: url('/assets/fonts/VWHead-Bold-v1.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VW Text';
  src: url('/assets/fonts/VWText-Regular-v1.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'VW Text';
  src: url('/assets/fonts/VWText-Bold-v1.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Scoped to the brand, so Skoda pages never request a Volkswagen font. */
:root[data-brand="vw"] body,
:root[data-brand="vw"] input,
:root[data-brand="vw"] select,
:root[data-brand="vw"] textarea,
:root[data-brand="vw"] button {
  font-family: 'VW Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Head is a display face. It is for the headline, the section heads and the one
   next action, not for a form label, which is what VW Text is for. */
:root[data-brand="vw"] h1,
:root[data-brand="vw"] h2,
:root[data-brand="vw"] h3,
:root[data-brand="vw"] .btn,
:root[data-brand="vw"] .brandname,
:root[data-brand="vw"] .markname {
  font-family: 'VW Head', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* VW Head sets tighter than the system stack it replaces, so the headline needs
   its letter-spacing eased back or it closes up. */
:root[data-brand="vw"] h1 { letter-spacing: -.012em; }

/* The guide sets headline and subline leading at 110%. */
:root[data-brand="vw"] h1 { line-height: 1.1; }