/* ==========================================================================
   Design-Tokens
   Zentrale Variablen für Farben, Typografie und Spacings.
   Quelle: Figma-Datei "Claude-Testprojekt", Komponenten-Seite.
   ========================================================================== */

:root {
  /* --- Farben --- */
  --color-primary: #9c4651;
  --color-primary-hover: #bb5461;
  --color-text-dark: #000000;
  --color-text-dark-alt: #111827;
  --color-text-light: #ffffff;
  --color-bg-light: #ffffff;
  --color-bg-dark: #333333;
  --color-border: #e5e7eb;

  /* Akzentfarben (Status-/Kategorie-Hintergründe, für spätere Unterseiten) */
  --color-accent-rose: #ffdddd;
  --color-accent-green: #e0eed9;
  --color-accent-sand: #eee6d9;
  --color-accent-blue: #d9e3ee;
  --color-accent-lilac: #ebd9ee;
  --color-accent-rosewood: #eed9d9;

  /* Hero-Verlauf */
  --gradient-hero: linear-gradient(
    180deg,
    rgba(220, 131, 142, 1) 0%,
    #bb5461 50%,
    rgba(156, 70, 81, 0.99) 100%
  );

  /* --- Typografie --- */
  --font-family-base: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-h1: 48px;
  --lh-h1: 1.2;
  --ls-h1: 0.48px;

  --fs-h2: 40px;
  --lh-h2: 1.2;
  --ls-h2: 0.4px;

  --fs-h3: 24px;
  --lh-h3: 1.2;
  --ls-h3: 0.24px;

  --fs-subtitle: 24px;
  --lh-subtitle: 1.3;
  --ls-subtitle: 0.24px;

  --fs-body: 20px;
  --lh-body: 1.3;
  --ls-body: 0.2px;

  --fs-label: 20px;
  --lh-label: 1.2;
  --ls-label: 0.2px;

  /* --- Spacing (als Variablen im Figma-Dokument hinterlegt) --- */
  --spacing-4: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-40: 40px;
  --spacing-80: 80px;
  --button-height: 48px;

  /* Spacing, das im Figma-Layout fest codiert (nicht als Variable) vorkommt */
  --spacing-8: 8px;
  --spacing-24: 24px;
  --spacing-32: 32px;

  /* Layout */
  --content-max-width: 1512px;
  --breakpoint: 700px;
}

/* Mobile-Anpassungen der Typografie-Tokens (Breakpoint 700px) */
@media (max-width: 700px) {
  :root {
    --fs-h1: 24px;
    --ls-h1: 0.24px;

    --fs-h2: 20px;
    --ls-h2: 0.2px;

    --fs-h3: 16px;
    --ls-h3: 0.16px;

    --fs-subtitle: 20px;
    --ls-subtitle: 0.2px;

    --fs-body: 16px;
    --ls-body: 0.16px;

    --fs-label: 16px;
    --ls-label: 0.16px;
  }
}