/* ==========================================================================
   AEGIS — Design Tokens
   Einzige Quelle der Wahrheit für Farbe, Typografie, Maße, Bewegung.
   Regel: In components.css und in der App NIE Rohwerte schreiben.
          Immer var(--...) benutzen. Neue Werte gehören hierher.
   ========================================================================== */

:root {

  /* ---- Flächen & Linien -------------------------------------------------
     Das Interface ist dunkel-committed. Es gibt keinen Light-Mode:
     Der Glow-Look funktioniert nur auf nahezu schwarzem Grund.
     ---------------------------------------------------------------------- */
  --bg:            #04070b;   /* App-Hintergrund                              */
  --bg-deep:       #020406;   /* Vignette oben/unten                          */
  --bg-sunken:     rgba(0, 0, 0, .40);   /* Inputs, Wells, Code               */

  --surface:       rgba(120, 190, 225, .045);  /* Panel-Füllung, fast leer    */
  --surface-2:     rgba(120, 190, 225, .075);  /* Hover / aktiver Zustand     */

  --line:          rgba(105, 205, 245, .16);   /* Standard-Rahmen 1px         */
  --line-strong:   rgba(105, 205, 245, .34);   /* Betonter Rahmen, Ecken      */
  --line-faint:    rgba(105, 205, 245, .07);   /* Trennlinien in Listen       */

  /* ---- Akzente ----------------------------------------------------------
     EIN Primärakzent. Gold nur für "du bist dran", Rot nur für Fehler,
     Grün nur für bestätigt/ok. Nie zwei leuchtende Elemente nebeneinander.
     ---------------------------------------------------------------------- */
  --cyan:          #5fd9ff;   /* Primär: aktiv, fokussiert, Assistent spricht */
  --cyan-dim:      #2a93bd;   /* Sekundär: Labels, inaktive Achsen            */
  --cyan-deep:     #0d4f6b;   /* Verlaufs-Endpunkt, Reiter-Hintergrund        */

  --gold:          #ffb84d;   /* Braucht eine Entscheidung des Nutzers        */
  --gold-dim:      #b47a25;
  --red:           #ff5f56;   /* Fehler, Konflikt, destruktive Aktion         */
  --green:         #4dffa8;   /* Erfolgreich, verbunden, im grünen Bereich    */

  /* ---- Text -------------------------------------------------------------
     Kontrast gegen --bg: text 15.8:1, text-2 7.4:1, text-3 3.6:1 (AA large).
     --text-3 nie für Fließtext, nur für Labels ab 10px Mono mit Tracking.
     ---------------------------------------------------------------------- */
  --text:          #dcf1fb;
  --text-2:        #8fb2c4;
  --text-3:        #537486;

  /* ---- Typografie -------------------------------------------------------
     display = Überschriften, Zahlen, Buttons, alles mit Charakter
     body    = Fließtext, Nachrichten, Beschreibungen
     mono    = ALLES Maschinelle: Messwerte, IDs, Zeitstempel, Status-Labels
     ---------------------------------------------------------------------- */
  --font-display:  "Chakra Petch", system-ui, sans-serif;
  --font-body:     "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-micro:      9px;      /* Mono-Label in Panels                          */
  --fs-mono:       10.5px;   /* Statuszeilen, Reiter                          */
  --fs-xs:         11px;
  --fs-sm:         12.5px;   /* Listenzeilen, Buttons                         */
  --fs-md:         13.5px;   /* Fließtext                                     */
  --fs-lg:         16px;
  --fs-xl:         21px;     /* Panel-Überschrift                             */
  --fs-2xl:        28px;
  --fs-3xl:        38px;     /* Kennzahl, die den Screen trägt                */

  --lh-tight:      1.35;
  --lh-body:       1.65;
  --lh-loose:      1.9;      /* Mono-Blöcke                                   */

  /* Tracking: Mono und Display werden IMMER gesperrt gesetzt.
     Das ist das stärkste Stilmittel des Systems.                             */
  --track-mono:    .16em;
  --track-label:   .22em;    /* Panel-Reiter, Eyebrows                        */
  --track-display: .10em;    /* Große Überschriften                           */

  /* ---- Maße -------------------------------------------------------------
     4px-Raster. Abweichungen nur bei optischen Korrekturen.
     ---------------------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  26px;
  --sp-7:  34px;
  --sp-8:  48px;
  --sp-9:  64px;

  --r-sm:  3px;    /* Buttons, Tags — fast kantig                             */
  --r-md:  6px;    /* Panels, Karten, Inputs                                  */
  --r-lg:  12px;   /* Äußerer App-Rahmen                                      */
  --r-pill: 99px;

  --border: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* ---- Glow -------------------------------------------------------------
     Glow ist IMMER Dekoration. Kein Zustand darf sich allein durch Glow
     von einem anderen unterscheiden — es braucht zusätzlich Text oder Icon.
     ---------------------------------------------------------------------- */
  --glow:          0 0 24px rgba(95, 217, 255, .28);
  --glow-strong:   0 0 30px rgba(95, 217, 255, .45);
  --glow-soft:     0 0 60px rgba(95, 217, 255, .14);
  --glow-inset:    inset 0 0 18px rgba(95, 217, 255, .12);
  --focus-ring:    0 0 0 3px rgba(95, 217, 255, .10);

  /* ---- Bewegung ---------------------------------------------------------
     Grundregel: langsam. Alles Schnellere wirkt hektisch statt souverän.
     ---------------------------------------------------------------------- */
  --dur:           180ms;    /* Hover, Fokus, Farbe                           */
  --dur-slow:      400ms;    /* Ein-/Ausblenden von Panels                    */
  --ease:          cubic-bezier(.4, 0, .2, 1);

  --spin-slow:     90s;      /* äußerer Skalenkranz                           */
  --spin-mid:      30s;      /* Segmentbögen                                  */
  --spin-fast:     9s;       /* innerer Akzentring                            */
  --breathe:       3.4s;     /* Kern-Puls im Ruhezustand                      */

  /* ---- Ebenen ------------------------------------------------------------ */
  --z-bg:      0;
  --z-grid:    1;
  --z-content: 2;
  --z-overlay: 50;
  --z-modal:   100;
}