/* pelera — Design-Tokens
   Konzept: Hitze-Rampe. Die beiden Markenfarben #8B1719 und #F5EAD7 werden zu
   einer Skala verlängert, die von der erkalteten Kruste bis zur Glut läuft.
   Die Verläufe tragen dieses Konzept — sie sind keine Dekoration. */

@font-face {
  font-family: 'Pilowlava';
  src: url('../assets/fonts/Pilowlava-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce One';
  src: url('../assets/fonts/OpenSauceOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce One';
  src: url('../assets/fonts/OpenSauceOne-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sauce One';
  src: url('../assets/fonts/OpenSauceOne-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ---- Hitze-Rampe ---- */
  --c-void: #240506;    /* erkaltete Kruste */
  --c-deep: #4a0b0d;
  --c-red: #8b1719;     /* Markenrot, gesetzt */
  --c-ember: #b93b1b;   /* Glut */
  --c-flame: #d9641f;
  --c-amber: #e9a227;   /* nur für Verlaufsstopps */
  --c-gold: #f0b44e;    /* textsicherer Akzent, 5.1:1 auf Markenrot */
  --c-cream: #f5ead7;   /* Markencreme, gesetzt */

  --c-cream-dim: rgba(245, 234, 215, 0.66);
  --c-cream-line: rgba(245, 234, 215, 0.18);
  --c-red-dim: rgba(36, 5, 6, 0.62);
  --c-red-line: rgba(36, 5, 6, 0.16);

  /* Kontext je Fläche — von .surface-* gesetzt */
  --bg: var(--c-red);
  --fg: var(--c-cream);
  --fg-dim: var(--c-cream-dim);
  --line: var(--c-cream-line);
  --accent: var(--c-gold);

  /* ---- Verläufe ---- */
  --grad-crust: linear-gradient(158deg, #2a0607 0%, #63100f 46%, #8b1719 100%);
  /* Nur die hellen Stopps — auf diesem Verlauf steht fast-schwarzer Text
     mit mindestens 5.2:1. */
  --grad-heat: linear-gradient(96deg, var(--c-flame) 0%, var(--c-amber) 52%, var(--c-flame) 100%);
  /* Bildplatz: warm, aber zurückhaltend — soll nicht mit dem Inhalt konkurrieren */
  --grad-slot: linear-gradient(148deg, #3a0a0b 0%, #6b1213 52%, #97301a 100%);

  /* ---- Schrift ---- */
  --font-mark: 'Pilowlava', 'Open Sauce One', sans-serif;
  --font-ui: 'Open Sauce One', 'Helvetica Neue', Arial, sans-serif;

  --fs-mark: clamp(3rem, min(13vw, 17vh), 11rem);
  --fs-title: clamp(2.5rem, min(7.5vw, 11vh), 6.5rem);
  --fs-statement: clamp(1.5rem, 3.4vw, 3rem);
  --fs-work: clamp(1.65rem, 3.2vw, 2.9rem);
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.375rem);
  --fs-body: clamp(1rem, 1.05vw, 1.0625rem);
  --fs-meta: 0.875rem;

  --lh-mark: 0.92;
  --lh-title: 1;
  --lh-body: 1.65;
  --ls-tight: -0.025em;

  /* ---- Raster & Rhythmus ---- */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 60ch;
  --band-y: clamp(5rem, 11vw, 10rem);
  --maxw: 1480px;

  /* ---- Bewegung ---- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}