/* ============================================================
   DESIGN-TOKENS – Pflegegrad Soforthilfe
   Palette an die Produkte gekoppelt (Wiedererkennung).
   Ein Akzent (Amber). Warm, ruhig, vertrauenswürdig.
   ============================================================ */
:root {
  /* --- Farbe: Teal (Primär) --- */
  --teal-900: #0a3f49;
  --teal-700: #0a626f;
  --teal-600: #0c7a8a;   /* Primär */
  --teal-100: #d7eaed;
  --teal-50:  #e9f3f5;
  --teal-25:  #f2f8f9;

  /* --- Farbe: Amber (einziger Akzent) --- */
  --amber-700: #8f5114; /* dunkel genug für AA-Text auf hellem Amber */
  --amber-600: #cf7a2f;
  --amber-500: #e1893b;  /* Akzent */
  --amber-100: #f9e6cf;
  --amber-50:  #fbeede;

  /* --- Neutral / Anthrazit --- */
  --ink:       #13303a;  /* Haupttext */
  --ink-soft:  #42606b;  /* Sekundärtext */
  --ink-faint: #6c828b;
  --bg:        #f6f8f9;  /* Off-White Seite */
  --bg-warm:   #fbf9f5;  /* warme Sektion */
  --surface:   #ffffff;
  --line:      #e2e9ec;
  --line-soft: #eef3f4;

  /* --- Semantik --- */
  --ok:    #1f8a5b;  --ok-soft:   #e4f4ec;
  --warn:  #b9661f;  --warn-soft: #fbeede;
  --danger:#b3261e;

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

  /* Modulare, fluide Typo-Skala (Basis ~17px, mobile-first) */
  --fs-eyebrow: .8rem;
  --fs-small:   .9rem;
  --fs-body:    1.0625rem;
  --fs-lede:    clamp(1.14rem, 1.05rem + .45vw, 1.36rem);
  --fs-h3:      clamp(1.24rem, 1.12rem + .6vw, 1.5rem);
  --fs-h2:      clamp(1.6rem, 1.32rem + 1.4vw, 2.3rem);
  --fs-h1:      clamp(2.15rem, 1.55rem + 3vw, 3.4rem);
  --fs-display: clamp(2.5rem, 1.7rem + 4vw, 4rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.62;

  /* --- Spacing (4px-Basis) --- */
  --space-2xs: .25rem;
  --space-xs:  .5rem;
  --space-sm:  .75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;

  /* --- Form --- */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(19,48,58,.06);
  --shadow:    0 6px 22px rgba(19,48,58,.09);
  --shadow-lg: 0 18px 48px rgba(19,48,58,.14);

  --container: 1080px;
  --container-narrow: 720px;

  --transition: .18s cubic-bezier(.4,0,.2,1);
  --focus: 0 0 0 3px var(--surface), 0 0 0 6px var(--teal-600);
}