/*
 * Design-Tokens „Putt happens“ (siehe /styleguide/).
 * Alle Farben, Radien und Abstände der Seite kommen von hier; Komponenten-CSS verwendet nur var(--pe-…).
 * Neue Hex-Werte gehören in diese Datei, nicht in style.css.
 */

/* Schriften: self-hosted (DSGVO), Dateien per scripts/fonts-holen.sh nach static/fonts/ holen */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Markenfarben */
  --pe-petrol: #003B40;             /* Marke, Text, Rahmen, Auswahlring */
  --pe-orange: #FF7A00;             /* Aktionen und Highlights der Marke; nie als Auswahl, nie als Text auf Creme */
  --pe-creme: #F7F7F2;              /* Seitenhintergrund und helle Flächen */
  --pe-planflaeche: #DCE8E5;        /* einziger Hintergrund hinter Plänen, Bällen und Diagrammen (Sockel) */
  --pe-text-gedaempft: #44666A;     /* Sekundärtext auf hellem Grund */
  --pe-text-auf-petrol: #E4EBE9;    /* Fließtext auf Petrol */
  --pe-weiss: #FFFFFF;              /* Karten auf Creme */

  /* Abgeleitete Töne (Petrol auf Creme gemischt): feine Linien und sanfte Flächen */
  --pe-linie: #C5D1CE;              /* Trennlinien, gestrichelte Ränder (Petrol ca. 20 %) */
  --pe-flaeche-sanft: #EBEEE9;      /* zurückgenommene Flächen, z. B. Kartenköpfe (Petrol ca. 5 %) */

  /* Rückfallwerte für Daten */
  --pe-ball-unbekannt: #898781;     /* Ball ohne Farbangabe */
  --pe-fehler: #B3261E;             /* Fehlermeldung (Kontrast auf Creme/Weiß > 6:1) */
  --pe-ok: #1B6E3A;                 /* Erfolgsmeldung */

  /* Schrift */
  --pe-schrift-titel: "Bricolage Grotesque", system-ui, sans-serif;
  --pe-schrift-text: "Figtree", system-ui, sans-serif;
  --pe-schrift-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Form */
  --pe-radius-karte: 28px;
  --pe-radius-gross: 40px;          /* große Flächen, Hero */
  --pe-radius-innen: 18px;          /* Planfläche in der Plan-Karte */
  --pe-radius-pille: 999px;         /* Buttons und Tags */
  --pe-rahmen: 3px;                 /* Rahmenstärke Karten (2–3 px) */
  --pe-rahmen-fein: 2px;            /* Buttons, Ball-Chips */
  --pe-versatz-orange: 0 10px 0 var(--pe-orange);   /* Akzent-Offset-Schatten für hervorgehobene Karten */

  /* Raster */
  --pe-container: 1200px;
  --pe-rand: 40px;                  /* seitlicher Abstand, mobil 16 px */
  --pe-touch: 44px;                 /* Mindestgröße von Touch-Zielen */
}

@media (max-width: 640px) {
  :root { --pe-rand: 16px; }
}