/* =====================================================================================
   Vorlage 14 Modegeschäft, neue Fassung · Farben, Schrift, Ecken, Abstände
   Brücke zur Web-App: --bg --surface --text --muted --accent --on-accent --border --radius --schrift
   heißen wie in 00_Projektstart/starter-webapp/styles.css.
   Umfärben: --accent, --accent-tief, --accent-hell. Die Stofffarben (--loden … --seide) gehören zum
   Mantel und zu den Mustern in index.html (m-… und z-…); wer sie ändert, ändert auch dort die Füllungen.
   Schrift: Archivo mit Breitenachse. Überschriften und Marken breit (--breit), Fließtext normal.
   ===================================================================================== */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --schrift: "Archivo", "Segoe UI", system-ui, sans-serif;
  --breit: 118%;            /* Überschriften (Archivo-Achse wdth) */
  --sehr-breit: 125%;       /* Marken, Wortmarke, Schrittnummern */

  --bg: #faf9f6;            /* Kreideweiß */
  --surface: #ffffff;       /* Karten */
  --surface-2: #f0ebe2;     /* Schnittmusterpapier: abgesetzte Flächen, Bogen hinter der Büste */
  --text: #16171a;          /* Tinte, 17,0 : 1 auf --bg */
  --muted: #595d64;         /* leiser Text, 6,3 : 1 auf --bg, 5,6 : 1 auf --surface-2 */
  --accent: #c8361a;        /* die eine Farbe, Zinnober. Weiß darauf 5,3 : 1, auf --bg 5,0 : 1; auf --surface-2 nur 4,4 : 1, dort keine Schrift in --accent */
  --on-accent: #ffffff;
  --accent-tief: #a82b17;   /* Knopf beim Überfahren, Weiß darauf 7,0 : 1, als Schrift auf --surface-2 5,9 : 1 */
  --accent-hell: #fbe9e4;   /* Hauch Zinnober: Bildrahmen (Fläche, nie Schrift) */
  --border: #e3ddd2;
  --error: #b42318;

  --dunkel: #18201c;        /* Kontakt und Fuß, fast schwarzes Moos */
  --dunkel-text: #eef0ec;   /* 14,5 : 1 auf --dunkel */
  --dunkel-leise: #a9b3ad;  /* 7,7 : 1 auf --dunkel */
  --dunkel-link: #f2a48f;   /* Zinnober hell, 8,3 : 1 auf --dunkel */

  /* Stoffe: Farbe des Tupfers in der Stoffwahl, gleich wie der Grund der Muster */
  --loden: #4f5d46;
  --tweed: #7b6a56;
  --leinen: #d8ccb6;
  --seide: #263453;

  /* Schneiderei-Bühne */
  --papier: #f3efe7;        /* Grund hinter dem Mantel */
  --raster: rgba(22, 23, 26, .06);   /* Zentimeterraster */
  --massband: #ecd27a;

  --radius: 20px;
  --radius-gross: 32px;
  --radius-klein: 12px;

  --breite: 1240px;
  --abstand: clamp(84px, 10vw, 140px);
  --kopf: 64px;
}