/* =============================================================================
   tokens.css — Schriften, Farben, Maße. Alles aus dem Cover abgeleitet.
   Kernidee: EIN Wert --warmth (0 = kalt/grau, 1 = warm/farbig) interpoliert per
   color-mix sämtliche Farben. Die Kaffeemaschine animiert ihn 0 -> 1.
   ============================================================================= */

/* ---- Schriften (selbst gehostet, subsettet WOFF2) ----------------------- */
@font-face{
  font-family:"Crimson Pro";
  src:url("../assets/fonts/crimson-pro.woff2") format("woff2");
  font-weight:200 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Crimson Pro";
  src:url("../assets/fonts/crimson-pro-italic.woff2") format("woff2");
  font-weight:200 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Cinzel Decorative";
  src:url("../assets/fonts/cinzel-decorative.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cinzel Decorative";
  src:url("../assets/fonts/cinzel-decorative-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cinzel Decorative";
  src:url("../assets/fonts/cinzel-decorative-black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Herr Von Muellerhoff";
  src:url("../assets/fonts/herr-von-muellerhoff.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Monoton";
  src:url("../assets/fonts/monoton.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

/* ---- Der Wärme-Regler (für sanften Übergang animierbar) ------------------ */
@property --warmth{ syntax:"<number>"; inherits:true; initial-value:1; }

:root{
  /* Schrift-Rollen */
  --ff-display:"Cinzel Decorative", "Trajan Pro", Georgia, serif;
  --ff-body:"Crimson Pro", Georgia, "Times New Roman", serif;
  --ff-script:"Herr Von Muellerhoff", "Brush Script MT", cursive;
  --ff-neon:"Monoton", "Courier New", monospace;

  /* Kalt- und Warm-Pole jeder Farbe */
  --bg-cold:#0a0f17;   --bg-warm:#0e1a2b;
  --deep-cold:#070b12; --deep-warm:#0b1424;
  --surf-cold:#141b27; --surf-warm:#16243a;
  --text-cold:#8d97a7; --text-warm:#efe6cf;
  --dim-cold:#586273;  --dim-warm:#9aa6b2;
  --gold-cold:#6f6857; --gold-warm:#f4b942;
  --gold2-cold:#564f41;--gold2-warm:#d9a441;
  --red-cold:#4b3a40;  --red-warm:#c8312f;
  --teal-cold:#2c3740; --teal-warm:#3f6b6a;
  --cream-cold:#b7b3a6;--cream-warm:#efe6cf;
  --paper-warm:#e7dcc0;

  --warmth:1; /* Default = warm (ohne JS / reduced-motion sofort lesbar) */

  /* Fallback (Browser ohne color-mix): direkt die Warm-Werte */
  --bg:var(--bg-warm);
  --deep:var(--deep-warm);
  --surface:var(--surf-warm);
  --text:var(--text-warm);
  --text-dim:#9aa6b2;
  --gold:var(--gold-warm);
  --gold-2:var(--gold2-warm);
  --red:var(--red-warm);
  --teal:var(--teal-warm);
  --cream:var(--cream-warm);

  /* Maße / Rhythmus */
  --maxw:1180px;
  --gap:clamp(1rem,2.5vw,2rem);
  --pad-section:clamp(4.5rem,10vw,9rem);
  --radius:14px;
  --line:1px solid color-mix(in oklab, var(--gold) 28%, transparent);

  /* Schatten / Glow */
  --glow-gold:0 0 40px color-mix(in oklab, var(--gold) 45%, transparent);
  --glow-red:0 0 70px color-mix(in oklab, var(--red) 55%, transparent);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Prozedurales Film-/Papierkorn (kein PNG nötig) */
  --grain-url:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- color-mix: interpoliere jede Farbe kalt <-> warm über --warmth ------ */
@supports (color: color-mix(in oklab, #000, #fff 50%)){
  :root{
    --mix: calc(var(--warmth) * 100%);
    --bg:      color-mix(in oklab, var(--bg-cold),   var(--bg-warm)   var(--mix));
    --deep:    color-mix(in oklab, var(--deep-cold), var(--deep-warm) var(--mix));
    --surface: color-mix(in oklab, var(--surf-cold), var(--surf-warm) var(--mix));
    --text:    color-mix(in oklab, var(--text-cold), var(--text-warm) var(--mix));
    --text-dim:color-mix(in oklab, var(--dim-cold),  var(--dim-warm)  var(--mix));
    --gold:    color-mix(in oklab, var(--gold-cold), var(--gold-warm) var(--mix));
    --gold-2:  color-mix(in oklab, var(--gold2-cold),var(--gold2-warm)var(--mix));
    --red:     color-mix(in oklab, var(--red-cold),  var(--red-warm)  var(--mix));
    --teal:    color-mix(in oklab, var(--teal-cold), var(--teal-warm) var(--mix));
    --cream:   color-mix(in oklab, var(--cream-cold),var(--cream-warm)var(--mix));
  }
  /* Wenn JS + Motion vorhanden: starte kalt, animiere zu warm */
  html.js.can-brew{ --warmth:0; }
  html.js.can-brew.brewed{ --warmth:1; transition:--warmth 1.8s var(--ease); }
}