/* Denk und Werk – Design-Tokens v1.0 (Referenzseite)
   Alles lokal: Schriften in /assets/fonts/. Kontrastwerte (WCAG 2.x, berechnet) stehen in docs/PAKETSTUFEN.md bzw. design.md. */

/* ---------- Schriften (lokal, latin-Subset) ---------- */
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/zilla-slab-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/zilla-slab-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

:root {
  /* ---------- Rohpalette (hell) ---------- */
  --c-papier:        #F5F4EF;
  --c-flaeche:       #EAE8DF;
  --c-weiss:         #FFFFFF;
  --c-tinte:         #17262B;
  --c-grau:          #4F5A5C;
  --c-blau:          #1D5C8F;
  --c-blau-dunkel:   #123F63;
  --c-gelb:          #F2BE22;
  --c-nacht:         #12222A;
  --c-nacht-flaeche: #1C323D;
  --c-nacht-text2:   #B4C0C3;
  --c-linie:         #B8B5A8;
  --c-linie-nacht:   #4C6470;
  --c-bahn:          #3F8CC8; /* Leiterbahn-Füllung: >= 3:1 auf Papier UND Nacht */

  /* ---------- Semantisch ---------- */
  --bg:            var(--c-papier);
  --bg-flaeche:    var(--c-flaeche);
  --bg-eingabe:    var(--c-weiss);
  --text:          var(--c-tinte);
  --text-leise:    var(--c-grau);
  --link:          var(--c-blau);
  --link-hover:    var(--c-blau-dunkel);
  --akzent:        var(--c-gelb);
  --on-akzent:     var(--c-tinte);
  --btn-bg:        var(--c-blau);
  --btn-text:      var(--c-weiss);
  --btn-bg-hover:  var(--c-blau-dunkel);
  --linie:         var(--c-linie);
  --kante:         #6F7F82;   /* UI-Rand, 3.79:1 auf Papier */
  --fokus:         var(--c-blau);
  --stanz:         var(--c-tinte);
  --fehler:        #A31F14;
  --ok:            #1D6B3A;
  --tag-bg:        var(--c-papier);
  --tag-text:      var(--c-tinte);
  --kopf-bg:       color-mix(in srgb, var(--c-papier) 88%, transparent);
  --sek-papier:    var(--c-papier);
  --sek-flaeche:   var(--c-flaeche);
  --sek-nacht:     var(--c-nacht);

  /* ---------- Typografie ---------- */
  --font-display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --font-text:    "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fw-text: 400;
  --fw-text-fett: 700;
  --fw-display-mittel: 500;
  --fw-display: 700;

  --fs--1: 0.875rem;
  --fs-0:  1.125rem;
  --fs-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --fs-2:  clamp(1.5rem, 1.35rem + 0.75vw, 2rem);
  --fs-3:  clamp(1.875rem, 1.6rem + 1.4vw, 2.75rem);
  --fs-4:  clamp(2.25rem, 1.8rem + 2.25vw, 3.75rem);
  --fs-5:  clamp(2.75rem, 2rem + 3.75vw, 5.25rem);
  --lh-text: 1.6;
  --lh-eng: 1.12;
  --lh-mittel: 1.3;
  --ls-display: -0.01em;
  --mass: 62ch;

  /* ---------- Spacing (4-px-Raster) ---------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem;
  --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem;
  --abschnitt: clamp(4rem, 3rem + 5vw, 8rem);
  --rand: clamp(1.25rem, 0.5rem + 3.5vw, 3rem);
  --breite: 72rem;
  --breite-text: 44rem;
  --kopf-h: 4.25rem;

  /* ---------- Radien, Schatten, Motiv ---------- */
  --r-1: 2px; --r-2: 6px; --r-3: 14px;
  --sh-versatz: 4px 4px 0 var(--stanz);
  --sh-versatz-klein: 2px 2px 0 var(--stanz);
  --linie-d: 2px;
  --linie-d-fein: 1px;
  --raster: 24px;
  --motiv-raster: radial-gradient(circle at center, var(--linie) 1px, transparent 1.5px);

  /* ---------- Bewegung ---------- */
  --t-schnell: 140ms;
  --t-mittel: 280ms;
  --t-lang: 600ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-stanz: cubic-bezier(0.34, 1.4, 0.5, 1);
  --touch-min: 2.75rem;
}

/* ---------- Dunkle Sektionen ---------- */
.auf-nacht {
  --bg:           var(--c-nacht);
  --bg-flaeche:   var(--c-nacht-flaeche);
  --bg-eingabe:   #0C1A21;
  --text:         #F5F4EF;
  --text-leise:   #B4C0C3;
  --link:         var(--c-gelb);
  --link-hover:   #F5F4EF;
  --btn-bg:       var(--c-gelb);
  --btn-text:     var(--c-tinte);
  --btn-bg-hover: #F5F4EF;
  --linie:        var(--c-linie-nacht);
  --kante:        #8AA0AA;
  --fokus:        var(--c-gelb);
  --stanz:        var(--c-gelb);
  --fehler:       #FFA89E;
  --ok:           #8FE0A8;
  --tag-bg:       #223742;
  --tag-text:     #F5F4EF;
  background: var(--bg);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-schnell: 0ms; --t-mittel: 0ms; --t-lang: 0ms; }
}