/* Layer-Reihenfolge (zentrale Stelle): tokens.css ist unlayered und etabliert
   die Cascade-Reihenfolge für alle nachfolgenden Stylesheets. base < components
   < utilities — utilities gewinnen also bei gleicher Spezifität. */
@layer base, components, utilities;

/* === Token-Module (unlayered, Custom-Properties global) ===
   Aufgeteilt nach Thema. Reihenfolge: colors zuerst (motion/scale konsumieren
   --color-shadow-* / --color-border-focus), dann typography/spacing/motion/scale. */
@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 === */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.var.woff2') format('woff2-variations'),
       url('../fonts/Inter.var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic.var.woff2') format('woff2-variations'),
       url('../fonts/Inter-Italic.var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4.var.woff2') format('woff2-variations'),
       url('../fonts/SourceSerif4.var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4-Italic.var.woff2') format('woff2-variations'),
       url('../fonts/SourceSerif4-Italic.var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}