/* ============================================================================
   Mühlenhof Breckerfeld – Design Tokens
   Farben aus den echten Fotos abgeleitet (siehe design/DESIGN.md).
   Eine Quelle für Farbe, Typo, Abstand, Radius, Schatten, Motion.
   ========================================================================== */

:root {
  /* --- Farben: Neutrale (warm, aus Holz/Lehm/Papier) --- */
  --paper:      #F7F3E8;   /* Seiten-Hintergrund */
  --paper-2:    #EFE6D5;   /* Alt-Fläche / Sektionswechsel */
  --surface:    #FBF8F0;   /* Karten, Menükarte */
  --ink:        #2A2016;   /* Text */
  --ink-soft:   #6B5B4C;   /* gedämpfter Text */

  /* --- Holz (Primär / Marke) --- */
  --wood:       #6E4A2B;
  --wood-900:   #3D2A1A;
  --wood-600:   #8A5C34;
  --wood-200:   #D8C3A6;

  /* --- Korn / Gold (Akzent) --- */
  --korn:       #B07D2E;
  --korn-100:   #F0E2C4;

  /* --- Himmel (Akzent, sparsam) --- */
  --himmel:     #41618A;
  --himmel-100: #DCE6EF;

  /* --- Natur / Status --- */
  --moos:       #5E6B44;
  --open:       #4E7A3E;   /* „heute geöffnet“ */
  --closed:     #A23B2E;   /* „heute geschlossen“ / Warnung */

  /* --- Semantische Zuordnung --- */
  --bg:            var(--paper);
  --text:          var(--ink);
  --text-muted:    var(--ink-soft);
  --link:          var(--wood);
  --link-hover:    var(--wood-900);
  --accent:        var(--korn);
  --focus:         var(--himmel);
  --border:        rgba(61, 42, 26, .14);
  --border-strong: rgba(61, 42, 26, .28);
  --scrim:         linear-gradient(180deg, rgba(24,17,10,0) 0%, rgba(24,17,10,.55) 100%);

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

  --fs-body:  1.0625rem;    /* 17px */
  --fs-sm:    0.9375rem;    /* 15px */
  --fs-xs:    0.8125rem;    /* 13px */
  --fs-lead:  clamp(1.15rem, 1.6vw, 1.4rem);
  --fs-h1:    clamp(2.2rem, 5vw, 4rem);
  --fs-h2:    clamp(1.6rem, 3.2vw, 2.6rem);
  --fs-h3:    clamp(1.3rem, 2vw, 1.7rem);
  --fs-eyebrow: 0.8125rem;

  --lh-body: 1.6;
  --lh-head: 1.08;
  --ls-eyebrow: 0.12em;

  --measure: 40rem;         /* Textblock-Breite */

  /* --- Abstände (4px-Basis) --- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-8: 3rem;      --sp-10: 4rem;
  --section-y: clamp(3.5rem, 8vw, 7rem);
  --container:  68rem;
  --container-wide: 82rem;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);

  /* --- Radius --- */
  --r-sm: 6px;  --r: 12px;  --r-lg: 20px;  --r-pill: 999px;

  /* --- Schatten (warm getönt) --- */
  --shadow-sm: 0 1px 2px rgba(61,42,26,.10);
  --shadow:    0 8px 24px -8px rgba(61,42,26,.22);
  --shadow-lg: 0 20px 50px -18px rgba(61,42,26,.32);

  /* --- Motion --- */
  --t-fast: 150ms;  --t: 220ms;  --ease: cubic-bezier(.2,.6,.2,1);
  --reveal-dur: 620ms;
}

/* Dezente, aber vorhandene Dunkel-Anpassung nur, falls je gewünscht – hier
   bewusst NICHT als Dark-Mode ausgebaut (Ort ist hell/warm). */

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --reveal-dur: 0ms; }
}