/* ══════════════════════════════════════════════════════════════════
   QSS HUB · DESIGN TOKENS
   Eine Quelle der Wahrheit. Jede Farbe, jeder Abstand, jede Bewegung.

   Aufbau und Benennung aus ISO Hub uebernommen — wer zwischen den
   Hub-Produkten wechselt, soll nicht umlernen. Eigen ist allein die
   Aktionsfarbe: Violett statt Tuerkis, damit sie mit keiner der fuenf
   Statusfarben verwechselbar ist. Siehe Dokument 11.2.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── FARBE · Navy (Primaer, Struktur, Text) ───────────────────── */
  --navy-50:  #F3F6FA;
  --navy-100: #E4EBF3;
  --navy-200: #C6D5E5;
  --navy-300: #97B1CB;
  --navy-400: #5F82A8;
  --navy-500: #345C86;
  --navy-600: #1F4468;
  --navy-700: #163553;
  --navy-800: #0F2740;
  --navy-900: #0A1B2E;
  --navy-950: #06121F;

  /* ── FARBE · Violett (Aktion, Fokus, Marke) ───────────────────── */
  --viol-50:  #F4F2FE;
  --viol-100: #E7E2FD;
  --viol-200: #CFC5FB;
  --viol-300: #AC9BF6;
  --viol-400: #8A72F0;
  --viol-500: #6B4EE6;
  --viol-600: #5439C4;
  --viol-700: #422D9B;

  /* ── FARBE · Neutral ─────────────────────────────────────────── */
  --grey-0:   #FFFFFF;
  --grey-25:  #FCFDFE;
  --grey-50:  #F7F9FB;
  --grey-100: #EEF2F6;
  --grey-200: #DFE5EC;
  --grey-300: #C7D0DA;
  --grey-400: #9AA6B4;
  --grey-500: #6B7887;
  --grey-600: #4B5766;
  --grey-700: #36404D;

  /* ── FARBE · Status (nur diese fuenf, nie mehr, nie fuer anderes) ── */
  --gruen:  #16A34A;  --gruen-bg:  #ECFDF3;  --gruen-rand:  #A7E6BF;
  --gelb:   #CA9A04;  --gelb-bg:   #FEFAEB;  --gelb-rand:   #F2DA8A;
  --orange: #EA6A0B;  --orange-bg: #FFF4EC;  --orange-rand: #FBC79A;
  --rot:    #DC2626;  --rot-bg:    #FEF2F2;  --rot-rand:    #F6B5B5;
  --blau:   #2563EB;  --blau-bg:   #EFF5FF;  --blau-rand:   #B6CEFA;

  /* ── SEMANTIK ────────────────────────────────────────────────── */
  --bg-app:        var(--grey-50);
  --bg-flaeche:    var(--grey-0);
  --bg-erhoben:    var(--grey-0);
  --bg-vertieft:   var(--grey-100);
  --bg-invers:     var(--navy-900);

  --text-stark:    var(--navy-900);
  --text-normal:   var(--navy-800);
  --text-leise:    var(--grey-500);
  --text-schwach:  var(--grey-400);
  --text-invers:   var(--grey-0);
  --text-aktion:   var(--viol-600);

  --rand:          var(--grey-200);
  --rand-stark:    var(--grey-300);
  --rand-fokus:    var(--viol-500);

  /* ── TYPOGRAFIE ──────────────────────────────────────────────── */
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
             "Segoe UI", Roboto, sans-serif;

  /* Zahlen, Kennungen, Uhrzeiten. Feste Laufweite, damit in Tabellen
     alles untereinander steht und am Telefon niemand 1 und 7 verwechselt. */
  --schrift-daten: ui-monospace, "SF Mono", "JetBrains Mono",
                   "Cascadia Mono", Consolas, monospace;

  --t-xs:   0.75rem;   --t-xs-lh:   1rem;
  --t-s:    0.875rem;  --t-s-lh:    1.25rem;
  --t-m:    1rem;      --t-m-lh:    1.5rem;
  --t-l:    1.25rem;   --t-l-lh:    1.75rem;
  --t-xl:   1.75rem;   --t-xl-lh:   2.125rem;
  --t-2xl:  2.5rem;    --t-2xl-lh:  2.75rem;

  /* ── ABSTAND ─────────────────────────────────────────────────── */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-6: 24px;  --s-8: 32px;  --s-12: 48px; --s-16: 64px;

  /* ── FORM ────────────────────────────────────────────────────── */
  --radius:       8px;
  --radius-karte: 12px;

  /* Genau zwei Stufen. Mehr wirkt unruhig. */
  --schatten-auf:     0 1px 2px rgba(10, 27, 46, 0.06),
                      0 1px 3px rgba(10, 27, 46, 0.08);
  --schatten-schwebe: 0 4px 12px rgba(10, 27, 46, 0.10),
                      0 12px 32px rgba(10, 27, 46, 0.08);

  /* ── BEWEGUNG ────────────────────────────────────────────────── */
  --dauer-schnell: 120ms;
  --dauer-normal:  200ms;
  --kurve: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── MASSE ───────────────────────────────────────────────────── */
  --beruehrflaeche: 48px;   /* im Kiosk 64px, siehe kiosk.css ab Phase 3 */
  --nav-breite: 248px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer-schnell: 0ms; --dauer-normal: 0ms; }
}