/* ============================================
   KüchenWacht Wien — Design Tokens v1.0
   Verbindliche CI-Grundlage. Keine Farben/Fonts
   außerhalb dieser Tokens verwenden.
   ============================================ */

:root {
  /* --- Farben (CI) --- */
  --kw-dunkelblau: #102A43;   /* Primär: Headlines, Logo, Footer-BG, Buttons sekundär */
  --kw-kupfer:     #B87333;   /* Akzent: CTAs, Checkmarks, Hover, Highlights — SPARSAM */
  --kw-offwhite:   #F7F9FB;   /* Seitenhintergrund */
  --kw-hellgrau:   #D9E2EC;   /* Linien, Karten-Border, Sektions-Trenner */

  /* Abgeleitete Töne (aus CI-Farben berechnet, keine neuen Farben) */
  --kw-blau-90:    #1C3A57;   /* Hover auf Dunkelblau */
  --kw-blau-tint:  #E8EEF4;   /* dezente Info-Flächen */
  --kw-kupfer-dark:#9A5F28;   /* Hover auf Kupfer-CTA */
  --kw-text:       #102A43;   /* Fließtext = Dunkelblau, kein reines Schwarz */
  --kw-text-mut:   #486581;   /* Sekundärtext (Dunkelblau aufgehellt) */
  --kw-white:      #FFFFFF;

  /* --- Typografie --- */
  --kw-font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Gewichte: 800 Headlines / 700 Subheads+Buttons / 600 Labels / 400-500 Fließtext */
  --kw-h1: clamp(2rem, 4.5vw, 3.25rem);
  --kw-h2: clamp(1.5rem, 3vw, 2.25rem);
  --kw-h3: 1.25rem;
  --kw-body: 1.0625rem;
  --kw-small: 0.875rem;
  --kw-lh-tight: 1.15;
  --kw-lh-body: 1.65;
  --kw-track-caps: 0.08em;    /* für Eyebrows/Servicezeile in Versalien */

  /* --- Layout --- */
  --kw-maxw: 1200px;
  --kw-section-y: clamp(4rem, 8vw, 7rem);
  --kw-radius: 10px;
  --kw-radius-lg: 16px;
  --kw-shadow: 0 4px 24px rgba(16, 42, 67, 0.08);
  --kw-shadow-lift: 0 12px 40px rgba(16, 42, 67, 0.14);
}

/* Regeln:
   1. Kupfer NUR für: primäre CTAs, Checkmark-Listen, aktive Zustände,
      Zahlen/Highlights. Nie für Flächen > 80px Höhe, nie für Fließtext.
   2. Dunkelblau-Sektionen (Footer, CTA-Banner) nutzen Off-White-Text
      und die weiße Logo-Variante.
   3. Fokus-Ringe: 2px solid var(--kw-kupfer), offset 2px — immer sichtbar.
   4. prefers-reduced-motion respektieren: alle Animationen abschaltbar. */