/* Design-Tokens, SPEC 5.4. Farbkombinationen für Text ausschließlich nach 5.5. */

@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-300-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ephesis";
  src: url("/fonts/ephesis-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --salbei:       #739291; /* Markenfarbe, große Flächen, Titel */
  --salbei-tief:  #4f6b6a; /* Fläche für Text in creme */
  --salbei-tinte: #3d5554; /* Text auf creme und sand, Footer */
  --salbei-hauch: #dfe6e5; /* Nebentext auf salbei-tief */
  --linie:        #8ca4a4; /* Zierlinien, nie Schrift */
  --creme:        #f5f3f1; /* Papiergrund */
  --sand:         #cdc3b8; /* Akzentfläche (Stempel), nie Schrift */

  --font-script: "Ephesis", "Brush Script MT", cursive;
  --font-sans:   "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 32px;
  --space-4: 64px;

  --radius-sm: 4px;
  --radius-full: 9999px;

  /* Typografie-Skala nach SPEC 5.4, am Handy nie unter 24px (Script). */
  --type-display: clamp(40px, 11vw, 88px);
  --type-section: clamp(36px, 7vw, 60px);
  --type-dish: 22px;
  --type-flavor: 17px;
  --type-description: 18px;
  --type-badge: 15px;
  --type-body: clamp(18px, 1.2vw + 15px, 22px);

  --breite: 1200px;
}