/* ==========================================================================
   LUNGE IM NORDEN — Design-Tokens
   Master-Datei. Identische Kopie liegt in site/assets/css/tokens.css —
   vor jedem Deploy prüfen: diff Design/tokens.css site/assets/css/tokens.css
   Richtung: "Organisch & atmend" — Praxis-Grün + Petrol + warmes Sand.
   ========================================================================== */
:root {
  /* ----- Marke (aus dem Logo: linke Lunge Grün, rechte Lunge Petrol) -----
     Nur für Deko, Icons und große fette Headlines (≥24px bold) —
     --green-brand erreicht auf Weiß kein AA für Fließtext (3,3:1). */
  --green-brand:  #4a9e3f;
  --petrol-brand: #0a678e;  /* direkt aus dem Logo gesampelt (rechte Lunge) */

  /* ----- AA-sichere Ableitungen (Text, Links, Buttons) ----- */
  --green-700:  #2f6b28;   /* ~6,4:1 auf Weiß — Buttons, Links */
  --green-800:  #245220;   /* Hover / aktiv */
  --petrol-700: #135d80;   /* ~7,2:1 auf Weiß — Text auf Tint-Flächen */
  --petrol-800: #114a66;

  /* ----- Hintergründe (warm, Sand) ----- */
  --bg-page:      #f7f3ec;  /* Grundfläche */
  --bg-surface:   #fffdf9;  /* Karten */
  --bg-sand-deep: #efe6d8;  /* Wechselflächen */
  --tint-green:   #e9f1e4;  /* Leistungs-Icons, Blob-Deko */
  --tint-petrol:  #e2eff5;  /* Termin-Sektion (türkis-getönt, passend zum Logo-Petrol) */
  --footer-bg:    #22302a;  /* dunkler, warmer Abschluss */

  /* ----- Text ----- */
  --text-primary: #22302a;  /* warmes Dunkelgrüngrau, ~13:1 auf Sand */
  --text-muted:   #52605a;  /* ~6:1 auf Sand */
  --text-on-dark: #fffdf9;

  /* ----- Form ----- */
  --radius-sm: 16px;
  --radius-lg: 24px;
  --radius-round: 999px;
  --shadow-soft: 0 8px 32px rgba(42, 62, 48, 0.10);
  --shadow-lift: 0 14px 44px rgba(42, 62, 48, 0.16);

  /* ----- Typografie (fluid, bewusst ≥17px Body für ältere Klientel) ----- */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --fs-h1: clamp(2.1rem, 4.6vw + 1rem, 3.4rem);
  --fs-h2: clamp(1.55rem, 2.6vw + 0.8rem, 2.3rem);
  --fs-h3: clamp(1.15rem, 1vw + 0.9rem, 1.35rem);
  --fs-body: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --fs-small: 0.9375rem;

  /* ----- Rhythmus ----- */
  --space-section: clamp(80px, 12vh, 150px);
  --gutter: clamp(20px, 5vw, 64px);
  --max-width: 1200px;
  --header-h: 76px;

  /* ----- Motion ----- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 700ms;
  --dur-breath: 4s;   /* Atem-Takt: Logo + Haupt-CTA, sonst nichts */
}