/* Schicht 1 · Tokens — Stickerheft (App-Design E76) */
:root {
  /* Primitive */
  --ff-pflaume: #2B1838;
  --ff-gold: #F7C548;
  --ff-gold-schatten: #E2A532;
  --ff-kruste: #C77B2A;
  --ff-weiss: #FFFFFF;
  --ff-rosa: #FF8A9B;
  --ff-lavendel: #C2A8FF;
  --ff-minze: #7FD8BE;
  --ff-schwarz: #000000;
  --ff-mesh-mitte: #B596FF;
  --ff-lila-schatten: 70 30 150;
  --ff-gold-hell: #FFD966;
  --ff-amber-schatten: 128 74 6;
  /* Riecher-Farbwelt der App (E91) */
  --ff-salbei: #BFE6C8;
  --ff-pfirsich: #FFC79A;
  --ff-tomate: #FF7D5E;

  /* Semantic */
  --text-strong: var(--ff-pflaume);
  --text-body: var(--ff-pflaume);
  --text-muted: rgb(43 24 56 / .84);
  --text-link: var(--ff-pflaume);
  --text-on-dark: var(--ff-weiss);
  --surface-page: var(--ff-mesh-mitte);
  --surface-sticker: var(--ff-weiss);
  --surface-etikett: var(--ff-gold);
  --surface-dunkel: var(--ff-pflaume);
  --surface-nummer: var(--ff-gold);
  /* Gelbe Grundfläche: Gold mit leichtem Mesh nach Hellgold und Bernstein */
  --surface-gelb:
    radial-gradient(62% 58% at 10% 6%, var(--ff-gold-hell) 0%, rgb(255 217 102 / 0) 72%),
    radial-gradient(58% 62% at 94% 92%, var(--ff-gold-schatten) 0%, rgb(226 165 50 / 0) 74%),
    radial-gradient(38% 34% at 82% 12%, rgb(255 255 255 / .3) 0%, rgb(255 255 255 / 0) 70%),
    var(--ff-gold);
  --border-sticker: var(--ff-weiss);
  --focus-ring: 0 0 0 4px var(--ff-weiss), 0 0 0 7px var(--ff-pflaume);

  /* Sticker-Rand und Schatten */
  --sticker-rand: 5px;
  --shadow-sticker: 0 10px 22px rgb(var(--ff-lila-schatten) / .28);
  --shadow-hoch: 0 22px 40px rgb(var(--ff-lila-schatten) / .32);
  --shadow-gedrückt: 0 4px 10px rgb(var(--ff-lila-schatten) / .3);
  --rand-figur: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 14px 16px rgb(var(--ff-lila-schatten) / .32));

  /* Stanzrand zwischen den Flächen: gewellte Oberkante mit weißer Kante */
  --stanz-h: 18px;
  --stanz-w: 48px;
  --stanz-kante: 6px;
  --stanz-maske:
    linear-gradient(#000 0 0) 0 var(--stanz-h) / 100% calc(100% - var(--stanz-h)) no-repeat,
    radial-gradient(50% 100% at 50% 100%, #000 97%, #0000 100%) 0 0 / var(--stanz-w) var(--stanz-h) round no-repeat;
  /* derselbe Stanzrand an der linken Kante, für Tafeln, die waagrecht aneinanderstoßen */
  --stanz-maske-links:
    linear-gradient(#000 0 0) var(--stanz-h) 0 / calc(100% - var(--stanz-h)) 100% no-repeat,
    radial-gradient(100% 50% at 100% 50%, #000 97%, #0000 100%) 0 0 / var(--stanz-h) var(--stanz-w) no-repeat round;

  /* Strecke: Tafel und Fahrweg = kleiner Viewport (svh, steht still), Bühne = großer Viewport (lvh);
     keine dvh, damit die Safari-Leiste beim Ein-/Ausblenden nichts verschiebt. Rückfall vh (iOS: groß) */
  --strecke-h: 100vh;
  --strecke-buehne-h: 100vh;
  --strecke-pad: clamp(40px, 7vh, 96px);

  /* Bühne: Vollbild-Section mit großem iPhone */
  --buehne-pad: clamp(56px, 7svh, 112px);
  --buehne-gap: clamp(48px, 7vw, 120px);
  --buehne-phone-h: min(82svh, 860px);
  --buehne-fritte: clamp(180px, 18vw, 280px);

  /* Radien */
  --radius-s: 14px;
  --radius-m: 22px;
  --radius-l: 28px;
  --radius-rund: 999px;

  /* Abstände */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: clamp(80px, 9vw, 136px);
  --gutter: clamp(20px, 4.5vw, 56px);
  --container: 1200px;

  /* Typo-Skala */
  --font-display: "Shrikhand", "Familjen Grotesk", serif;
  --font-text: "Familjen Grotesk", system-ui, sans-serif;
  --fs-mega: clamp(2.6rem, 1.3rem + 4.1vw, 5.4rem);
  --fs-h2: clamp(2.3rem, 1.5rem + 3.2vw, 4.4rem);
  --fs-h3: clamp(1.45rem, 1.2rem + .9vw, 1.9rem);
  --fs-lead: clamp(1.15rem, 1.02rem + .5vw, 1.42rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --lh-tight: 1.02;
  --lh-text: 1.5;

  /* Bewegung */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-weich: cubic-bezier(.32, .72, 0, 1);
  --dauer-kurz: 220ms;
  --dauer-mittel: 520ms;
}

@supports (height: 100svh) {
  :root {
    --strecke-h: 100svh;
    --strecke-buehne-h: 100lvh;
    --strecke-pad: clamp(40px, 7svh, 96px);
  }
}

@media (max-width: 900px) {
  :root {
    --buehne-phone-h: min(72svh, 620px);
    --buehne-fritte: 118px;
  }
}

/* Kontext: gelbe Fläche belegt Endtokens und Schatten warm um */
[data-grund="gelb"] {
  --text-strong: var(--ff-pflaume);
  --text-body: var(--ff-pflaume);
  --text-muted: rgb(43 24 56 / .88);
  --surface-nummer: var(--ff-weiss);
  --shadow-sticker: 0 10px 22px rgb(var(--ff-amber-schatten) / .3);
  --shadow-hoch: 0 24px 44px rgb(var(--ff-amber-schatten) / .34);
  --shadow-gedrückt: 0 4px 10px rgb(var(--ff-amber-schatten) / .3);
  --rand-figur: drop-shadow(5px 0 0 #fff) drop-shadow(-5px 0 0 #fff) drop-shadow(0 5px 0 #fff) drop-shadow(0 -5px 0 #fff) drop-shadow(0 14px 16px rgb(var(--ff-amber-schatten) / .32));
}

/* Kontext: dunkle Fläche (Fußzeile) belegt die Endtokens um */
.ff-section--dunkel {
  --text-strong: var(--ff-weiss);
  --text-body: var(--ff-weiss);
  --text-muted: rgb(255 255 255 / .82);
  --text-link: var(--ff-weiss);
  --focus-ring: 0 0 0 3px var(--ff-pflaume), 0 0 0 6px var(--ff-gold);
  color: var(--text-body);
  background: var(--surface-dunkel);
}