/* ============================================================
   DESIGN TOKENS · Naturheilkundepraxis Wenz
   Farbwelt datenbasiert aus den echten Marken-Bildern
   (Praxisschild-Sonne, Pusteblume, Porträt, Wiese).
   Schriften lokal eingebunden (DSGVO-konform).
   ============================================================ */

/* ---------- Lokale Schriften (woff2) ---------- */
@font-face {
  font-family: "Cormorant Infant";
  src: url("../../fonts/CormorantInfant-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Infant";
  src: url("../../fonts/CormorantInfant-Italic-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Assistant";
  src: url("../../fonts/Assistant-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Farbe · Rohtöne ---------- */
  --c-cream:       #FBF7F1;  /* warmes Weiß (aus Porträt-Hintergrund) */
  --c-sand:        #EFE7DA;  /* Sand, Sektionsflächen */
  --c-sand-deep:   #E6DBC9;
  --c-taupe:       #B7A79A;  /* warmes Taupe */
  --c-ink:         #2C2A26;  /* warmes Anthrazit, Text & Headlines */
  --c-ink-soft:    #5A554E;  /* gedämpfter Text */
  --c-line:        #E6DED2;  /* feine Linien/Rahmen */
  --c-white:       #FFFFFF;

  --c-gold:        #C8952E;  /* Marken-Gold (Schild-Sonne / Pusteblume) */
  --c-gold-light:  #E4B45A;  /* Highlight */
  --c-gold-deep:   #9A7526;  /* Hover / gedrückt */
  --c-gold-tint:   #F3E8D2;  /* zarte Goldfläche */

  --c-sage:        #8C9A82;  /* Salbei (Wiese) */
  --c-sage-deep:   #3E4A34;  /* tiefes Kräutergrün */
  --c-sage-soft:   #DCE2D3;
  --c-sage-tint:   #EEF1E8;

  /* ---------- Farbe · Semantisch ---------- */
  --bg:              var(--c-cream);
  --bg-alt:          var(--c-sand);
  --bg-deep:         var(--c-sage-deep);
  --text:            var(--c-ink);
  --text-muted:      var(--c-ink-soft);
  --heading:         var(--c-ink);
  --accent:          var(--c-gold);
  --accent-contrast: var(--c-ink);     /* Text auf Gold (barrierefrei) */
  --border:          var(--c-line);

  /* ---------- Verläufe ---------- */
  --grad-gold: linear-gradient(135deg, #E4B45A 0%, #C8952E 55%, #9A7526 100%);
  --grad-veil: linear-gradient(180deg, rgba(44,42,38,0) 0%, rgba(44,42,38,.55) 100%);
  --grad-sage: linear-gradient(160deg, #4A5740 0%, #33402C 100%);

  /* ---------- Typografie ---------- */
  --font-head: "Cormorant Infant", Georgia, "Times New Roman", serif;
  --font-body: "Assistant", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero:   clamp(2.75rem, 5.5vw + 1rem, 5.25rem);
  --fs-h1:     clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --fs-h2:     clamp(1.8rem, 2.4vw + 1rem, 2.75rem);
  --fs-h3:     clamp(1.35rem, 1.4vw + .75rem, 1.75rem);
  --fs-lead:   clamp(1.15rem, .55vw + 1rem, 1.4rem);
  --fs-body:   1.0625rem;
  --fs-small:  .875rem;
  --fs-kicker: .8125rem;

  --lh-tight: 1.08;
  --lh-head:  1.16;
  --lh-body:  1.7;
  --ls-kicker: .18em;
  --ls-head:  -.012em;

  /* ---------- Abstände & Layout ---------- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4rem;    --space-9: 6rem;  --space-10: 8rem;
  --section-y: clamp(4rem, 9vw, 9rem);
  --container: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---------- Radien ---------- */
  --r-sm: .5rem; --r-md: 1rem; --r-lg: 1.75rem; --r-xl: 2.5rem; --r-pill: 999px;

  /* ---------- Schatten (warm getönt) ---------- */
  --shadow-sm: 0 1px 3px rgba(44,42,38,.06), 0 1px 2px rgba(44,42,38,.04);
  --shadow-md: 0 10px 30px -12px rgba(44,42,38,.18);
  --shadow-lg: 0 30px 60px -20px rgba(44,42,38,.25);
  --shadow-gold: 0 16px 40px -12px rgba(200,149,46,.45);

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --dur-1: .2s; --dur-2: .4s; --dur-3: .7s; --dur-4: 1.1s;
}

/* Respektiere Nutzer, die weniger Bewegung wünschen */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: .01ms; --dur-2: .01ms; --dur-3: .01ms; --dur-4: .01ms; }
}