/* ============================================================
   Reicht-Site-Kit — Basis-Tokens (markenneutral)
   Geteilt über alle Marken der Reicht-Gruppe: Neutrale, Typo-System,
   fluide Skala, Spacing, Layout, Bewegung, Schatten.

   MARKEN-KONTRAKT — jede Tochter-Site liefert eine eigene
   tokens.<marke>.css und MUSS folgende semantische Tokens setzen:

     --brand          Primärfarbe (Logo-Farbe)
     --brand-deep     dunkler Anker (Hero, Footer, dunkle Sektionen)
     --brand-grad-a   Verlauf-Stopp dunkel  (Hero/Footer)
     --brand-grad-b   Verlauf-Stopp hell
     --accent         Akzentfarbe (CTAs, Linien) — sparsam
     --accent-ink     Textfarbe AUF gefülltem Akzent (Kontrast!)
     --accent-bright  helleres Akzent für TEXT auf dunklen Flächen
                      (Eyebrow/Kicker) — WCAG-Kontrast; fällt auf
                      --accent zurück, wenn nicht gesetzt
     --on-brand       Textfarbe auf --brand-Flächen (i. d. R. #fff)
     --surface-soft   sanfte getönte Fläche (ruhige Sektionen/Karten)
     --brand-tint     dezenter Marken-Wash (rgba, ~8 %)
     --ink-overlay    Scrim/Overlay über Bild/Verlauf (rgba)
     --focus          Fokus-Ring (i. d. R. = --accent)
     --eyebrow        Eyebrow-Textfarbe auf hell (i. d. R. = --brand)

   So bleibt das Komponenten-CSS markenfrei und wiederverwendbar.
   ============================================================ */

:root {
  /* ---- Neutrale (geteilt, Reicht-CI) ---- */
  --paper:       #F6F5F1;   /* Body-Hintergrund */
  --paper-pure:  #FAF9F5;   /* Karten auf Paper */
  --anthrazit:   #1A1A1A;   /* Fließtext — nie reines Schwarz */
  --slate:       #7A7A75;   /* Sekundärtext, Metadaten (Flächen/große Schrift) */
  --slate-ink:   #6D6D67;   /* Slate, AA-abgedunkelt für kleinen Text auf Paper (≥4,5:1) */
  --stone:       #DCDAD0;   /* Trennlinien, Rahmen */
  --white:       #FFFFFF;

  /* ---- Auf dunklen Flächen ---- */
  --on-dark:       rgba(255, 255, 255, 0.86);
  --on-dark-soft:  rgba(255, 255, 255, 0.62);
  --hairline-dark: rgba(255, 255, 255, 0.14);

  /* ---- Schrift (Reicht-System) ---- */
  --font-display: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Fluide Typo-Skala (mobile-first via clamp) ---- */
  --fs-hero:    clamp(2.4rem, 1.35rem + 4.6vw, 4.6rem);
  --fs-h2:      clamp(1.7rem, 1.15rem + 2.3vw, 2.7rem);
  --fs-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.34vw, 1.22rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.72rem;

  /* ---- Spacing-Skala ---- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --section-y: clamp(4.5rem, 2rem + 8vw, 8rem);

  /* ---- Layout ---- */
  --container:        1200px;
  --container-narrow: 760px;
  --gutter:           clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --header-h:         72px;
  --radius:           4px;
  --radius-lg:        8px;

  /* ---- Bewegung ---- */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:      0.6s;
  --dur-fast: 0.25s;

  /* ---- Schatten ---- */
  --shadow-sm: 0 1px 2px rgba(18, 53, 43, 0.06);
  --shadow-md: 0 10px 34px rgba(18, 53, 43, 0.12);
}