/* ============================================================
   nx-tokens.css — die einzige Wahrheit für Farben, Schrift,
   Abstände, Radien. Wird als erstes eingebunden, danach erst
   das seitenspezifische CSS.
   Namen nach NOEXIT-Design-Konzept, Abschnitt 2.
   ============================================================ */

:root {
  /* — Marke ————————————————————————————————— */
  --nx-hazard:      #e8b923;
  --nx-hazard-hot:  #ffd23f;
  --nx-hazard-deep: #b8890f;

  /* — Flächen ——————————————————————————————— */
  --nx-bg:      #050505;
  --nx-surface: #0a0a0a;
  --nx-void:    #000000;
  --nx-hover:   #131313;

  /* — Text ——————————————————————————————————
     --nx-text-dim ist bewusst #7d7d85 und nicht #6f6f76:
     5,03:1 auf --nx-bg statt 4,48:1. Siehe Konzept, Punkt 5. */
  --nx-text:       #f5f5f3;
  --nx-text-dim:   #7d7d85;
  --nx-text-ghost: #4a4a50;
  --nx-text-off:   #2f2f34;

  /* — Linien ————————————————————————————————— */
  --nx-line:     #3c3c42;   /* betonte Kante, Akzentrahmen        */
  --nx-edge:     #26262b;   /* ruhige Kartenkante                 */
  --nx-hairline: #1c1c20;   /* Trennlinie innerhalb einer Karte   */
  --nx-chip:     #2a2a2e;

  /* — Material ——————————————————————————————
     Eine Karte ist keine Farbfläche, sondern eine leicht
     angehobene Platte: oben minimal heller, mit einer feinen
     Lichtkante und einem Schatten, der sie vom Grund abhebt.
     Ohne das wirkt alles wie hingelegtes Papier.               */
  --nx-card-face: linear-gradient(180deg, #101012 0%, #0b0b0c 58%, #090909 100%);
  --nx-card-lip: inset 0 1px 0 rgba(255, 255, 255, .045);
  --nx-card-lift: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 26px -12px rgba(0, 0, 0, .85);
  --nx-well: linear-gradient(180deg, #060607 0%, #000 100%);

  /* Gelb ist die lauteste Farbe im Bild — als Fläche braucht es
     einen Verlauf, sonst wirkt es wie ein Aufkleber. */
  --nx-hazard-face: linear-gradient(180deg, #f2c531 0%, #e8b923 52%, #d9a916 100%);
  --nx-hazard-glow: 0 1px 0 rgba(255, 255, 255, .28) inset,
                    0 6px 18px -8px rgba(232, 185, 35, .55);

  /* — Signal ————————————————————————————————— */
  --nx-ok:     #43d675;
  --nx-danger: #e5484d;

  /* — Schrift ———————————————————————————————— */
  --nx-font-display: Oswald, system-ui, -apple-system, sans-serif;
  --nx-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* — Radien ————————————————————————————————— */
  --nx-r-outer: 20px;   /* Streifenrahmen um eine Karte      */
  --nx-r-card:  16px;   /* Standardkarte                     */
  --nx-r-inner: 12px;   /* Karte innerhalb eines Rahmens     */
  --nx-r-sm:    10px;   /* Bildflächen, Floorplan-Kacheln    */
  --nx-r-xs:     6px;   /* Badges                            */
  --nx-r-sheet: 22px;   /* Bottom-Sheet                      */
  --nx-r-pill:  999px;

  /* — Abstände ——————————————————————————————— */
  --nx-gap:      14px;  /* Standardabstand zwischen Blöcken  */
  --nx-gap-sm:   10px;
  --nx-pad:      16px;  /* Seitenrand                        */
  --nx-pad-card: 14px;

  /* — Schatten ——————————————————————————————— */
  --nx-shadow-float: 0 8px 24px rgba(0, 0, 0, .55);
  --nx-shadow-frame: 0 40px 80px rgba(0, 0, 0, .55);

  /* — Streifen (Hazard-Band) —————————————————
     Das Band am oberen und unteren Bildschirmrand nutzt exakt
     dieselben Werte wie die Website (app-theme.css): 45 Grad,
     14px Gelb auf 14px Schwarz, 9px hoch, 5 Sekunden Umlauf.
     Sonst sieht dieselbe Marke an zwei Stellen verschieden aus. */
  --nx-stripe-rand: repeating-linear-gradient(45deg,
                 var(--nx-hazard) 0 14px, var(--nx-void) 14px 28px);

  /* Die schmaleren Bänder innerhalb von Karten bleiben feiner --
     dort waere das grobe Muster zu laut. */
  --nx-stripe: repeating-linear-gradient(45deg,
                 var(--nx-hazard) 0 12px, var(--nx-bg) 12px 24px);
  --nx-stripe-sm: repeating-linear-gradient(45deg,
                 var(--nx-hazard) 0 10px, var(--nx-bg) 10px 20px);
  --nx-stripe-xs: repeating-linear-gradient(45deg,
                 var(--nx-hazard) 0 8px, var(--nx-bg) 8px 16px);

  /* — Sichere Bereiche (iPhone) ——————————————— */
  --nx-safe-top: env(safe-area-inset-top, 0px);
  --nx-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Alte Namen bleiben als Alias stehen, damit bestehender Code
   weiterläuft und Datei für Datei umgestellt werden kann. */
:root {
  --hazard: var(--nx-hazard);
  --red:    var(--nx-hazard);
  --yellow: var(--nx-hazard);
  --acc:    var(--nx-hazard);
  --bg:     var(--nx-bg);
  --bg2:    var(--nx-surface);
  --bg3:    var(--nx-void);
  --text:   var(--nx-text);
  --text-dim: var(--nx-text-dim);
  --dim:    var(--nx-text-dim);
  --muted:  var(--nx-text-dim);
  --line:   var(--nx-line);
  --rule:   var(--nx-line);
  --ok:     var(--nx-ok);
  --danger: var(--nx-danger);
}