/*
 * Traumascript – Design-Tokens
 * ----------------------------
 * Farben nach Vorgabe „Webseite Farben und Menü.docx“, ergänzt um die
 * Zwischentöne des Referenz-Designs (Kimi-Entwurf). Die Benennung ist so
 * gewählt, dass sie 1:1 in WordPress theme.json (settings.color.palette,
 * settings.typography, settings.spacing) übernommen werden kann.
 */

:root {
  /* ---------- Farben (Vorgabe) ---------- */
  --color-paper:            #FCFAF6;   /* Naturpapier – Seitenhintergrund */
  --color-ink:              #2F2F2F;   /* Dunkelgrau – Fließtext */
  --color-terracotta:       #B0512A;   /* Akzent, Links, Buttons */
  --color-sand:             #D8CFC2;   /* Sand/Greige – Linien, Rahmen */
  --color-greige:           #6F6251;   /* Logo-Greige (Vorgabe #7A6D5B), für Text minimal nachgedunkelt: 4,81:1 auf Sand-Fläche */
  --color-greige-brand:     #7A6D5B;   /* Original-Greige der Vorgabe (nur für große Flächen/Dekor) */
  --color-input-border:     #8E8170;   /* Rahmen von Eingabefeldern ≥ 3:1 (WCAG 1.4.11) */
  --color-olive:            #37321F;   /* Dunkles Oliv – dunkle Flächen */
  --color-logo:             #372F29;   /* Logo-Farbe */

  /* ---------- Farben (abgeleitet, Referenz-Design) ---------- */
  --color-paper-2:          #F5F2EB;   /* Header, Eingabefelder, zweite Fläche */
  --color-surface:          #ECE7DB;   /* Feature-Bänder, Footer */
  --color-surface-2:        #E9E2D2;   /* Karten auf Surface */
  --color-surface-line:     #E3DCCB;   /* feine Linie auf Paper-2 */
  --color-ink-warm:         #29251E;   /* Überschriften */
  --color-ink-soft:         #57503F;   /* Sekundärtext */
  --color-ink-quiet:        #4A4436;   /* Zitate, Listen in Serif */
  --color-terracotta-deep:  #8C3F20;   /* Hover */
  --color-terracotta-text:  #9A4526;   /* Textlinks (Kontrast ≥ 4,5:1 auf Paper) */
  --color-terracotta-light: #D98B5F;   /* Hover auf dunklem Grund */
  --color-olive-line:       #55503A;   /* Linien auf Oliv */
  --color-olive-text:       #D8CFC2;   /* Text auf Oliv */
  --color-olive-muted:      #B9B29E;   /* Sekundärtext auf Oliv */
  --color-olive-soft:       #C9C2A6;   /* Meta auf Oliv */
  --color-cream:            #F5F2EB;   /* helle Schrift auf Oliv */
  --color-focus:            #B0512A;

  /* ---------- Typografie ---------- */
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Source Sans Pro", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  /* Vorgabe: H1 56/46/36 · H2 40/34/30 · H3 30/26/24 · Fließtext 20/19/18 (Desktop/Tablet/Mobil) */
  --text-h1:      clamp(2.25rem, 1.55rem + 2.4vw, 3.5rem);
  --text-h2:      clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);
  --text-h3:      clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
  --text-h4:      1.25rem;
  --text-body:    clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-body-s:  1.0625rem;
  --text-lede:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-quote:   clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  --text-small:   0.9375rem;
  --text-tiny:    0.8125rem;
  --text-label:   0.6875rem;   /* 11px Versal-Label */
  --text-display: clamp(3.5rem, 9vw, 8rem);

  --leading-tight:  1.15;
  --leading-snug:   1.25;
  --leading-normal: 1.4;
  --leading-body:   1.65;

  --tracking-label: 0.22em;

  /* ---------- Abstände ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-section:    clamp(4.5rem, 3rem + 5vw, 8rem);   /* py-24 … py-32 */
  --space-section-s:  clamp(3rem, 2rem + 3vw, 5rem);

  /* ---------- Raster ---------- */
  --width-max:   80rem;      /* 1280px – max-w-7xl */
  --width-text:  42rem;      /* Lesebreite Artikel */
  --width-wide:  60rem;
  --gutter:      clamp(1.5rem, 4vw, 2.5rem);   /* px-6 … px-10 */
  --grid-gap:    clamp(2rem, 4vw, 6rem);

  /* ---------- Sonstiges ---------- */
  --header-h:        7rem;      /* Original: h-28 */
  --header-h-mobile: 5.5rem;
  --radius-pill:     999px;
  --radius-s:        2px;
  --transition:      180ms ease;
  --transition-slow: 700ms ease;
  --z-header:  40;
  --z-overlay: 50;
}