/* ==========================================================================
   notengebung.de – Designsystem „Heft & Rotstift“
   tokens.css: Schriften + Grundwerte. NUR hier werden Farben, Schriften und
   Abstände festgelegt. Alle Bausteine lesen ausschließlich diese Variablen.
   Regeln und Begründungen: DESIGN.md
   ========================================================================== */

/* ── Schriften: liegen auf dem eigenen Server, keine externen Anfragen ── */
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }

:root {
  /* Farben – alle Kombinationen erfüllen WCAG AA (≥ 4,5 : 1), geprüft 26.09.2026 */
  --ng-papier:    #fbf9f4;  /* Hintergrund: leicht warmes Papier, blendet nicht */
  --ng-flaeche:   #f3eee3;  /* Flächen: Produktboxen, Tabellenkopf, Eingabefelder */
  --ng-linie:     #e3dccd;  /* Trennlinien, Rahmen */
  --ng-text:      #23272e;  /* Fließtext (14 : 1) */
  --ng-gedaempft: #5d6470;  /* Metadaten, Bildunterschriften (5,7 : 1) */
  --ng-tinte:     #2f4d73;  /* Hauptfarbe: Überschriften, Links, Knöpfe (8,2 : 1) */
  --ng-rotstift:  #b0362c;  /* EINZIGE Akzentfarbe – sparsam! (5,9 : 1) */

  /* Schriften */
  --ng-schrift-titel: "Poppins", system-ui, sans-serif;
  --ng-schrift-text:  "Atkinson Hyperlegible", system-ui, sans-serif;
  --ng-titel-gewicht: 300;

  /* Größen und Rhythmus */
  --ng-groesse:   18px;     /* Grundgröße Fließtext */
  --ng-zeile:     1.65;
  --ng-mass:      68ch;     /* max. Zeilenlänge für Lesetext */
  --ng-breite:    1100px;   /* max. Breite für Übersichten (Blog, Tools) */
  --ng-abstand:   24px;     /* Grundabstand; Vielfache: 12 / 24 / 48 */
  --ng-randlinie: 2px;      /* Stärke des Korrekturrands */
  --ng-radius:    2px;      /* fast eckig – bewusst kein „Karten-Look“ */
}