/*
 * Design-Tokens
 * -------------
 * Alle Farben/Schriftgroessen aus dem Figma-Design als CSS-Variablen.
 * body.institution-kita / body.institution-hort ueberschreiben die
 * "--institution-*" Variablen -- so verwenden Landingpages, Header, Footer
 * und Beitraege ueberall dieselben Variablennamen und faerben sich je nach
 * Kontext automatisch passend ein.
 */

:root {
  /* neutrale Basis */
  --color-bg-page: #f2f2eb;
  --color-white: #ffffff;
  --color-border: #d9d3d3;
  --color-text: #1a1a1a;
  --color-text-gray: #5f5f5f;

  /* Kita ("Kindergarten") */
  --color-kita-bg: #e9e290;
  --color-kita-bg-soft: #e1d876;
  --color-kita-text: #645e20;
  --color-kita-accent: #bd9400;

  /* Hort ("Schulhort") */
  --color-hort-bg: #a0c86e;
  --color-hort-bg-strong: #80a551;
  --color-hort-text: #44572d;
  --color-hort-accent: #456826;

  /* aktive Institution -- Default = Kita-Farben, wird per Body-Klasse ersetzt */
  --institution-bg: var(--color-kita-bg);
  --institution-bg-strong: var(--color-kita-bg-soft);
  --institution-text: var(--color-kita-text);
  --institution-accent: var(--color-kita-accent);

  /* Typografie */
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-h1: clamp(2.25rem, 4vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3vw, 3rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.6rem);
  --fs-body: 1.125rem;
  --fs-small: 0.95rem;

  /* Layout */
  --content-max-width: 1400px;
  --radius-card: 10px;
  --radius-pill: 999px;
  --space-section: clamp(3rem, 6vw, 6rem);
}

body.institution-hort {
  --institution-bg: var(--color-hort-bg);
  --institution-bg-strong: var(--color-hort-bg-strong);
  --institution-text: var(--color-hort-text);
  --institution-accent: var(--color-hort-accent);
}