/* ============================================================
   NONNA'S CREW — DESIGN TOKENS · Systemebene „Stempel"
   ------------------------------------------------------------
   Quelle der Wahrheit: sorry-nonna/brand-tokens.json (V1.1)
   ⚠ Pfad im Design-Projekt trägt noch den alten Markennamen.
   + 02-brand-guidelines-system.dc.html (Teil 3, entschieden
   am 10.08.2026).

   Drei Farben, drei Schriften, sonst nichts. Jede Fläche
   verhält sich, als wäre sie mit genau EINER Farbe auf
   Karton gedruckt.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     1. FARBE — Cream 70 % · Green 20 % · Grey 10 %
     ---------------------------------------------------------- */
  --cream:      #F5EACD;   /* Vanilla Cream — Bedruckstoff  */
  --green:      #4A664C;   /* Hunter Green  — Druckfarbe    */
  --grey:       #2B2623;   /* Shadow Grey   — Text & Kontur */

  --cream-rgb:  245 234 205;
  --green-rgb:   74 102  76;
  --grey-rgb:    43  38  35;

  /* Zusatzfarben (Entscheidung 2026-08: Highlight-Duo).
     Sparsam: Rosso = Preis-Akzent, „Beliebt"-Stempel, Fehler-Ersatz.
     Giallo = Badges, Marker-Hinweise, „inklusive". Nie als große
     Fläche, nie beide im selben Element. */
  --rosso:      #C2452D;   /* Pomodoro-Rot  */
  --giallo:     #E4B34C;   /* Semola-Gelb   */
  --rosso-rgb:  194  69  45;
  --giallo-rgb: 228 179  76;

  /* Rollen. Eine Druckfarbe pro Fläche — nie zwei Druckfarben
     im selben Element. */
  --paper:      var(--cream);
  --ink:        var(--green);
  --ink-alt:    var(--grey);
  --text:       var(--grey);
  --text-quiet: rgb(var(--grey-rgb) / .68);

  /* ----------------------------------------------------------
     2. TYPOGRAFIE
     Universal Serif fehlt als Datei → Zilla Slab 700 (offener
     Punkt in den Guidelines).
     ---------------------------------------------------------- */
  --font-display: "Climate Crisis", "Space Grotesk", Impact, sans-serif;
  --font-body:    "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-accent:  "Zilla Slab", Rockwell, Georgia, serif;
  /* Eigener Token nur für die Wortmarke im Header. Bewusst getrennt
     von --font-display, damit ein späterer Sonderschnitt fürs Logo
     die Headlines & Karten nicht mitzieht. Der Smokum-Versuch ist
     zurückgenommen — die Wortmarke läuft wieder in Climate Crisis. */
  --font-logo:    var(--font-display);

  --size-display: 2.6rem;    /* Hero, mobil */
  --size-h2:      1.75rem;
  --size-h3:      1.2rem;
  --size-lead:    1.125rem;
  --size-body:    1rem;
  --size-small:   .875rem;
  --size-label:   .75rem;
  --size-micro:   .6875rem;

  --lead-display: 1.0;       /* Climate Crisis: eng */
  --lead-body:    1.6;       /* Space-Grotesk-Vorgabe */
  --track-label:  .14em;
  --track-claim:  .14em;

  /* ----------------------------------------------------------
     3. STEMPEL-REGELN (Kapitel 08 → Systemregel)
     ---------------------------------------------------------- */
  --frame-w:    3px;        /* Rahmen ist Pflicht            */
  --frame-gap:  4px;        /* innere zu äußerer Kontur      */
  --min-line:   2px;        /* = 0,5 mm — nichts darunter    */
  --tilt:      -1.2deg;     /* nichts sitzt exakt gerade     */
  --tilt-alt:    .8deg;
  --ink-cover:  .34;        /* Fehlstellen in der Farbfläche */

  /* ----------------------------------------------------------
     4. MUSTER & LINIEN
     ---------------------------------------------------------- */
  --pat-coarse:  64px;      /* Zahnkranz-Feld   */
  --pat-mid:     10px;      /* Halbtonraster    */
  --pat-mid-dot: 2.6px;
  --pat-fine:     5px;      /* Kartonfaser      */
  --pat-band:    12px;      /* Perforation      */
  --pat-band-r:  2.5px;

  /* Doppellinie (brand-tokens.json → lines.double): zwei Balken
     à 2px Green mit 5px Abstand. Akzent unter Headlines. */
  --rule-double-gap: 5px;

  --hair:        rgb(var(--grey-rgb) / .35);
  --seam-tooth:  44px;      /* Naht: Zahnbreite (vorläufig)  */
  --seam-row:    14px;

  /* ----------------------------------------------------------
     5. RASTER & ABSTAND
     ---------------------------------------------------------- */
  --s-4:   4px;  --s-8:   8px;  --s-12: 12px;  --s-16: 16px;
  --s-24: 24px;  --s-32: 32px;  --s-48: 48px;  --s-64: 64px;
  --s-96: 96px;

  /* Höhe der gepinnten Stats-Leiste. Steht hier, weil zwei Stellen sie
     brauchen: die Leiste selbst als Höhe und .header als top-Versatz —
     beide kleben oben und dürfen sich nicht überlappen. */
  --statsbar-h:  32px;

  --gutter:      20px;
  --max:         1180px;
  --measure:     62ch;
  --section-pad: var(--s-64);

  --tap:         44px;      /* Mindest-Tapfläche             */
  --field-h:     50px;

  /* ----------------------------------------------------------
     6. BILD
     „Druck"  = Ein-Farb-Druck (dekorativ, Hintergründe)
     „Foto"   = echtes Foto im Pflichtrahmen mit Korn — Essen
                bleibt farbig, der Rahmen macht es zur Marke.
     ---------------------------------------------------------- */
  --img-filter:  grayscale(1) contrast(2.2) brightness(1.1);
  --img-grain:   .34;
  --foto-grain:  .12;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");

  /* ----------------------------------------------------------
     7. BEWEGUNG — mechanisch, nicht flüssig.
     Farbe rastet in Stufen, Bewegung setzt auf.
     ---------------------------------------------------------- */
  --dur-fast:    .09s;
  --dur-base:    .16s;
  --dur-reveal:  .28s;
  --stagger:     .07s;
  --ease:        steps(3, end);
  --ease-press:  cubic-bezier(.3, 1.6, .5, 1);
  --ease-soft:   cubic-bezier(.33, 1, .68, 1);
  --reveal-scale: 1.06;

  /* Gepinnte Ablauf-Sektion: Scrollweg pro Schritt */
  --pin-step:    90vh;

  /* ----------------------------------------------------------
     8. EBENEN
     ---------------------------------------------------------- */
  --layer-header:   200;
  --layer-preload:  500;
}

@media (min-width: 700px) {
  :root {
    --size-display: 4.4rem;
    --size-h2:      2.4rem;
    --size-h3:      1.4rem;
    --size-body:    1.0625rem;
    --gutter:       32px;
    --section-pad:  var(--s-96);
  }
}

@media (min-width: 1080px) {
  :root {
    --size-display: 5.6rem;
    --gutter:       48px;
  }
}

/* Mobil greift der 44px-Zahn zu grob — halbe Teilung, nie ungerade.
   Halbtonraster und Perforation halbieren mit (brand-tokens.json →
   system.patterns: mid 7px/1.9px, band 9px/1.9px). */
@media (max-width: 560px) {
  :root {
    --seam-tooth: 22px; --seam-row: 9px; --pat-coarse: 32px;
    --pat-mid: 7px; --pat-mid-dot: 1.9px;
    --pat-band: 9px; --pat-band-r: 1.9px;
  }
}

/* „Bewegung reduzieren": alles statisch. Kippungen bleiben —
   sie sind Gestaltung, keine Bewegung. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01s; --dur-base: .01s; --dur-reveal: .01s; --stagger: 0s; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}