/* Token facade + cascade layer order. The ONE stylesheet index.html links for
 * tokens; it @imports the token modules. New token → the matching module in
 * css/tokens/ (no extra <link> needed).
 *
 * Layer order is declared once, here: base < components < utilities
 * (utilities win at equal specificity). Tokens and @font-face stay UNLAYERED
 * so the custom properties are global. Every other CSS file wraps its rules in
 * a layer — an unlayered rule would beat every layered rule regardless of
 * specificity. See DESIGN.md → "Cascade layers". */

@layer base, components, utilities;

/* colors first (motion consumes --color-shadow-*), then the rest. */
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/spacing.css');
@import url('./tokens/motion.css');
@import url('./tokens/scale.css');

/* === Self-hosted fonts (SIL OFL 1.1, see /fonts/OFL.txt) ===
   Poppins (agilist.ch house font, latin subset from @fontsource/poppins),
   static cuts 400/500/600/700 + italic 400. index.html preloads
   Poppins-400.woff2 (body text) — keep the preload href in sync. */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}