/* vitalcast · Design-Tokens (28.10.2026)
   Vorbild: dirtverse.co (nur der Stil, nichts kopiert)
   Layout-Typ: Objekt-Reihe – weiße Bühne, Reihe runder Themen-Objekte, kleine Pillen-Navigation.
   Schriften lokal in assets/fonts (Sora + Albert Sans, OFL), keine CDNs. */

@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-var.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("../fonts/albert-var-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* Farben */
  --weiss:     #ffffff;
  --tanne:     #0b3b2e;   /* Text, dunkle Knöpfe */
  --nebel:     #5f6e68;   /* Nebentext, Kontrast 5,6:1 auf Weiß */
  --linie:     rgba(11, 59, 46, 0.12);
  --flaeche:   #f4f6f5;   /* ganz leichtes Grau für Pillen */
  --pfirsich:  #ffb48a;   /* Bewegung */
  --limette:   #c8f068;   /* Ernährung */
  --wasser:    #8fd0ff;   /* Schlaf */
  --lavendel:  #c7b6ff;   /* Stress */
  --sonne:     #ffd94f;   /* Energie */
  --auf-pastell: #0b3b2e; /* Text auf Pastell: immer Tanne (Kontrast > 7:1) */

  /* Schriften */
  --titel: "Sora", "Segoe UI", sans-serif;
  --text:  "Albert Sans", "Segoe UI", sans-serif;

  /* Schriftgrößen */
  --gr-klein: 0.8125rem;
  --gr-text:  1.0625rem;
  --gr-gross: 1.25rem;
  --gr-zwischen: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  --gr-titel: clamp(2.1rem, 1.2rem + 3.6vw, 4.4rem);
  --gr-riesig: clamp(3rem, 1rem + 9vw, 9rem);

  /* Abstände */
  --ab-1: 0.5rem;
  --ab-2: 1rem;
  --ab-3: 1.5rem;
  --ab-4: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  --ab-5: clamp(4rem, 2rem + 7vw, 8rem);
  --rand: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  --breite: 80rem;
  --spalte: 44rem;

  /* Formen */
  --radius-pille: 999px;
  --radius-karte: 1.5rem;
  --radius-bild: 1.25rem;

  /* Schatten (weich, farblos) */
  --schatten: 0 18px 50px -24px rgba(11, 59, 46, 0.35);

  /* Bewegung */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kurz: 220ms;
  --schweben: 6s;
}