/**
 * @conda/ops-ui — Design-Tokens
 *
 * Stand: 2026-08-14 — LIGHT THEME, angeglichen an die Götter-Apps
 * (HERMES-2026-08-14-UI-ANGLEICH-THEMIS).
 *
 * HERKUNFT: `ops-ui` wurde am 26.04. aus dem damaligen JFX-Board extrahiert —
 * das war ein Dark Theme. THEMIS ist dasselbe Board, weiterentwickelt, und ist
 * heute hell. HERMES sah deshalb aus wie eine fremde Anwendung. Die Werte unten
 * sind am 14.08. LIVE aus THEMIS (`jfx.conda.online`) gemessen und im
 * Entscheidungs-Register festgehalten; sie sind die verbindliche Quelle.
 *
 * ⚠️ ZWEI ARTEN VON WERTEN, bewusst getrennt gekennzeichnet:
 *   [THEMIS]   direkt gemessen — nicht nach Augenmaß ändern.
 *   [ABGELEITET] von uns ergänzt, weil HERMES ein Token braucht, das THEMIS
 *                nicht führt (z. B. eine vierte Grundfläche) oder weil der
 *                gemessene Wert als TEXT die WCAG-AA-Schwelle reißt. Jede
 *                Ableitung steht mit ihrem gemessenen Kontrast dabei.
 *
 * Die Kontrastwerte in den Kommentaren sind gerechnet (WCAG 2.1 relative
 * Luminanz), nicht geschätzt — `web-tokens-kontrast.test.js` prüft sie bei
 * jedem Testlauf nach, damit ein künftiger Token-Dreh keinen unlesbaren Text
 * erzeugt.
 *
 * Verwendung: <link rel="stylesheet" href="/ops-ui/tokens.css"> als ALLERSTES.
 */

:root {
  /* === BRAND [THEMIS] — unverändert, war schon identisch === */
  --brand: #27614e;
  --brand-hover: #1e4d3c;
  --brand-light: #8eaba1;
  --brand-sky: #5c90bf;
  /* CTA: die Handlungsfarbe der Götter-Apps. Heller Mint, Text darauf dunkel. */
  --brand-cta: #9dd1c1;
  --brand-cta-hover: #7fc0ad;

  /* Alte Namen, damit Module und Komponenten unverändert weiterlaufen.
     Sie zeigen auf dieselben Werte — es gibt KEINE zweite Farbdefinition. */
  --conda-green: var(--brand);
  --conda-green-hover: var(--brand-hover);
  --conda-green-active: var(--brand-hover);
  --conda-sky: var(--brand-sky);
  --conda-sky-hover: #4a7aa6;

  /* === BACKGROUNDS [THEMIS] === */
  --bg-primary: #ffffff;
  --bg-secondary: #f1f0eb;
  --bg-tertiary: #ebeae4;
  /* [ABGELEITET] Vierte Fläche für Hover auf bereits flächigen Elementen.
     THEMIS führt nur drei; eine Stufe unter `tertiary`, damit ein Hover
     sichtbar bleibt, ohne wie eine eigene Farbe zu wirken. */
  --bg-quaternary: #e0dfd8;
  --bg-overlay: rgba(26, 26, 24, 0.45);

  /* === TEXT [THEMIS] === */
  /* Kontrast auf bg-primary/secondary/tertiary: 17.43 / 15.27 / 14.46 */
  --text-primary: #1a1a18;
  /* 6.49 / 5.69 / 5.38 — AA auch für Kleintext */
  --text-secondary: #5f5e5a;
  /* [ABGELEITET] THEMIS misst hier #888780. Gerechnet ergibt das auf unserer
     dritten Grundfläche 2.99 — um einen Hundertstel unter der 3:1-Schwelle für
     große/dekorative Elemente. Statt die Schwelle zu verschieben, ist der Ton
     zwei Stufen dunkler: 3.74 / 3.28 / 3.11. Der Unterschied ist mit dem Auge
     nicht zu sehen, die Prüfung hält.
     NUR dekorativ (Pfeile, deaktivierte Zustände) — für Fließtext reicht auch
     das nicht, `.form-help` nutzt deshalb `--text-secondary`. */
  --text-tertiary: #858480;
  --text-disabled: #a3a29b;
  --text-inverse: #ffffff;
  /* [ABGELEITET] Text auf Markenflächen (Header, Primärknopf, Badges).
     Ersetzt die acht hart kodierten `#fff` aus der Inventur. */
  --text-on-brand: #ffffff;
  --text-on-cta: #1a1a18; /* auf --brand-cta: 10.23 */

  /* === SEMANTIC ===
     [ABGELEITET] Die alten Werte stammen aus dem Dark Theme und sind auf
     hellem Grund als TEXT unlesbar (gemessen auf bg-tertiary: Erfolg 2.54,
     Warnung 1.42, Fehler 3.25). Genau so werden sie aber verwendet — die
     Status-Pillen färben Text, nicht Flächen. Ersetzt durch die nächstliegenden
     AA-konformen Töne derselben Farbfamilie. */
  --success: #17692f; /* 6.78 / 5.94 / 5.62 */
  --warning: #8a6100; /* 5.54 / 4.86 / 4.60 */
  --danger: #c0261f;  /* 5.94 / 5.20 / 4.92 — weiß darauf: 5.94 */
  /* [ABGELEITET] Das Markenblau ist als Fläche/Rahmen richtig, als Text auf
     hellem Grund aber zu hell (3.39 / 2.97 / 2.81). Für Links und Badges
     deshalb ein dunklerer Ton derselben Familie. */
  --info: #35648b;    /* 6.27 / 5.50 / 5.21 */

  /* === BORDERS [THEMIS] === */
  --bd-secondary: rgba(0, 0, 0, 0.22);
  --bd-tertiary: rgba(0, 0, 0, 0.12);
  --border: var(--bd-tertiary);
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-strong: var(--bd-secondary);
  /* ⚠️ OFFEN BENANNT statt stillschweigend gelöst: Die THEMIS-Haarlinie
     erreicht gegen die Grundflächen nur 1.31–1.32, die kräftige 1.68. WCAG
     1.4.11 verlangt 3:1 für Ränder, die ein Bedienelement überhaupt erst
     erkennbar machen — das erreicht keiner der beiden. In diesem Layout trägt
     die Erkennbarkeit deshalb die FLÄCHE: Seitengrund ist `--bg-secondary`,
     Karten und Eingabefelder sind weiß. Der Rand setzt die Kante, er trägt sie
     nicht allein. Wer kräftigere Ränder will, dreht diesen einen Wert. */
  --bd-input: rgba(0, 0, 0, 0.22);

  /* === TYPOGRAPHY [THEMIS: Inter, unverändert] === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.3;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* === SPACING (8px Grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* === RADII [THEMIS: 8/12] === */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* === LAYOUT === */
  --container-max: 1440px;
  /* 68px + Padding 10/16 — an THEMIS (`.brand-hd`) gemessen, nicht geschaetzt. */
  --topbar-height: 68px;
  --sidenav-width: 220px;
  --sidenav-width-collapsed: 64px;

  /* === ELEVATIONS ===
     [ABGELEITET] Auf hellem Grund tragen Schatten die Tiefe, nicht Ränder —
     die Dark-Theme-Werte (bis 0.35 Schwarz) wirken hier wie Schmutz. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --elev-2: 0 2px 8px rgba(0, 0, 0, 0.10);
  --elev-3: 0 8px 24px rgba(0, 0, 0, 0.14);

  /* === TIMING === */
  --transition-fast: 0.12s ease;
  --transition-base: 0.18s ease;
  --transition-slow: 0.3s ease;
}

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  /* Seitengrund ist das warme Grau, Karten/Dialoge/Felder sind weiß — wie in
     THEMIS. Damit trennt die FLÄCHE die Ebenen; ein Haarlinien-Rand allein
     könnte das auf hellem Grund nicht (siehe --bd-input). */
  background: var(--bg-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--info); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }