/* Design-Tokens – Obrax
   Richtung (ui-ux-pro-max): Dark-Tech mit Status-Grün, Glas-Flächen, Fira Sans + Fira Code, hohe Dichte.
   Dunkel ist Standard (bewusst unabhängig von der Systemeinstellung); das helle Theme überschreibt nur diese Tokens. */
:root {
  color-scheme: dark;

  --font: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Fira Code', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Flächen */
  --bg: #070c17;
  --bg-2: #0b1324;
  --panel: rgba(19, 30, 53, 0.66);
  --panel-solid: #101a2f;
  --panel-2: rgba(28, 42, 72, 0.55);
  --raised: #15223c;
  --raised-2: #1b2b4b;
  --overlay: rgba(4, 8, 16, 0.72);

  /* Linien */
  --line: rgba(148, 170, 210, 0.14);
  --line-2: rgba(148, 170, 210, 0.26);

  /* Text */
  --text: #eef3fb;
  --text-2: #adbad0;
  --text-3: #8391ab;
  --on-brand: #ffffff;

  /* Marke & Zustände */
  --brand: #2f6df0;
  --brand-hover: #4380ff;
  --brand-soft: rgba(63, 128, 255, 0.16);
  --brand-line: rgba(96, 155, 255, 0.5);
  --accent: #7cb2ff;
  --live: #22c55e;
  --live-soft: rgba(34, 197, 94, 0.16);
  --ok: #4ade80;
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #f87171;
  --danger-strong: #dc2626;
  --danger-soft: rgba(248, 113, 113, 0.14);

  /* Effekte */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, 0.5);
  --blur: saturate(140%) blur(14px);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px #8fbaff;

  --bg-glow-a: rgba(47, 109, 240, 0.2);
  --bg-glow-b: rgba(124, 58, 237, 0.12);
  --grid-line: rgba(148, 170, 210, 0.045);

  /* Geometrie */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --sidebar: 244px;
  --topbar: 58px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 140ms;
  --t: 220ms;

  /* Rang-Stufen */
  --rk-0: #a78bfa;
  --rk-1: #60a5fa;
  --rk-2: #2dd4bf;
  --rk-3: #fbbf24;
  --rk-4: #fb923c;
  --rk-5: #f472b6;
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #eaf0f8;
  --bg-2: #f3f6fb;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-solid: #ffffff;
  --panel-2: rgba(238, 243, 250, 0.9);
  --raised: #f1f5fb;
  --raised-2: #e6edf7;
  --overlay: rgba(15, 23, 42, 0.5);
  --line: rgba(15, 23, 42, 0.11);
  --line-2: rgba(15, 23, 42, 0.22);
  --text: #0f1a2e;
  --text-2: #435068;
  --text-3: #5c6a82;
  --brand: #2158d6;
  --brand-hover: #1a49b8;
  --brand-soft: rgba(33, 88, 214, 0.1);
  --brand-line: rgba(33, 88, 214, 0.45);
  --accent: #1f56cf;
  --live: #15803d;
  --live-soft: rgba(21, 128, 61, 0.12);
  --ok: #15803d;
  --warn: #a16207;
  --warn-soft: rgba(202, 138, 4, 0.14);
  --danger: #b91c1c;
  --danger-soft: rgba(220, 38, 38, 0.1);
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 18px rgba(15, 23, 42, 0.07);
  --shadow-2: 0 18px 44px rgba(15, 23, 42, 0.22);
  --ring: 0 0 0 2px #fff, 0 0 0 4px #2158d6;
  --bg-glow-a: rgba(47, 109, 240, 0.13);
  --bg-glow-b: rgba(124, 58, 237, 0.07);
  --grid-line: rgba(15, 23, 42, 0.04);
  --rk-0: #7c3aed;
  --rk-1: #1d63d8;
  --rk-2: #0f8a7c;
  --rk-3: #b47a06;
  --rk-4: #c2570c;
  --rk-5: #be185d;
}