/* Ascherl Design-Tokens.
 *
 * Alle Werte sind an www.ascherl.at gemessen (Computed Styles, nicht Augenmass)
 * - siehe docs/discovery.md, Abschnitt 4. Diese Datei ist die einzige Quelle:
 * sie speist die oeffentlichen Seiten, das Backoffice und - als eingebetteter
 * String - das Shadow-DOM des JavaScript-SDK.
 *
 * Drei Eigenheiten, an denen sich entscheidet, ob es nach Ascherl aussieht:
 *   1. Fliesstext ist BLAU, nicht schwarz.
 *   2. Es gibt kein Bold. Ueberschriften laufen auf font-weight 400.
 *   3. Flach und rechteckig: keine Schatten, kein Radius ausser 3px an Buttons.
 */

@font-face {
  font-family: "TWKEverett";
  src: url("/static/fonts/TWKEverett-Regular-web.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TWKEverett";
  src: url("/static/fonts/TWKEverett-Medium-web.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Farben */
  --ac-blau:        #003cd1;
  --ac-blau-80:     rgba(0, 60, 209, .8);
  --ac-blau-55:     rgba(0, 60, 209, .55);
  --ac-blau-28:     rgba(0, 60, 209, .28);
  --ac-blau-12:     rgba(0, 60, 209, .12);
  --ac-blau-06:     rgba(0, 60, 209, .06);
  --ac-rot:         #ff1e23;
  --ac-grund:       #f4f4f4;
  --ac-flaeche:     #ffffff;
  --ac-weiss:       #ffffff;
  --ac-gut:         #0f7a4a;
  /* Dunkler Grund der Lesebühne. Nicht Schwarz, sondern ein sehr tiefes
     Ascherl-Blau: die weißen Katalogseiten treten hervor, und es bleibt
     erkennbar dieselbe Hausfarbe. */
  --ac-tief:        #07132e;
  --ac-tief-hell:   #16244a;
  --ac-warn:        #a8620a;

  /* Typografie */
  --ac-font: "TWKEverett", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ac-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fliessende Groessen. Der Shop rechnet in vw mit festen Werten unterhalb
     567px; clamp() bildet dasselbe Verhalten ab, ohne fuenf Media Queries. */
  --ac-t-xs:   12px;
  --ac-t-s:    14px;
  --ac-t-m:    15px;
  --ac-t-body: clamp(16px, 1.22vw, 20px);
  --ac-t-lead: clamp(18px, 1.5vw, 24px);
  --ac-t-h3:   clamp(19px, 1.6vw, 26px);
  --ac-t-h2:   clamp(28px, 3.6vw, 58px);
  --ac-t-h1:   clamp(30px, 2.9vw, 46px);

  /* Raster */
  --ac-breite:  1640px;
  --ac-gutter:  clamp(16px, 2vw, 32px);
  --ac-radius:  3px;
  --ac-rahmen:  3px;          /* der blaue Rahmen um die ganze Seite */
  --ac-kopf:    72px;

  /* Abstaende */
  --ac-s1: 6px;  --ac-s2: 12px; --ac-s3: 20px;
  --ac-s4: 32px; --ac-s5: 52px; --ac-s6: 80px;
}