/**
 * Design Tokens — Esmeraldas Hexencafé
 * ------------------------------------
 * Einzige Quelle für Farben, Typografie, Abstände & Container-Breiten.
 * Abgeleitet direkt aus dem verbindlichen Mockup (siehe Projektbriefing).
 * Gold wird bewusst NUR als Akzent-Token verwendet, nie als Flächenfarbe.
 */

:root {
  /* ---- Farbpalette (Mockup-Vorgabe) -------------------------------- */
  --color-witch-black: #151311;
  --color-dark-forest: #243127;
  --color-cream: #f3ebdd;
  --color-parchment: #e6d6b8;
  --color-gold: #b18a4a;
  --color-gold-light: #cba86a;
  --color-coffee: #6b4932;

  /* Funktionale Zuordnung */
  --color-bg-dark: var(--color-witch-black);
  --color-bg-forest: var(--color-dark-forest);
  --color-bg-light: var(--color-cream);
  --color-bg-parchment: var(--color-parchment);
  --color-text-on-dark: var(--color-cream);
  --color-text-on-dark-muted: rgba(243, 235, 221, 0.72);
  --color-text-on-light: var(--color-witch-black);
  --color-text-on-light-muted: rgba(21, 19, 17, 0.68);
  --color-border-gold: rgba(177, 138, 74, 0.45);
  --color-divider-on-dark: rgba(177, 138, 74, 0.35);

  /* Hero-/Bild-Overlay */
  --overlay-hero: linear-gradient(
    180deg,
    rgba(21, 19, 17, 0.55) 0%,
    rgba(21, 19, 17, 0.35) 35%,
    rgba(21, 19, 17, 0.75) 100%
  );
  --overlay-image-caption: linear-gradient(
    180deg,
    rgba(21, 19, 17, 0) 0%,
    rgba(21, 19, 17, 0.82) 100%
  );

  /* ---- Typografie ---------------------------------------------------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", Arial, Helvetica, sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-h1: clamp(2.25rem, 1.65rem + 4.4vw, 5.25rem);
  --fs-h2: clamp(2.1rem, 1.9rem + 1.8vw, 3.25rem);
  --fs-h3: clamp(1.5rem, 1.35rem + 0.8vw, 2rem);
  --fs-lead: clamp(1.3rem, 1.15rem + 0.8vw, 1.75rem);

  --lh-tight: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.65;

  --ls-eyebrow: 0.18em;
  --ls-button: 0.12em;
  --ls-heading: 0.01em;

  /* ---- Abstände (4px-Skala) ------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 1rem + 2vw, 3rem);
  --header-height: 88px;
  --header-height-mobile: 72px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --border-hairline: 1px solid var(--color-border-gold);

  /* ---- Bewegung -------------------------------------------------------- */
  --transition-fast: 180ms ease;
  --transition-medium: 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-medium: 0ms;
  }
}