/* name: Nocturne
   art: dunkel, ruhig, dicht — Ops-Cockpit ohne Lärm
   stand: 2026-08-13
   Nur Token-Werte + drei variantenspezifische Regeln. tokens.css bleibt unberührt. */

/* Schrift selbst hosten: Inter-Dateien nach /web/fonts/ legen, dann diese
   beiden Blöcke einkommentieren. Ohne die Dateien greift system-ui — die
   Fläche funktioniert offline in jedem Fall.
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap;
  src: url("/web/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap;
  src: url("/web/fonts/Inter-Medium.woff2") format("woff2"); }
*/

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-surface-2: #14161f;
  --color-text: #e9e9ed;
  --color-text-muted: #9397ab;
  --color-text-faint: #75798c;
  --color-divider: rgba(233,233,237,0.16);

  --color-accent: #9184d9;
  --color-accent-tint: rgba(145,132,217,0.12);
  --color-accent-tint-2: rgba(145,132,217,0.22);
  --color-accent-deep: #2b2741;
  --color-accent-on-deep: #d2cefd;
  --color-on-accent: #161826;

  --color-ok: #6fbf8e;
  --color-warn: #d5a75f;
  --color-error: #dd7d72;
  --color-off: #9397ab;
  --color-mock-bg: #423a6a;
  --color-mock-text: #e7e5fe;

  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: var(--font-body);
  --font-heading-weight: 500;

  /* dicht (Dichte 0.70×) */
  --space-1: 3px;  --space-2: 6px;  --space-3: 9px;  --space-4: 12px;
  --space-6: 17px; --space-8: 23px; --space-12: 34px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);

  /* Linien laufen an den Enden aus — die Signatur dieses Designs */
  --rule: linear-gradient(to right, transparent, var(--color-divider) 48px,
          var(--color-divider) calc(100% - 48px), transparent);
}

/* Varianten-Regeln (erlaubt: wenige, benannte Ausnahmen) */

/* 1. Hauptaktion bleibt Umriss, nie Füllung. */
button.haupt, .knopf.haupt { background: transparent; }

/* 2. Sanfte Tiefe hinter dem Kopf statt harter Kante. */
body > header { background: linear-gradient(#191c2c, var(--color-surface-2)); }

/* 3. Überschriften nicht fetter als 500 — Hierarchie ist Größe und Raum. */
h1, h2, h3, h4, h5, h6 { font-weight: 500; }