/**
 * Design-Tokens monitor.skynet.
 *
 * Zwei Quellen, bewusst getrennt gehalten:
 *  1. Palette und Typografie: shsgmbh/saarland-cloud → brand/BRAND.md ("Vibrant Vortex")
 *  2. Token-BENENNUNG und angewandte Flächenwerte: shsgmbh/allo-exchange-sync (exs)
 *     und shsgmbh/keycloak (Theme saarland-cloud, login.saarland.cloud)
 *
 * Die Namen sind absichtlich identisch zu exs — wer dort zu Hause ist, findet sich hier
 * sofort zurecht, und Korrekturen an der Marke lassen sich zwischen den Projekten kopieren.
 */

:root {
  /* ---- Markenpalette (BRAND.md) ---- */
  --sc-green: #00A651;  --sc-blue: #0066B3;   --sc-dark-blue: #003974;
  --sc-magenta: #D60C8C; --sc-yellow: #FFF200; --sc-orange: #F7941D;
  --sc-deep-orange: #E76320; --sc-gold: #FEC346;

  /* ---- Marke im UI (Benennung wie exs) ---- */
  --brand:  #F7941D;                 /* CTA — dasselbe Orange wie ".cloud" im Logo */
  --brand6: #E76320;
  --ring:   rgba(247,148,29,.35);    /* Fokusring */
  --brand-gradient: linear-gradient(135deg, #F7941D 0%, #E76320 100%);
  /* Regenbogen-Linie als Akzent — im Keycloak-Login die Signatur der Marke */
  --vortex-line: linear-gradient(90deg,#00A651,#0066B3,#D60C8C,#F7941D,#FFF200,#FEC346);

  /* ---- Typografie (Poppins + Fira Code über Google Fonts, Nexa nur für Logo/Hero) ---- */
  --font-ui:      'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono:    'Fira Code', ui-monospace, SFMono-Regular, monospace;
  --font-display: 'Nexa Heavy', 'Poppins', system-ui, sans-serif;

  --text-caption: 12px; --text-sm: 14px;  --text-base: 16px; --text-lg: 18px;
  --text-sub: 20px;     --text-h3: 24px;  --text-h2: 32px;   --text-h1: 40px;

  --radius-sm: 6px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px;

  /* ---- Zustände im Dashboard ----
     Bewusst eigene Namen statt direkt Markenfarben: Bedeutung und Palette sollen
     sich unabhängig voneinander ändern können. */
  --state-ok:       #34D399;
  --state-error:    #F43F5E;
  --state-warn:     #FBBF24;
  --state-info:     #38BDF8;

  --tunnel-up:       var(--state-ok);
  --tunnel-down:     var(--state-error);
  --tunnel-disabled: #9296a3;      /* bewusst abgeschaltet ist kein Fehler */
  --tunnel-unknown:  #6b7280;

  /* Verkehr: "der Tunnel steht" ist nicht dasselbe wie "durch den Tunnel fließt etwas" */
  --traffic-flowing: var(--state-ok);
  --traffic-idle:    var(--state-info);   /* kein Verkehr — Hinweis, keine Störung */
  --traffic-oneway:  var(--state-warn);   /* nur eine Richtung — fast immer Routing */
}

/* Dark (Standard, wie exs und das Keycloak-Login) */
:root, :root[data-theme="dark"] {
  --bg: #0a0a0e;
  --surface: #16161d;
  --surface-2: #1f1f29;
  --surface-glass: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.10);
  --text: #f3f4f6;
  --muted: #9296a3;
  --glass-blur: blur(24px) saturate(1.2);
}

:root[data-theme="light"] {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --surface-glass: #ffffff;
  --border: #e4e7ec;
  --text: #1a1a2e;
  --muted: #6b7280;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f6f8; --surface: #ffffff; --surface-2: #eef1f5;
    --surface-glass: #ffffff; --border: #e4e7ec; --text: #1a1a2e; --muted: #6b7280;
  }
}