/* =========================================================
   Base / Design Tokens
   ---------------------------------------------------------
   Zentrale Stellschrauben (Farben, Typo, Spacing) als CSS
   Custom Properties. Werte spiegeln die Marke "mommy loves
   lilli" (warme, natürliche Creme-/Taupe-Töne, Schreib-
   schrift). Layout bleibt davon unberührt.
   ========================================================= */

/* Schriften: Logo = Sacramento, Akzente = Caveat,
   Fließtext/UI = Quicksand */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Cormorant:wght@500;600;700&family=Quicksand:wght@400;500;600;700&family=Sacramento&display=swap");

:root {
  /* --- Layout --- */
  --container-max: 72rem;
  --container-pad: 1.5rem;

  /* --- Spacing-Skala --- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  /* --- Typografie --- */
  --font-body: "Quicksand", system-ui, sans-serif;
  --font-script: "Sacramento", cursive;     /* Marken-Logo */
  --font-hand: "Caveat", cursive;           /* Akzente */
  --font-serif: "Cormorant", Georgia, serif; /* Display-Überschriften (Kapitälchen) */
  --line-base: 1.65;

  /* --- Farben (Marken-Palette) --- */
  --color-bg: #f3ede3;          /* warmes Creme / Papier */
  --color-bg-soft: #ece2d4;     /* sanfte Wellen, leicht dunkler */
  --color-fg: #8b7b68;          /* gedämpftes Taupe-Braun (Fließtext) */
  --color-heading: #7a6a57;     /* dunkleres Braun (Überschriften) */
  --color-accent: #9c8b79;      /* Logo-Schrift */
  --color-accent-soft: #c9afa1; /* zartes Rosé-Taupe (Hero) */
  --color-link: #b6967f;        /* Links / E-Mail */
  --color-border: #ddd2c2;      /* dezente Linien */
  --color-field: #fbf7f0;       /* Formularfelder */
  --color-dark: #4a3f33;        /* dunkles Warm-Braun (Buttons) */

  /* --- Rundungen (bewusst großzügig) --- */
  --radius-sm: 0.75rem;   /* 12px */
  --radius-md: 1.25rem;   /* 20px – Buttons */
  --radius-lg: 2rem;      /* 32px – Bilder / Karten */
  --radius-xl: 2.75rem;   /* 44px – große Medien */
  --radius-pill: 999px;

  /* --- Effekte --- */
  --shadow-soft: 0 10px 30px rgba(123, 106, 87, 0.14);
  --shadow-card: 0 18px 50px rgba(123, 106, 87, 0.18);
}

html {
  background: var(--color-bg);
}

body {
  font-family: var(--font-body);
  line-height: var(--line-base);
  color: var(--color-fg);
  background: var(--color-bg);
}

/* Barrierefreiheit: visuell verstecken, für Screenreader sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}