/* ============================================================
   TOKENS  —  einzige Quelle fuer Farbe, Typo, Raster, Abstand
   Werte stammen aus den Framer-Dumps (home_typo.txt,
   home_struktur_und_assets.txt). Hier aendern = ueberall wirksam.
   ============================================================ */

:root {

  /* ---- Farben ------------------------------------------------ */
  --c-nav:        #b59c8d;   /* Navigationsleiste, Icon-Buttons   */
  --c-bg:         #d6c1b4;   /* Seitenhintergrund / Sektionen     */
  --c-surface:    #e3d1c5;   /* CTA-Pille, Bilderrahmen           */
  --c-ink:        #261414;   /* Schrift                            */
  --c-accent:     #8c4a28;   /* "VIEW ITEM", Track-Label   (*)    */
  --c-rule:       rgba(38, 20, 20, .18);  /* Haarlinien           */
  --c-ink-soft:   rgba(38, 20, 20, .62);  /* Nebentext            */

  /* (*) --c-accent ist aus den Screenshots geschaetzt.
         Exakten Wert per Pipette nachtragen.                     */

  /* ---- Schriftfamilien --------------------------------------- */
  --f-display: "EB Garamond", "Times New Roman", serif;
  --f-body:    "DM Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --f-hand:    "Delicious Handrawn", "Segoe Script", cursive;

  /* ---- Schriftgroessen (Desktop-Werte aus dem Dump) ----------- */
  --fs-display:   115px;   /* H1 Hero, H2 "Dinner Chat"           */
  --fs-h1-page:   64px;    /* Seitentitel Merch                   */
  --fs-logo:      32px;    /* Wortmarke in der Nav                */
  --fs-h3:        20px;    /* Nav-Links, Sektionslabel, Eyebrow   */
  --fs-card:      24px;    /* Produkt- und Track-Titel            */
  --fs-detail:    44px;    /* Artikeltitel auf der Detailseite     */
  --fs-hand:      18px;    /* Handschrift auf der Songs-Karte      */
  --fs-ticker:    18px;    /* Laufband                             */
  --fs-body:      15px;    /* Fliesstext                           */
  --fs-small:     12px;    /* Meta, Varianten, Buttonschrift      */

  --lh-display:   1.00;
  --lh-h3:        1.40;
  --lh-body:      1.33;
  --lh-small:     1.40;

  --ls-display:   -.02em;
  --ls-body:      -.02em;
  --ls-caps:      .10em;   /* Versalien-Sperrung "VIEW ITEM"      */

  /* ---- Raster ------------------------------------------------- */
  --w-page:     1160px;    /* Gesamtbreite des Inhaltsrasters      */
  --w-label:     284px;    /* linke Spalte mit Sektionslabel       */
  --w-col:       600px;    /* mittlere Inhaltsspalte               */
  --w-nav:      1150px;    /* Innenbreite der Navigationsleiste    */

  /* ---- Abstaende ---------------------------------------------- */
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  20px;           /* Standard-Innenabstand im Raster      */
  --sp-4:  40px;
  --sp-5:  64px;
  --sp-6: 100px;

  /* ---- Sonstiges ---------------------------------------------- */
  --nav-h:        58px;
  --w-card:      360px;    /* Polaroid / Flipkarte                 */
  --radius-pill:  999px;
  --radius-card:  10px;
  --ease:         cubic-bezier(.22, .61, .36, 1);
  --keywords-speed: 60s;   /* Umlaufdauer des Laufbands */
  --keywords-fade: 25%;
}

/* Fliessende Verkleinerung der Displaygroessen auf schmalen Screens.
   Bewusst nur hier, damit die Regionen selbst keine Breakpoints
   fuer Typo brauchen. */
@media (max-width: 1000px) {
  :root {
    --fs-display: clamp(48px, 12vw, 115px);
    --fs-h1-page: clamp(34px, 8vw, 64px);
    --fs-logo:    24px;
  }
}