/* FCH Gestaltungsreferenz, Version 2.0 - 07.10.2026.
 * Farb- und Schrifttokens plus optionale visuelle Klassen.
 * Dimensionen und Layout bestimmt das jeweilige Produkt.
 * Originale Schriftdateien unter ./fonts/ ergänzen.
 * Die Schnitte sind hier auf reguläre CSS-Gewichte abgebildet.
 */
@font-face {
  font-family: "FCH Factoria";
  src: url("./fonts/Factoria-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FCH Noway";
  src: url("./fonts/noway-regular-webfont.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FCH Noway";
  src: url("./fonts/noway-medium-webfont.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "FCH Noway";
  src: url("./fonts/noway-bold-webfont.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
:root {
  --fch-blue: #0080c9;
  --fch-red: #e52721;
  --fch-navy: #143a77;
  --fch-white: #ffffff;
  --fch-text: #333333;
  --fch-muted: #8d8d8d;
  --fch-gray: #dddddd;
  --fch-surface: #efefef;
  --fch-font-display: "FCH Factoria", Georgia, serif;
  --fch-font-body: "FCH Noway", Arial, sans-serif;
}
.fch-theme {
  font-family: var(--fch-font-body);
  color: var(--fch-text);
  background-color: var(--fch-white);
}
.fch-display, .fch-action-label {
  font-family: var(--fch-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: normal;
}
.fch-body { font-family: var(--fch-font-body); font-weight: 400; }
.fch-label { font-family: var(--fch-font-body); font-weight: 500; }
.fch-emphasis { font-family: var(--fch-font-body); font-weight: 700; }
.fch-natural-case { text-transform: none; }
.fch-brand-text { color: var(--fch-blue); }
.fch-surface { background-color: var(--fch-surface); }
/* Optionale Pinseloptik. Die Anwendung steuert die Komponentengeometrie. */
.fch-brush {
  background-color: transparent;
  background-image: url("./images/brush-button-blue.svg");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--fch-white);
}
.fch-brush--red { background-image: url("./images/brush-button-red.svg"); }
.fch-brush--white {
  background-image: url("./images/brush-button-white.svg");
  color: var(--fch-blue);
}