/* Praxis für Physiotherapie Carolin Weiss — Design Tokens (nur :root-Variablen) */
:root {
  /* Farbe */
  --color-brand: #26c279;
  --color-logo-green: #3fd392;
  --color-brand-strong: #0f6e3f;
  --color-brand-deep: #0b5a34;
  --color-brand-tint: #e3f6ec;
  --color-on-brand-strong: #ffffff;
  --color-ink: #1a1919;
  --color-ink-body: #333333;
  --color-ink-muted: #5c5954;
  --color-surface: #ffffff;
  --color-surface-mist: #f3f5f8;
  --color-sand-50: #f7f6f3;
  --color-sand-100: #ecebe7;
  --color-sand-300: #d8ccbe;
  --color-sand-500: #c8b6a2;
  --color-border: #dcd6cc;
  --color-border-strong: #857f77;
  --color-focus: #1a1919;
  --color-focus-inverse: #ffffff;
  --color-success: var(--color-brand-strong);
  --color-success-surface: var(--color-brand-tint);
  --color-error: #b3261e;
  --color-error-surface: #fbeae8;
  /* Schrift */
  /* Überschriftenschrift und ihre Stärke (Umschalter):
     Playfair Display (Variable Font, Stärke 400-900 frei wählbar, aktuell 600).
     Bei einem Wechsel der Familie Schriftdateien und @font-face in fonts.css ergänzen
     und in inc/assets.php die vorgeladene Datei tauschen. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-display-weight: 600;
  --font-sans: "Open Sans", "Segoe UI", Arial, sans-serif;
  /* Schriftgrößen (fließend, Bezug .cw-page) */
  --text-display: clamp(2.25rem, 1.414rem + 3.429cqi, 4.5rem);
  --text-h1: clamp(2rem, 1.443rem + 2.286cqi, 3.5rem);
  --text-h2: clamp(1.625rem, 1.3rem + 1.333cqi, 2.5rem);
  --text-h3: clamp(1.25rem, 1.157rem + 0.381cqi, 1.5rem);
  --text-h4: clamp(1.125rem, 1.079rem + 0.1905cqi, 1.25rem);
  --text-h5: clamp(1.0625rem, 1.039rem + 0.0952cqi, 1.125rem);
  --text-lead: clamp(1.1875rem, 1.118rem + 0.2857cqi, 1.375rem);
  --text-body: clamp(1.0625rem, 1.039rem + 0.0952cqi, 1.125rem);
  --text-small: clamp(0.9375rem, 0.9143rem + 0.0952cqi, 1rem);
  --text-label: clamp(0.875rem, 0.8518rem + 0.0952cqi, 0.9375rem);
  --text-button: 1.0625rem;
  /* Abstand */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-section-s: clamp(48px, 36.9px + 2.857cqi, 78px);
  --space-section-m: clamp(64px, 44.5px + 5cqi, 112px);
  --space-section-l: clamp(80px, 52.1px + 7.143cqi, 144px);
  --space-page-margin: clamp(20px, 12.6px + 1.905cqi, 48px);
  --space-gutter: clamp(16px, 10.1px + 1.524cqi, 32px);
  --container-max: 1240px;
  --container-wide: 1440px;
  --container-text: 42rem;
  --header-height: 88px;
  --header-height-compact: 64px;
  --touch-min: 44px;
  --border-width: 1px;
  --focus-width: 3px;
  /* Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 32px;
  --radius-pill: 999px;
  /* Schatten */
  --shadow-sm: 0 1px 2px rgba(26,25,25,0.06), 0 2px 6px rgba(26,25,25,0.06);
  --shadow-md: 0 12px 32px -12px rgba(26,25,25,0.18);
  --shadow-lg: 0 24px 64px -16px rgba(26,25,25,0.28);
  /* Bewegung */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 250ms;
  --ease-out: cubic-bezier(.2, .7, .3, 1);
}
