/* ============================================================
   DESIGN TOKENS — zentrale Variablen (Single Source of Truth)
   ------------------------------------------------------------
   Wird via functions.php (Handle 'ob-tokens') als ERSTES auf allen
   ob-Seiten geladen. Geometrie, Typo, Buttons, Farben hier ändern
   → wirkt überall. So wird vor allem die SEITENBREITE aktiv gemanagt
   statt in dutzenden Dateien hartkodiert.

   ⚠️ WICHTIG: @media-BEDINGUNGEN können KEINE var() nutzen
   (CSS-Limitierung). Der einzige breitenabhängige Breakpoint
   --ob-maxw-wide (= --ob-maxw + 2×--ob-gutter = 1264px) muss in
   nav.css im `@media (min-width: 1264px)` MANUELL synchron gehalten
   werden (dort kommentiert). Alles andere läuft über die Tokens.
   ============================================================ */
:root {
  /* ----- Layout / Seitenbreite (DAS aktiv zu managende Maß) ----- */
  --ob-maxw:        1200px;   /* Content-/Site-Breite — eine Quelle */
  --ob-maxw-wide:   1264px;   /* = maxw + 2×gutter (Hero-Inner, breite Container) */
  --ob-maxw-narrow:  900px;   /* schmale Container (Lesespalten) */
  --ob-gutter:        32px;   /* seitlicher Rand Desktop/Tablet */
  --ob-gutter-sm:     20px;   /* seitlicher Rand < 600px */

  /* ----- Typografie ----- */
  --ob-fs-base: 18px;         /* html-Basis; alle rem skalieren hierüber */
  /* Skala (rem, relativ zur Basis) — für NEUE Styles verwenden */
  --ob-fs-2xs:  0.6875rem;
  --ob-fs-xs:   0.75rem;
  --ob-fs-sm:   0.8125rem;
  --ob-fs-md:   0.875rem;
  --ob-fs-lg:   0.9375rem;
  --ob-fs-body: 1rem;
  --ob-fs-xl:   1.125rem;
  --ob-fs-2xl:  1.25rem;
  --ob-fs-3xl:  1.5rem;
  --ob-fs-4xl:  1.75rem;
  --ob-fs-h2:   2.25rem;
  --ob-fs-h1:   clamp(2.875rem, 5vw, 4.5rem);

  /* ----- Buttons ----- */
  --ob-btn-fs:     0.9375rem;
  --ob-btn-fs-sm:  0.875rem;
  --ob-btn-py:     14px;
  --ob-btn-px:     32px;
  --ob-btn-py-sm:  10px;
  --ob-btn-px-sm:  22px;
  --ob-btn-radius: 2px;

  /* ----- Farben (Brand) ----- */
  --ob-teal:      #4DB6AC;
  --ob-teal-dark: #3A9088;
  --ob-dark:      #1C2130;
  --ob-body:      #555C6B;
  --ob-cream:     #F5F2EE;
  --ob-footer-bg: #151A27;
}