/* ============================================================
   Emergence · WM-2026-Predictor — Design-Tokens
   „Panini-Sammelalbum / WM-Wandplakat, hell"
   Eigenständige Farbwelt (NICHT die blauen Logo-Farben).
   ============================================================ */
:root {
  /* --- Flächen & Tinte --- */
  --bg:           #FAF6EE;  /* Albumpapier, leicht cremig */
  --surface:      #FFFFFF;  /* Stickerweiß: Karten/Sheets */
  --surface-alt:  #F1EBDD;  /* Sammelseite: abgesetzte Blöcke */
  --ink:          #1C1B19;  /* Druckschwarz (nie reines #000) */
  --ink-soft:     #5C5848;  /* Bleistift-Text: Captions/Meta */
  --line:         #D9D2C4;  /* Bleistiftlinie: Felder/Gitter */
  --line-soft:    #ECE6DA;

  /* --- Erzählende Akzente --- */
  --pitch:        #1FA35A;  /* Rasengrün — Marke / die KI / CTA */
  --pitch-deep:   #0E6B3A;  /* Hover / Text auf Grün */
  --pitch-tint:   #E7F4EC;  /* sehr helle Grünfläche */
  --edding:       #E5453C;  /* Korrektur-Rot — DEINE Eingriffe / Bruch / live */
  --edding-tint:  #FCE9E7;
  --gold:         #F4C24B;  /* Glanzfolie — Held/Sieger (rationiert!) */
  --gold-deep:    #C9971F;

  /* --- Daten-Achse durchgerechnet ↔ Realität --- */
  --sky:          #3D8BFF;  /* kühl = „durchgerechnet" / KI-Linie */
  --whistle:      #FF8A3D;  /* warm = „Realität" / Bruch */
  --coin:         #9B8CFF;  /* Münze/lila = Coin-Flip (neutral) */
  --mint:         #D9F0E0;  /* sanfter Badge-Hintergrund */

  /* --- Konfidenz-Ampel (Labels exakt aus predictions.json) --- */
  --conf-dominanz: #1FA35A;
  --conf-klar:     #7DBE3C;
  --conf-leicht:   #F4C24B;
  --conf-coin:     #9B8CFF;
  --conf-upset:    #E5453C;

  /* --- Wahrscheinlichkeits-Segmente (W/D/L) --- */
  --p-win:  var(--pitch);
  --p-draw: #C9C0AD;
  --p-loss: var(--sky);

  /* --- Typografie ---
     Anton = kantige Sammelbild-/Poster-Display (Cover & große Titel),
     Inter = Body/UI/Zahlen, Caveat = handschriftliche Edding-Akzente. */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --num: "Inter", system-ui, sans-serif; /* tabular via utility */

  --fs-hero:    clamp(2.4rem, 10.5vw, 4.6rem);
  --fs-h1:      clamp(1.7rem, 6vw, 2.75rem);
  --fs-h2:      clamp(1.35rem, 4.5vw, 2rem);
  --fs-h3:      1.25rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --lh-body: 1.6;

  /* --- Spacing (4px-Basis) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* --- Radius --- */
  --r-card: 16px;
  --r-btn: 12px;
  --r-pill: 999px;
  --r-chip: 10px;

  /* --- Schatten (Papier auf Papier) --- */
  --shadow-card: 0 1px 2px rgba(28,27,25,.06), 0 4px 16px rgba(28,27,25,.06);
  --shadow-pop:  0 10px 34px rgba(28,27,25,.13);
  --shadow-sticker: 0 1px 0 #fff inset, 0 2px 10px rgba(28,27,25,.08);

  /* --- Layout --- */
  --maxw: 1100px;
  --maxw-narrow: 720px;
  --nav-h: 58px;
  --tabbar-h: 66px;

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;
}