/* Habba Design Tokens – CSS Custom Properties
   Hauptfarbe: Grün (Logo Mischform E Grün). Akzent/Kontrast: Brunnenblau (Logo Mischform E Blau). */
:root {
  --c-waldgruen: #1F4A37; /* Waldgrün */
  --c-blattgruen: #2F6B4F; /* Blattgrün */
  --c-keimgruen: #8DBF6A; /* Keimgrün */
  --c-keimgruen-hell: #A9D38A; /* Keimgrün hell */
  --c-keimgruen-dunkel: #6FA05A; /* Keimgrün dunkel */
  --c-brunnenblau: #1B5E8C; /* Brunnenblau */
  --c-nachtblau: #17415F; /* Nachtblau */
  --c-morgenlicht: #F2F5EF; /* Morgenlicht */
  --c-weiss: #FFFFFF; /* Weiß */
  --c-tinte: #1C2B24; /* Tinte */
  --c-gedaempft: #52615A; /* Gedämpft */
  --c-linie: #D7DED6; /* Linie */
  --c-blatt-hauch: #E4EEE6; /* Blatt-Hauch */
  --c-brunnen-hauch: #E6EFF6; /* Brunnen-Hauch */
  --c-hinweis: #9A5B12; /* Hinweis */
  --c-hinweis-hauch: #FBF1E1; /* Hinweis-Hauch */
  --c-fehler: #A4262C; /* Fehler */

  /* Rollen */
  --primary: var(--c-blattgruen);
  --primary-strong: var(--c-waldgruen);
  --primary-tint: var(--c-blatt-hauch);
  --on-primary: var(--c-weiss);
  --contrast: var(--c-brunnenblau);
  --contrast-strong: var(--c-nachtblau);
  --contrast-tint: var(--c-brunnen-hauch);
  --on-contrast: var(--c-weiss);
  --accent: var(--c-keimgruen);
  --accent-on-dark: var(--c-keimgruen-hell);
  --bg: var(--c-morgenlicht);
  --surface: var(--c-weiss);
  --text: var(--c-tinte);
  --text-muted: var(--c-gedaempft);
  --border: var(--c-linie);

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-arabic: 'Noto Naskh Arabic', 'Geeza Pro', serif;

  --fs-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem); --lh-display: 1.05; --tr-display: -0.025em; --fw-display: 800;
  --fs-h1: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); --lh-h1: 1.1; --tr-h1: -0.02em; --fw-h1: 700;
  --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem); --lh-h2: 1.15; --tr-h2: -0.015em; --fw-h2: 700;
  --fs-h3: 1.375rem; --lh-h3: 1.25; --tr-h3: -0.01em; --fw-h3: 700;
  --fs-lead: 1.25rem; --lh-lead: 1.55; --tr-lead: 0; --fw-lead: 400;
  --fs-body: 1.0625rem; --lh-body: 1.65; --tr-body: 0; --fw-body: 400;
  --fs-small: 0.9375rem; --lh-small: 1.5; --tr-small: 0; --fw-small: 400;
  --fs-caption: 0.8125rem; --lh-caption: 1.45; --tr-caption: 0.01em; --fw-caption: 500;

  --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: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-raised: 0 1px 2px rgba(28,43,36,.06), 0 8px 24px rgba(28,43,36,.06);
  --focus-ring: 0 0 0 3px var(--c-weiss), 0 0 0 6px var(--primary);
  --max: 1200px; --measure: 68ch; --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --dur-fast: 120ms; --dur-base: 200ms; --ease: cubic-bezier(.2,.7,.2,1);
}

@media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } }