/**
 * Design Tokens — Hammerl Brot Theme
 *
 * Single source of truth für Breiten, Spacing, Farben, Typografie.
 * Override in components.css oder Inline-Styles auf Section-Ebene.
 */

:root {
  /* === Breiten === */
  --width-content: 1170px;     /* Standard-Container (wie aktuell Live) */
  --width-wide:    1380px;     /* Hero/Wide-Sections */
  --width-narrow:   720px;     /* Fließtext-Spalte */

  /* === Spacing === */
  --space-xs:  8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 96px;

  /* === Farben (Hammerl CI — TBD final mit Simon) === */
  --color-bg:             #ffffff;
  --color-bg-warm:        #f8f5f0;
  --color-text:           #2a2118;
  --color-text-muted:     #666666;
  /* Blasses Weizen-Gelb — sanfte Backgrounds, CTA-Sections, Hover-Wash */
  --color-accent:         #f0e4a8;
  /* Dunkles Ocker — Buttons, Links, Icons, Focus-Ring (Kontrast auf #fff) */
  --color-accent-strong:  #8a6d1c;
  /* Tiefer Holzton — Hover-States auf strong */
  --color-accent-2:       #6b3410;
  --color-border:         #e5e0d8;

  /* === Typografie ===
   * Display-Font = Amatic SC (handschriftlich, schmal, hoch) — passt zum
   * handgeschriebenen "Hammerl"-Logo. Bewusst NUR für große Display-Headlines.
   * @font-face liefert legacy-from-live.css als 'Amatic SC' (regular + 700).
   * Amatic baut sehr schmal → in den Heading-Selektoren ~1.3x größer skaliert.
   *
   * --font-heading = Standard-Heading-Font ALLER Komponenten-Headings
   * (`var(--font-heading, "Droid Serif")`, 15 Stellen in components.css). Bewusst
   * SERIF (Droid Serif), damit kleine/mittlere Headings (Karten, FAQ-Fragen,
   * Zitate, Kontaktname) gut lesbar bleiben. Amatic kommt NICHT pauschal hierüber,
   * sondern nur gezielt über --font-display in den Display-Headline-Selektoren am
   * Ende von components.css. */
  --font-display: 'Droid Serif', Georgia, serif; /* Amatic deaktiviert 2026-06-15 (Kundenwunsch) */
  --font-heading: 'Droid Serif', Georgia, serif;
  --font-body:    'OpenSans', system-ui, sans-serif;

  --fs-h1:   clamp(32px, 5vw, 56px);
  --fs-h2:   clamp(24px, 3.5vw, 38px);
  --fs-h3:   clamp(20px, 2.5vw, 26px);
  --fs-body: 17px;
  --fs-small:14px;

  /* Display-Headline-Größen — Amatic ist schmal, daher großzügiger als die
   * generische Skala (ca. 1.3x). Eigene Tokens, damit Fließtext-Skala unberührt bleibt. */
  --fs-display-xl: clamp(44px, 6.5vw, 76px);   /* Hero-Headline */
  --fs-display-lg: clamp(34px, 4.5vw, 56px);   /* große Section-Headings */
  --lh-display: 1.05;

  --lh-tight: 1.15;
  --lh-base:  1.55;

  /* === Radien + Schatten === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --shadow-soft:   0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.18);

  /* === Transitions === */
  --transition-base: 0.2s ease-out;
}