/* [cafeteria] webfonts.
   Satoshi — primary brand typeface (display, headings, body, labels).
   Provided as a variable font (weights 300–900).
   Roboto Mono — data / caption / mono voice (pulled from Google Fonts).
   SF UI Display (iOS surfaces) falls back to the Apple system stack. */

@font-face {
  font-family: "Satoshi Variable";
  src: url("../assets/fonts/Satoshi-Variable.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi Variable";
  src: url("../assets/fonts/Satoshi-VariableItalic.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* Convenience alias used across components/specimens. */
@font-face {
  font-family: "Satoshi";
  src: url("../assets/fonts/Satoshi-Variable.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&display=swap");

/* Serif accent — italic emphasis words inside Satoshi headlines
   ("customer", "pulse", "be brilliant"). The brand file uses Baskerville;
   Baskervville (a faithful Baskerville revival) is the closest webfont substitute. */
@import url("https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&display=swap");

/* Permanent Marker — DISPLAY ONLY. The hand-drawn tape title on Tape Builder
   cassettes/pages (e.g. "disney"). Never for UI, body, labels or captions. */
@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap");