/*
  Design-Tokens: zentrale Werte für das gesamte Erscheinungsbild.
  Werden Farben oder Abstände hier geändert, übernimmt die Website die Änderung überall.
*/
:root {
  /* Markenfarben */
  --color-sand: #fdf8f4;
  --color-tuerkis: #cad1c7;
  --color-blumig: #ea885a;
  --color-tuerkis-dark: #7c8b7d;

  /* Semantische Farben */
  --color-background: var(--color-sand);
  --color-surface: #ffffff;
  --color-surface-muted: var(--color-tuerkis);
  --color-text: #171817;
  --color-text-muted: #5e625e;
  --color-primary: var(--color-tuerkis-dark);
  --color-primary-dark: #536057;
  --color-accent: var(--color-blumig);
  --color-accent-dark: #b85f3b;
  --color-border: #ded8d2;
  --color-sky: var(--color-tuerkis);
  --color-white: #ffffff;
  --color-accent-soft: #f6c9b3;
  --color-header-glass: rgb(253 248 244 / 93%);

  /* Schriften */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-display: "Dancing Script", "Segoe Script", cursive;
  --font-body: "DM Sans", "Segoe UI", Arial, sans-serif;

  /* Schriftgrößen: clamp() passt sie sanft an die Bildschirmbreite an. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.75rem, 3vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 5vw, 4.5rem);

  /* Abstände: ein einheitliches Raster sorgt für Ruhe im Layout. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;

  /* Layout */
  --content-width: 75rem;
  --reading-width: 43rem;
  --content-padding: clamp(1.25rem, 4vw, 3rem);
  --grid-gap: clamp(1.25rem, 3vw, 2rem);
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --shadow-sm: 0 0.5rem 1.75rem rgb(23 24 23 / 7%);
  --shadow-md: 0 1.25rem 3.5rem rgb(23 24 23 / 11%);
  --transition-base: 220ms cubic-bezier(0.22, 1, 0.36, 1);
}