/* ===========================================================================
   COLORS — Onda
   Fixe Marken-Basis (nicht ändern) + abgeleitete Tints für Flächen & States.
   GENERIERT aus tokens.json – nicht von Hand ändern (build-tokens.py).
   =========================================================================== */
:root {
  /* --- Base brand (FIX) --- */
  --onda-pink:          #f2668b;                      /* Energie, Hauptaktion, Graphem-Kacheln */
  --onda-petrol:        #026873;                      /* Struktur, Ondas Körper, Einzellaut-Kacheln, UI-Icons */
  --onda-sage:          #03a688;                      /* Erfolg, Jubel, Fortschritt */
  --onda-sky:           #9ac3c7;                      /* große Spielflächen, ruhige Hintergründe */
  --onda-ink:           #011f26;                      /* Text, Tablet-Bezel */
  --onda-grey:          #f8f8f8;                      /* neutrale App-Fläche */
  --onda-warm-white:    #fffdfb;                      /* cremiger App-Grund (Hybrid) */
  --onda-white:         #ffffff;

  /* --- Extended ramp (abgeleitet, für Verläufe & Tiefe) --- */
  --onda-sage-bright:   #0bbf9c;                      /* helle Fortschritts-Spitze (Gradient-Ende) */
  --onda-petrol-deep:   #015a64;                      /* Innenkante gefüllter Kacheln */
  --onda-pink-deep:     #c13c60;                      /* Bottom-Schatten Graphem-Kacheln; Ondas offener Mund (Beere, seit 10.10.2026) */
  --onda-pink-soft:     #ff9fb6;                      /* Ondas Zunge im Beere-Mund */

  /* --- Surface tints (weiche Flächen, Blob-Container, Chips) --- */
  --onda-petrol-tint:   #eef6f6;                      /* Petrol auf hell – Chips, Container */
  --onda-petrol-wash:   #f4f9f9;                      /* sehr leise Petrol-Fläche */
  --onda-pink-tint:     #fbeef2;                      /* Pink auf hell – Container */
  --onda-pink-wash:     #fff0f4;                      /* Streak-Kreis */
  --onda-pink-line:     #ffd9e2;                      /* Streak-Rahmen */
  --onda-sky-stage:     #cfe6e9;                      /* Bühnen-Gradient oben */
  --onda-inhaltsgrund:  #eaf5f0;                      /* Inhaltsgrund unter der Bühne, R14.4.13 */
  --onda-track:         #dceaea;                      /* Fortschritts-Schiene (leer) */
  --onda-track-dot:     #dce8e8;                      /* leere Fortschritts-Punkte */

  /* --- Hairlines & neutral text --- */
  --onda-line:          #eef1f1;                      /* kühle Trennlinie */
  --onda-line-warm:     #f1e9e4;                      /* warme Trennlinie (auf Warm White) */
  --onda-border-soft:   #e8edec;                      /* weiche Element-Kante */

  /* --- Text roles --- */
  --onda-text:          #011f26;                      /* primär */
  --onda-text-body:     #3a4b4d;                      /* Fließtext / Anleitung */
  --onda-text-muted:    #5a6b6d;                      /* sekundär */
  --onda-text-faint:    #7a8a8c;                      /* Captions */
  --onda-text-ghost:    #9aa9ab;                      /* Labels / Hints */

  /* --- Semantic aliases --- */
  --surface-app:        var(--onda-warm-white);
  --surface-card:       var(--onda-white);
  --surface-neutral:    var(--onda-grey);
  --action-primary:     var(--onda-pink);
  --action-secondary:   var(--onda-petrol);
  --feedback-success:   var(--onda-sage);
  --stage:              var(--onda-sky);

  /* --- Signature shape --- */
  --onda-blob-radius:   42% 58% 54% 46% / 56% 48% 52% 44%;
}