/* ==========================================================================
   Osteria Fiorella – Design-Tokens
   Alle Farben, Schriften, Größen, Abstände und Bewegungen zentral an einer Stelle.
   Für einen neuen Kunden genügt es meist, diese Datei anzupassen.
   ========================================================================== */

:root {
  /* --- Farben: Papier, Tinte, Akzente -------------------------------------- */
  --papier: #F4ECDF;          /* Grundfläche, cremefarbenes Papier */
  --papier-tief: #EADFCC;     /* Bildpanel-Grund, Fuß, Hervorhebungen */
  --papier-hell: #FAF6EE;     /* Formularfelder, Gutscheinkarte */
  --espresso: #2A1C13;        /* Text (14:1 auf Papier) */
  --espresso-weich: #5B4637;  /* Sekundärtext (7,5:1) */
  --linie: #CBBBA3;           /* feine, rein dekorative Haarlinien */
  --platzhalter: #7A6553;     /* Platzhaltertext in Feldern (5,1:1 auf Papier hell, 4,7:1 auf Papier) */
  --linie-stark: #8C7660;     /* Feldränder, Bedienelemente (≥ 3:1) */
  --terrakotta: #B0512B;      /* Ornamente, große Ziffern, Flächen */
  --terrakotta-text: #9A4322; /* Links und Labels in Terrakotta (5,6:1) */
  --terrakotta-tief: #7E3519; /* Hover/aktiv */
  --oliv: #5C6A2C;            /* Ornamente, Diät-Zeichen */
  --oliv-text: #4F5B24;       /* Text in Oliv (6,3:1) */
  --ocker: #C99A3B;           /* kleine Akzente, nur Dekor */
  --fehler: #A1261B;          /* Fehlermeldungen (6,1:1) */
  --fehler-grund: #F6E1DA;
  --erfolg-grund: #E6E7D2;
  --schatten: 0 1px 0 rgb(42 28 19 / 0.06), 0 12px 32px -18px rgb(42 28 19 / 0.35);

  /* --- Schriften ------------------------------------------------------------ */
  /* jeweils mit metrisch angeglichener Ersatzschrift (base.css) gegen Layout-Sprünge */
  --schrift-titel: "Fraunces", "Fraunces Ersatz", Georgia, serif;
  --schrift-text: "Instrument Sans", "Instrument Sans Ersatz", Arial, sans-serif;
  --schrift-marke: "EB Garamond", "EB Garamond Ersatz", Georgia, serif; /* Kapitälchen, Preise */

  /* --- Schriftgrößen (Quarte 1,333, fluid zwischen 22,5 und 90 rem) ---------- */
  --text-xs: 0.8125rem;
  --text-s: 0.9375rem;
  --text-m: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --text-l: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --text-2xl: clamp(2rem, 1.55rem + 1.8vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.8rem + 2.9vw, 4.25rem);
  --text-4xl: clamp(3rem, 2rem + 4.4vw, 6rem);

  --zeile-eng: 1.08;
  --zeile-titel: 1.15;
  --zeile-text: 1.62;

  /* --- Abstände (fluid) ---------------------------------------------------- */
  --abstand-1: 0.25rem;
  --abstand-2: 0.5rem;
  --abstand-3: 0.75rem;
  --abstand-4: 1rem;
  --abstand-5: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
  --abstand-6: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  --abstand-7: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem);
  --abstand-8: clamp(3.5rem, 2.4rem + 4.6vw, 7rem);

  /* --- Raster --------------------------------------------------------------- */
  --rand: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);   /* Seitenrand */
  --mass: 36rem;                                 /* Zeilenlänge Fließtext (~65 Zeichen) */
  --mass-breit: 46rem;                           /* Listen, Formulare */
  --marginalie: 4.5rem;                          /* Spalte für Kapitelziffern */
  --panel: 42vw;                                 /* Breite der Bildseite (Desktop) */
  --kopf-hoehe: 4.25rem;                         /* Höhe des klebenden Kopfes */
  --linie-breite: 1px;
  --radius: 2px;                                 /* bewusst fast eckig */

  /* --- Bewegung ------------------------------------------------------------- */
  --dauer-kurz: 180ms;
  --dauer-mittel: 420ms;
  --dauer-lang: 1400ms;   /* Überblendung des Bildpanels */
  --dauer-zeichnen: 2400ms;
  --kurve: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-kopf: 20;
  --z-register: 15;
  --z-menue: 40;
}

@media (min-width: 110rem) {
  :root {
    --panel: 45vw;
  }
}