/* ============================================================
   tokens.css - Design Tokens
   Einzige Stelle, an der Farbwerte, Schriftgrößen und Abstände
   definiert werden. Nirgends sonst stehen rohe Werte.
   ============================================================ */

:root {

  /* ---- Farbe ------------------------------------------------
     Kontrastwerte (WCAG) stehen als Kommentar dahinter.
     Regel: Taupe-Flächen tragen ausschließlich --farbe-tinte.
     Rot und Sekundärtext niemals auf Taupe.
  ------------------------------------------------------------ */
  --farbe-papier:        #E3E0D8;   /* Grundfläche der Seite        */
  --farbe-taupe:         #ADA89E;   /* Sektionsfläche, eine Nuance  */
                                    /* heller als das Ausgangs-     */
                                    /* taupe #A5A095                */
  --farbe-tinte:         #141310;   /* 14,1:1 Papier · 7,9:1 Taupe  */
  --farbe-tinte-leise:   #5C584F;   /* 5,4:1 auf Papier             */
  --farbe-signal:        #C0241A;   /* 4,5:1 auf Papier             */

  --farbe-flaeche-leicht: #EDEBE5;  /* Hover, leichte Abhebung      */
  --linie:                rgba(20, 19, 16, .20);
  --linie-stark:          rgba(20, 19, 16, .55);

  /* ---- Schriftfamilien -------------------------------------- */
  --schrift-serife:  "Newsreader", "Iowan Old Style", Georgia, serif;
  --schrift-grotesk: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* ---- Schriftgrößen ---------------------------------------- */
  --text-display: clamp(2.6rem, 6.2vw, 5.4rem);
  --text-h2:      clamp(1.6rem, 3.1vw, 2.6rem);
  --text-h3:      clamp(1.15rem, 1.7vw, 1.4rem);
  --text-body:    clamp(1rem, 1.05vw, 1.075rem);
  --text-klein:   0.875rem;
  --text-meta:    0.72rem;

  /* ---- Zeilenhöhen ------------------------------------------ */
  --zeile-eng:    1.02;
  --zeile-titel:  1.14;
  --zeile-text:   1.62;

  /* ---- Laufweite -------------------------------------------- */
  --sperr-display: -0.022em;
  --sperr-titel:   -0.012em;
  --sperr-meta:     0.10em;
  --sperr-marke:    0.34em;

  /* ---- Abstände --------------------------------------------- */
  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 1.5rem;
  --raum-4: 2.5rem;
  --raum-5: 4rem;
  --raum-6: 6.5rem;

  /* ---- Layout ----------------------------------------------- */
  --kopf-hoehe:     4.5rem;   /* bestimmt zugleich den Abstand der
                                 Sprungziele, siehe basis.css */
  --seitenrand:     clamp(1.25rem, 5vw, 5rem);
  --inhalt-breite:  1360px;
  --register-breite: clamp(3.5rem, 11vw, 9rem);  /* linke Nummernspalte */
  --lesebreite:     68ch;

  /* ---- Bewegung --------------------------------------------- */
  --dauer-schnell: 150ms;
  --dauer-normal:  280ms;
  --kurve:         cubic-bezier(.2, .8, .2, 1);

  /* ---- Ebenen ----------------------------------------------- */
  --ebene-kopf:   100;
  --ebene-menue:  200;
}