/* =====================================================================
   FREEFIGHT-FITNESS – DESIGN-TOKENS (Design-Staging)
   Diese Datei ist die künftige theme.json in CSS-Form (D-005).
   REGEL: Design-Werte gibt es NUR hier. Kein Hex, keine px-Abstände,
   keine Schriftgrößen irgendwo anders. Herkunft: Webflow-Audit
   (docs/analyse-webflow-export.html, Abschnitt 3).
   ===================================================================== */

:root {
  /* ---- Farben (ersetzt 7 Fast-Schwarz-Töne + Webflow-Blau) ---- */
  --c-brand:       #75b62c;   /* Brand-Grün (Logo, Akzente, CTAs) */
  --c-brand-deep:  #4a711b;   /* dunkles Grün (Verlauf-Endpunkt, Hover) */
  /* Das TIEFE Grün der Alt-Seite (`--dark-green: #293f0c` im Webflow-Export).
     Nur für Radial-Verläufe, deren Rand fast ins Schwarzgrüne läuft – dort macht
     --c-brand-deep den Verlauf flach. Belegt: `.schedule-heading-wrap.schedule-shadow`
     (die Wochentags-Leisten im Kursplan). */
  --c-brand-night: #293f0c;
  --c-ink:         #1d1d1b;   /* DAS eine Schwarz (Text, dunkle Flächen) */
  --c-gray:        #636363;   /* Sekundärtext */
  --c-gray-line:   #cccccc;   /* Linien, Rahmen */
  --c-paper:       #ffffff;   /* Weiß / helle Flächen */
  --c-bg-dark:     var(--c-ink);
  --c-on-dark-dim: #ffffffb3; /* gedimmter Text auf dunklen Flächen */

  /* Hoehe des klebenden Seitenkopfs = Topbar (40) + Kopfleiste (64).
     Wird vom Mobilmenue gebraucht, das als `position: fixed` darunter beginnt.
     ⚠️ Aendert sich eine der beiden Hoehen, muss dieser Wert mit. */
  --kopf-hoehe: 104px;

  /* ---- Typografie ---- */
  --f-display: "Interstate Black Cond", "Arial Narrow", sans-serif;
  --f-head:    "Interstate", Arial, sans-serif;   /* 900 italic vorhanden: Marken-Kursive */
  --f-body:    "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Skala: rem-basiert (zoombar!), fluide Größen NUR via clamp – nie vw pur (Alt-Fehler S4) */
  --fs-small:   0.875rem;
  --fs-body:    1rem;
  --fs-lead:    1.125rem;
  --fs-h4:      clamp(1.125rem, 1rem  + 0.6vw, 1.375rem);
  --fs-h3:      clamp(1.25rem,  1.1rem + 0.9vw, 1.625rem);
  --fs-h2:      clamp(1.625rem, 1.35rem + 1.6vw, 2.25rem);
  --fs-h1:      clamp(2rem,     1.6rem + 2.4vw, 3rem);
  --fs-display: clamp(2.75rem,  2rem  + 4.5vw, 5rem);   /* Hero */

  --lh-tight: 1.1;
  --lh-head:  1.2;
  --lh-body:  1.6;

  /* ---- Abstände (ersetzt %, vw-, vh-, px-Mix; Alt-Fehler K3) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-6: 3rem;
  --sp-8: 4rem;
  --sp-12: 6rem;
  /* Sektions-Rhythmus: überall identisch */
  --section-y: clamp(3rem, 4rem + 2vw, 5.5rem);
  --gap-grid:  clamp(1rem, 0.75rem + 1.5vw, 2rem);

  /* ---- Layout ---- */
  --container:     1160px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* ---- Sonstiges ---- */
  --radius:    12px;
  --radius-sm: 8px;
  /* Haarlinie auf dunklem Grund. Stand 7x hart als #ffffff14 im CSS und 1x
     inline im Markup. Als Token, weil tokens.css die einzige Stelle fuer
     Design-Werte ist und die Linie sonst 8x einzeln zu aendern waere. */
  --c-line-dark: #ffffff14;
  --shadow:    0 8px 30px rgba(0, 0, 0, 0.18);
  --speed:     0.2s;
}

/* Breakpoints (nur Doku – in Media Queries direkt verwenden, mobile-first / min-width):
   ≥ 480px  (sm) · ≥ 768px  (md) · ≥ 992px  (lg)                                    */