/* ============================================================
   Melchior-Jäger-Stuben — Design Tokens
   Brand-Anker: warm-mineralisch, handwerker-mit-Würde
   Quellen: projekt.md §4
   ============================================================ */

:root {
  /* --- Farbpalette --- */
  --cream-50: #F8F4ED;       /* Body-Background, warmes Off-White */
  --clay-100: #EDDFCB;       /* Alternierende Sektions-Backgrounds */
  --clay-400: #C99973;       /* Borders, Hover-Akzent */
  --clay-700: #8B5A3C;       /* Eyebrows, sekundäre Headlines, Icons */
  --bordeaux-700: #6B2C2C;   /* Primärer CTA, Hervorhebungen */
  --olive-800: #3E4A2A;      /* Footer-Hintergrund, sekundärer Akzent */
  --ink-900: #1F1814;        /* Body-Text, Headlines (warmes Tiefschwarz) */
  --ink-500: #6B5A4F;        /* Meta-Text, Captions */

  /* --- Semantic --- */
  --color-bg: var(--cream-50);
  --color-bg-alt: var(--clay-100);
  --color-bg-dark: var(--olive-800);
  --color-text: var(--ink-900);
  --color-text-muted: var(--ink-500);
  --color-accent: var(--bordeaux-700);
  --color-accent-soft: var(--clay-400);
  --color-eyebrow: var(--clay-700);
  --color-border: rgba(139, 90, 60, 0.18);    /* clay-700 @ 18% */

  /* --- Typografie --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-display-xl: clamp(2.5rem, 6vw + 1rem, 5.5rem);
  --fs-display-lg: clamp(2rem, 4vw + 1rem, 3.5rem);
  --fs-display-md: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --fs-body-lg:    clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  --fs-body:       1rem;
  --fs-small:      0.9375rem;
  --fs-meta:       0.8125rem;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.015em;
  --tracking-base:  0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.12em;

  /* --- Spacing --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2.5rem;
  --sp-12: 4rem;
  --sp-16: 6rem;
  --sp-24: 9rem;

  /* --- Radius (zurückhaltend!) --- */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* --- Shadow (sehr dezent) --- */
  --shadow-sm: 0 1px 3px rgba(31, 24, 20, 0.08);
  --shadow-md: 0 4px 12px rgba(31, 24, 20, 0.10);

  /* --- Layout --- */
  --container-max: 1240px;
  --container-px:  clamp(1rem, 4vw, 3rem);

  /* --- Motion --- */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   600ms;
}

/* Reduced-motion: alle Übergänge ausschalten */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}