:root {
  /* Farben — Navy + Pink 1:1 aus dem echten Logo (Hund navy, Katze/Herz pink),
     kombiniert mit dem bestehenden warmen Creme als dritter, neutraler Ton. */
  /* Logo-Pink ist #C24893 - als reiner Text-/Button-Ton auf Creme landet das
     knapp unter WCAG AA (4.2:1) und Weiß-auf-Button bei nur 4.53:1. #A93B7D
     liegt nah am Original, erreicht aber >5:1 in beiden Richtungen. Das
     Logo-Bild selbst bleibt unverändert in den Original-Farben. */
  --color-primary: #A93B7D;
  --color-primary-hover: #8A2F65;
  --color-primary-soft: #F3DCEA;
  --color-on-primary: #FFFFFF;

  /* Logo-Navy, 1:1 unverändert - trägt bei Weiß-Text/hellem Hintergrund ohnehin
     sehr hohen Kontrast (>13:1), keine Anpassung nötig. */
  --color-secondary: #28235B;
  --color-secondary-soft: #DEDBEC;
  --color-on-secondary: #FFFFFF;

  /* Dritter Akzent (Gold) bewusst beibehalten statt Navy+Pink pur - liest sich
     als bewusste Mischung statt "alles pink", z.B. für kleine Details/Badges. */
  --color-accent: #D9A441;
  --color-on-accent: #2B2420;

  --color-background: #FBF6EE;
  --color-background-alt: #F1EAD9;
  --color-foreground: #201E33;

  --color-card: #FFFCF7;
  --color-card-foreground: #201E33;

  --color-muted: #F1EAD9;
  --color-muted-foreground: #6B6570;

  --color-border: #E7DCC9;
  --color-destructive: #C0392B;
  --color-on-destructive: #FFFFFF;
  --color-success: #4A7C59;
  --color-ring: #A93B7D;

  /* Typografie */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Skala bewusst zurückhaltend statt "shouty" - Playfair Display wirkt bei
     gleicher px-Zahl schon deutlich präsenter als eine Grotesk, darum eher
     am unteren Ende üblicher Marketing-Skalen. */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.2rem + 0.35vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.4rem + 0.6vw, 1.875rem);
  --text-3xl: clamp(1.75rem, 1.55rem + 1vw, 2.5rem);
  --text-4xl: clamp(2.125rem, 1.85rem + 1.5vw, 3.25rem);

  /* Abstände */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Radien & Schatten */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(32, 30, 51, 0.08);
  --shadow-md: 0 8px 24px rgba(32, 30, 51, 0.10);
  --shadow-lg: 0 20px 48px rgba(32, 30, 51, 0.14);
  --shadow-xl: 0 32px 72px rgba(32, 30, 51, 0.18);

  /* Bewegung */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  --container-width: 1200px;
}