/* Tokens für die Website von Liebe mit Marie.
   Quelle jeder Zahl: Brand Style Guide 1.1 (Abschnitt 1.1 bis 1.4, 2.1, 2.2, 2.6, 2.7, 3.5)
   und Design-Richtung Web 1.0 (Abschnitt 2, 4, 5). Stand 2026-10-28.
   Seiten und Komponenten nehmen nur diese Variablen, nie eigene Werte.
   Breakpoints (nicht als Variable möglich): 640 px (Handy zu Tablet) und 1024 px (Tablet zu Desktop).
   Größen laufen mit clamp() linear von 390 px (Handy-Wert) bis 1400 px (Desktop-Wert). */

:root {
  /* Farben, Guide 1.1. Alles außer Gold aus dem Farbton von Rose. Nie Reinweiß. */
  --rose: #BA5C68;          /* Hauptfarbe: Buttons, Links, Zwischenzeilen, Preise, Footer, Zitatband */
  --bordeaux: #6F2A33;      /* Schrift. Als Fläche nur als gekennzeichnete Ausnahme (Richtung 5, 2026-10-28) */
  --bordeaux-hell: #9B4B55; /* Nebentext, Linien in 35 % */
  --creme: #F4ECE7;         /* Grundfläche, ersetzt Weiß */
  --creme-hell: #F8F2ED;    /* Karten und Fotoflächen auf Creme */
  --rosa: #F0CECD;          /* gestrichen 2026-10-31 (Marie): nicht mehr verwenden, nur für alte Runden; zweite helle Fläche ist --sand-hell */
  --sand-hell: #E5D9D1;     /* zweite helle Fläche seit 2026-10-31: Creme eine Stufe dunkler (Farbton 23); Bordeaux 7,4, Rose 3,1 nur groß, zu Creme 1,19 */
  --gold: #E3C38D;          /* Schmuck, nur auf Rose: Monogramm, Logo, feine Linie */
  --puder: #E8DBD7;         /* gestrichen 2026-10-31 (Marie), durch --sand-hell ersetzt; nur für alte Runden */
  --linie: rgba(155, 75, 85, 0.35); /* Bordeaux hell 35 %, Guide 1.1 */

  /* Rollen */
  --grund: var(--creme);
  --schrift: var(--bordeaux);
  --nebentext: var(--bordeaux-hell);
  --akzent: var(--rose);
  --dunkel: var(--bordeaux);     /* dunkle Fläche für Zitatband und Footer (Marie, Runde 2, 2026-10-28); Kandidaten in der Farbtafel */
  --dunkel-fuss: var(--dunkel);  /* Footer darf eine Stufe dunkler sein (Nachtbordeaux #541C24), Vergleich im finalen Entwurf */

  /* Schriften, Guide 2.1: DM Serif nur groß, Montserrat darf klein */
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Montserrat Ersatz", "Helvetica Neue", Arial, sans-serif;   /* Ersatz mit size-adjust in basis.css (Runde 23) */

  /* Größen, Guide 2.2 (Handy -> Desktop) */
  --groesse-h1: clamp(36px, 28.3px + 1.98vw, 56px);
  --groesse-h2: clamp(28px, 24.9px + 0.79vw, 36px);
  --groesse-h3: clamp(24px, 23.2px + 0.2vw, 26px);
  --groesse-text: clamp(17px, 16.6px + 0.1vw, 18px);
  --groesse-nebentext: clamp(13px, 12.6px + 0.1vw, 14px);
  --groesse-zwischenzeile: clamp(11px, 10.2px + 0.2vw, 13px);
  --groesse-zitat: clamp(24px, 22.5px + 0.4vw, 28px); /* Guide 2.2 nennt 22 px Handy, 2.6 setzt 24 px als Untergrenze für DM Serif; 24 gilt */
  --groesse-preis: clamp(36px, 27.5px + 2.18vw, 58px);
  --groesse-ziffer: clamp(44px, 36.3px + 1.98vw, 64px);
  /* Button: Guide 2.2 nennt 16 px Desktop und 15 px Handy. Creme auf Rose hat 3,7:1 und besteht
     nur als große Schrift (ab 19 px halbfett, Guide 1.1). Vorschlag 19 px, Entscheidung Marie offen
     (Plan B, Korrektur 1). */
  --groesse-button: 19px;
  --groesse-formular: 17px; /* Eingabefelder nie unter 16 px, sonst zoomt das iPhone hinein (mobile-native) */

  /* Zeilenabstände, Guide 2.2 */
  --zeile-h1: 1.08;
  --zeile-h2: 1.15;
  --zeile-h3: 1.2;
  --zeile-text: 1.65;
  --zeile-nebentext: 1.5;
  --zeile-zitat: 1.3;

  /* Sperrung, Guide 2.1 und 3.5 */
  --sperrung-zwischenzeile: 0.12em;
  --sperrung-wortmarke: 0.06em;

  /* Abstände, 8-px-Basis (Plan B) */
  --abstand-1: 8px;
  --abstand-2: 16px;
  --abstand-3: 24px;
  --abstand-4: 40px;
  --abstand-5: 64px;
  --abstand-6: 104px;
  --abstand-7: 168px;
  /* Luft über und unter einem Abschnitt, Richtung 2: 120 px Desktop, 72 px Handy; weit für editoriale Seiten */
  --abschnitt: clamp(72px, 53.5px + 4.75vw, 120px);
  --abschnitt-weit: clamp(96px, 68.2px + 7.13vw, 168px);
  --abschnitt-eng: clamp(56px, 46.7px + 2.38vw, 80px);
  --rand: clamp(16px, 8.3px + 2vw, 40px); /* seitlicher Rand, 16 px auf dem Handy */

  /* Breiten, Richtung 2 */
  --breite-text: 620px;
  --breite-inhalt: 1120px;

  /* Ecken und Linien: klein, nie Pille */
  --radius: 2px;
  --radius-flaeche: var(--radius); /* Fotos und Flächen; die Fassung .rund (Marie, 2026-10-29) setzt beides weicher */
  --linie-staerke: 1px;

  /* Touch-Mindesthöhe für Buttons und Felder */
  --touch: 48px;

  /* Bewegung: nur der Wechsel der zwei Zustände (Richtung 6) */
  --wechsel: 240ms;
  --wechsel-lang: 480ms; /* Wechsel mit leichter Bewegung im Foto (Runde 6, Vorschlag) */
}