/* Felix-Institut — Design Tokens (v1.0 · Variante E final)
 *
 * Leitidee: „helle Schwester" von Shift Happens.
 * Gleiche typografische und farbliche DNA wie die Muttermarke,
 * aber organisch und warm statt nächtlich-technisch.
 *
 * Akzent: Felix-Orange #F18825 (Hausfarbe, geerbt von Shift Happens
 * #FF6B00 in gedämpfter Form). Drei Sekundär-Tints für Cluster &
 * Sektionen: Pfirsich, Puderrosa, Salbei.
 *
 * Schriften: alle vier Familien kostenlos. Wird via Google Fonts mit
 * Preconnect geladen, für Production später lokal hosten.
 */

:root {
  /* — Farbklima ——————————————————————————————————————— */
  --color-paper:        #F5F1EA;   /* Off-White Papier, Boden */
  --color-paper-soft:   #FEF6ED;   /* Creme, Sektions-Tint Daten-Block */
  --color-ink:          #1A1813;   /* Warmes Tiefschwarz, Text */
  --color-ink-soft:     #4A453C;   /* Fließtext, weniger hart */
  --color-ink-muted:    #6F6557;   /* Captions, Meta, Eyebrows · WCAG-konform auf paper (5.07:1) */

  --color-rule:         rgba(26, 24, 19, 0.12);   /* Hairlines */

  /* — Akzentfarben ———————————————————————————————————— */
  --color-accent:       #F18825;                  /* Felix-Orange · für Borders, Hover, BG-Akzente */
  --color-accent-text:  #A0541A;                  /* WCAG-konforme Text-Variante (4.89:1 auf paper) */
  --color-accent-soft:  rgba(241, 136, 37, 0.12);
  --color-accent-line:  rgba(241, 136, 37, 0.22); /* Hairline-Variante */

  --color-tint-peach:   #FBCFBB;   /* Pfirsich, Cluster „Persönlichkeit" */
  --color-tint-rose:    #E5C5C0;   /* Puderrosa R2, Cluster „Hypnosystemik" */
  --color-tint-sage:    #F1F5ED;   /* Salbei, Quote-Bühne */

  /* — Typografie ——————————————————————————————————————
   * Display: Fraunces — variable Serif, warm, editorial.
   * Body:    DM Sans — geometrische Sans, von Mutter geerbt.
   * UI:      Asap — Felix nutzt sie heute schon.
   * Mono:    JetBrains Mono — von Mutter geerbt.
   */
  --font-display:       "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:          "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-ui:            "Asap", "DM Sans", -apple-system, sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --fs-hero:            clamp(2.5rem, 5.5vw, 4.75rem);
  --fs-h1:              clamp(2rem, 3.5vw, 3rem);
  --fs-h2:              clamp(1.5rem, 2.4vw, 2rem);
  --fs-h3:              1.25rem;
  --fs-body:            1.0625rem;
  --fs-small:           0.875rem;
  --fs-mono:            0.8125rem;

  --lh-display:         1.08;
  --lh-body:            1.55;

  --tracking-display:   -0.015em;
  --tracking-eyebrow:   0.18em;

  /* — Raum & Raster ——————————————————————————————————— */
  --measure:            66ch;
  --gutter:             clamp(1rem, 2vw, 2rem);
  --section-y:          clamp(4rem, 9vw, 8rem);

  --container-narrow:   720px;
  --container-text:     960px;
  --container-wide:     1280px;

  /* — Bewegung ———————————————————————————————————————— */
  --ease-soft:          cubic-bezier(0.32, 0.08, 0.24, 1);
  --dur-fade:           480ms;
  --dur-micro:          180ms;

  /* — Linien & Radien ————————————————————————————————— */
  --hairline:           1px solid var(--color-rule);
  --radius-card:        2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fade:         0ms;
    --dur-micro:        0ms;
  }
}