/*
  Design-Tokens — Office-Flow-Markenfarben (aus bestehender Website übernommen).
  Rebranding betrifft künftig NUR diese Datei, nie Komponenten-Code.
*/
:root {
  /* Farben — Office-Flow-Markenpalette */
  --color-bg:          #ffffff;
  --color-surface:     #FBF0E8; /* warmes Creme, exakt aus dem Print-Flyer (Canva) übernommen */
  /* Textfarben: warme Dunkelbraun-Toene passend zur Flyer-Palette (Canva-Hex fuer Text nicht vorhanden -> abgeleitet, bei Bedarf durch exakte Werte ersetzen) */
  --color-text:        #2E1F1B;
  --color-body-text:   #4D3D38;
  --color-muted-text:  #75655F;
  --color-border:      #EBDCD2;
  --color-accent:      #A77A6E; /* Flyer (Canva): dunkleres Rose/Taupe -- Buttons, Links, Akzente */
  --color-panel:       #D5ADA2; /* Flyer (Canva): grosse Flaechenfarbe -- Hero und CTA-Baender (flach, ohne Overlay) */
  --color-on-panel:    #2E1F1B; /* Text auf der Panel-Flaeche: dunkelbraun (Weiss haette nur ~2:1 Kontrast) */
  --color-accent-text: #ffffff;

  /* Schrift — modern, self-hosted/System-Stack, kein Google-Fonts-CDN */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Typografie-Skala */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* 8px Spacing-Grid */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  /* Layout */
  --container-max: 1280px;
  --container-narrow: 780px;
  --radius-sm: 4px;
  --radius-md: 8px;
}