/* ==========================================================================
   Paint & Fix by Steiner — Design Tokens
   1:1 übernommen aus /styleguide/styleguide.md Abschnitt 8
   Nicht verändern, ohne den Styleguide zu aktualisieren.
   ========================================================================== */

:root {
  /* Typografie — Größen */
  --type-display-1: 96px;
  --type-display-2: 64px;
  --type-h1: 40px;
  --type-h2: 32px;
  --type-h3: 20px;
  --type-h4: 18px;
  --type-h5: 16px;
  --type-h6: 16px;
  --type-text-large: 20px;
  --type-text: 18px;
  --type-text-small: 16px;
  --type-label: 14px;
  --type-caption: 12px;

  /* Typografie — Line-heights */
  --lh-display-1: 100px;
  --lh-display-2: 68px;
  --lh-h1: 50px;
  --lh-h2: 44px;
  --lh-h3: 28px;
  --lh-h4: 26px;
  --lh-h5: 24px;
  --lh-h6: 20px;
  --lh-text-large: 32px;
  --lh-text: 27px;
  --lh-text-small: 24px;

  /* Farben */
  --color-primary: #1F4B39;
  --color-accent: #8AB65C;
  --color-primary-darkest: #123023;
  --color-black: #3A3835;
  --color-dark: #6B6459;
  --color-body: #3A3835;
  --color-gray-100: #EDEBE7;
  --color-gray-200: #E4E1DA;
  --color-gray-300: #D2CCC0;
  --color-gray-600: #6B6459;
  --color-white: #FFFFFF;

  /* Sektions-Hintergrund „Grau hell" (abwechselnde Sections) */
  --color-surface-alt: #F3F1ED;

  /* Spacing-Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 40px;
  --space-10: 48px;
  --space-12: 64px;
  --space-16: 80px;
  --space-20: 96px;
  --space-24: 120px;
  --space-32: 160px;

  /* Grid */
  --container-max: 1300px;
  --container-article: 900px;
  --gutter-desktop: 40px;
  --gutter-tablet: 24px;
  --gutter-mobile: 16px;
  --grid-gap: 24px;

  /* Radius — alle Elemente eckig */
  --radius-button: 0;

  /* Schatten */
  --shadow-card: 0 2px 16px rgba(0,0,0,0.06);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,0.10);

  /* Schriften — Google Fonts: Hanken Grotesk */
  --font-family: "Hanken Grotesk", sans-serif;
  --font-family-display: "Hanken Grotesk", sans-serif;
  --font-family-body: "Hanken Grotesk", sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-black: 900;
}