/* BYOH Design Tokens · v0.1 (Entwurf)
   Leitelemente: Lila & Wasser. Basis: Farben der bestehenden Seite (#5F2FAD, #F1EFEB, #14100A, #DEDDD2), vertieft. */

:root {
  /* ---- Kernfarben ---- */
  --byoh-night: #150D29;        /* Nachtlila – dunkle Bühnen (Hero, Vision, Footer) */
  --byoh-night-2: #20153D;      /* Fläche auf Nachtlila */
  --byoh-night-line: rgba(233, 225, 250, .16);
  --byoh-violet: #5F2FAD;       /* Marken-Lila (bestehend) – CTAs, Links, Akzente */
  --byoh-violet-deep: #46208A;  /* Hover/Pressed */
  --byoh-violet-soft: #BBA5F0;  /* Lila auf dunklem Grund */
  --byoh-lilac: #E9E2F6;        /* Lila-Hauch – ruhige Flächen */
  --byoh-paper: #F3F0EA;        /* Kalkpapier – Grundfläche */
  --byoh-stone: #DEDDD2;        /* Stein – Linien, Trennflächen */
  --byoh-ink: #14100A;          /* Tinte – Text */
  --byoh-ink-soft: #4B4554;     /* Sekundärtext */
  --byoh-ink-line: rgba(20, 16, 10, .14);
  --byoh-on-night: #F3EFFA;     /* Text auf Nachtlila */
  --byoh-on-night-soft: #B7AECB;

  /* ---- Pigmente der drei Säulen (fließen ineinander, nie harte Flächen) ---- */
  --pig-water: #3E9CCB;         /* Wasser · Movement (Training & Physio) */
  --pig-violet: #7B4FD6;        /* Lila · Meditation & Mindfulness */
  --pig-orchid: #C65FB8;        /* Orchidee · Zellgesundheit */
  --pig-water-ink: #1A5F82;     /* textfähige Varianten auf Papier (≥ 4.5:1) */
  --pig-violet-ink: #5F2FAD;
  --pig-orchid-ink: #8C2C80;

  /* ---- Typografie ---- */
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --font-accent: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(3.25rem, 1.6rem + 7.4vw, 8.75rem);
  --fs-h1: clamp(2.6rem, 1.5rem + 4.6vw, 5.5rem);
  --fs-h2: clamp(2rem, 1.3rem + 2.8vw, 3.5rem);
  --fs-h3: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  --fs-lead: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-label: .75rem;

  --lh-tight: .92;
  --lh-head: 1.04;
  --lh-body: 1.6;
  --track-display: -.035em;
  --track-label: .16em;

  /* ---- Abstände (4er-Raster) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  --sp-9: 112px; --sp-10: 160px;
  --section-pad: clamp(72px, 10vw, 160px);
  --measure: 62ch;
  --page-max: 1280px;

  /* ---- Radien ---- */
  --r-s: 6px;      /* Eingaben, kleine Flächen */
  --r-m: 22px;     /* Karten, die sich abheben müssen */
  --r-pill: 999px; /* Buttons, Badges */
  --r-drop: 58% 42% 46% 54% / 52% 48% 52% 48%; /* Wassertropfen-Form für Bilder */

  /* ---- Bewegung ---- */
  --ease-flow: cubic-bezier(.22, 1, .36, 1);
  --ease-tide: cubic-bezier(.65, 0, .35, 1);
  --dur-quick: 220ms;
  --dur-calm: 600ms;
  --dur-slow: 1200ms;

  /* ---- Schatten ---- */
  --shadow-soft: 0 1px 0 rgba(20, 16, 10, .04), 0 18px 40px -24px rgba(53, 22, 110, .35);
}