/* Token-Datei des Projekts Musik-API.
 *
 * Es gab im Projekt bisher keine CSS-Token-Datei (Run 1 hatte keine Oberflaeche).
 * Diese Datei ist ab jetzt die EINZIGE Stelle, an der Farbe, Abstand, Radius,
 * Schriftgroesse, Schatten und Dauer festgelegt werden. In stil.css steht kein
 * eigenes #hex und kein frei erfundener px-Wert — nur var(--...) von hier.
 *
 * Fehlt ein Wert, gehoert er HIER hinein und nicht in die Regel, die ihn braucht.
 */

:root {
  /* ---------------------------------------------------------------- Farben */
  --farbe-grund:          #14161a;
  --farbe-grund-2:        #1b1e24;
  --farbe-flaeche:        #22262e;
  --farbe-flaeche-hoch:   #2b3039;
  --farbe-rand:           #343a45;
  --farbe-rand-stark:     #4a515e;

  --farbe-schrift:        #e8eaee;
  --farbe-schrift-leise:  #a2aab8;
  --farbe-schrift-still:  #6f7887;

  --farbe-akzent:         #4f9cf9;
  --farbe-akzent-hoch:    #6fb0ff;
  --farbe-akzent-schrift: #0d1117;

  --farbe-gut:            #46c08a;
  --farbe-gut-grund:      #16301f;
  --farbe-warn:           #e0a33a;
  --farbe-warn-grund:     #332715;
  --farbe-fehler:         #ef6a6a;
  --farbe-fehler-grund:   #351b1e;

  /* Balken beim Hochladen */
  --farbe-balken-grund:   #2b3039;
  --farbe-balken:         var(--farbe-akzent);

  /* Ziehen-und-Fallenlassen, aktiver Zustand */
  --farbe-ablage-rand:    var(--farbe-akzent);
  --farbe-ablage-grund:   #1b2735;

  /* Schleier hinter dem Rueckfrage-Fenster (Loeschen). Neu in Run 4 — es gab
     bisher kein modales Fenster im Projekt und damit auch keinen Wert dafuer. */
  --farbe-schleier:       rgba(10, 12, 15, 0.72);

  /* ---------------------------------------------------------------- Abstand */
  --abstand-0:   0;
  --abstand-1:   4px;
  --abstand-2:   8px;
  --abstand-3:   12px;
  --abstand-4:   16px;
  --abstand-5:   24px;
  --abstand-6:   32px;
  --abstand-7:   48px;

  /* ---------------------------------------------------------------- Radius */
  --radius-1:    4px;
  --radius-2:    8px;
  --radius-3:    12px;
  --radius-rund: 999px;

  /* ------------------------------------------------------------ Schriftgroesse */
  --schrift-klein:  12px;
  --schrift-normal: 14px;
  --schrift-gross:  16px;
  --schrift-titel:  20px;
  --schrift-kopf:   26px;

  --schrift-familie: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                     "Helvetica Neue", Arial, sans-serif;
  --schrift-zahl:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --schrift-gewicht-normal: 400;
  --schrift-gewicht-halb:   500;
  --schrift-gewicht-fett:   600;

  --zeilenhoehe-eng:    1.25;
  --zeilenhoehe-normal: 1.5;

  /* ---------------------------------------------------------------- Schatten */
  --schatten-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --schatten-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --schatten-3: 0 12px 32px rgba(0, 0, 0, 0.55);

  /* ---------------------------------------------------------------- Bewegung */
  --dauer-kurz:   120ms;
  --dauer-normal: 200ms;
  --dauer-lang:   360ms;
  --kurve:        cubic-bezier(0.2, 0, 0.2, 1);

  /* ---------------------------------------------------------------- Masse */
  --breite-inhalt:  1100px;
  --breite-schmal:  380px;
  /* Rueckfrage-Fenster. Breiter als --breite-schmal, weil dort ein Titel samt
     Ablagepfad hineinpassen muss. Neu in Run 4. */
  --breite-dialog:  460px;
  --hoehe-bedien:   38px;
  --hoehe-balken:   6px;
  --groesse-bild:   44px;
  --rand-staerke:   1px;
}