/*
 * Brand stylesheet for the kit demo pages, which run on other origins (see
 * docs/KITS.md, "Live demos"). It gives them this site's typefaces and display
 * treatment: Archivo, condensed and heavy, for headlines; Inter for text.
 * Keep the values in step with packages/ui/src/v2/ui.ts.
 *
 * The fonts are fetched cross-origin, so next.config.ts serves /brand/fonts
 * with Access-Control-Allow-Origin.
 */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(./fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./fonts/inter-latin-400-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./fonts/inter-latin-600-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./fonts/inter-latin-700-normal.woff2) format('woff2');
}

:root {
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Archivo Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --display-weight: 800;
  --display-stretch: 78%;
  --display-tracking: -0.015em;
  --heading-weight: 700;
  --heading-stretch: 88%;
}