/* JARVIS Design-Tokens — extrahiert aus der Claude-Design-Referenz
   "Login - Session" (Bundler-Export, data-props + Inline-Styles), 05.07.2026.

   Alle Variablen sind mit --jv- geprefixt, damit sie nicht mit den
   bestehenden :root-Variablen von dashboard.html (--bg, --surface, …)
   kollidieren. Diese Datei ist bewusst nebenwirkungsfrei: nur :root,
   @font-face und .jv-*-Utilities — kein Styling von Elementselektoren. */

/* ---------- Schrift: Hanken Grotesk (variabel 400–700, lokal) ---------- */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Farben (data-props-Defaults der Referenz) ---------- */
  --jv-hintergrund: #000000;   /* Seiten-Hintergrund */
  --jv-linien:      #1A1A1A;   /* Rasterlinien */
  --jv-rahmen:      #2A2A2A;   /* Panel-/Input-Rahmen */
  --jv-panel:       #161616;   /* Fenster-Hintergrund (auch Autofill-Shadow) */
  --jv-bar:         #1E1E1E;   /* Titelleiste */
  --jv-akzent:      #FFB020;   /* Akzent (Caret, Button, Focus-Unterstrich) */

  /* Text */
  --jv-text:        #EDEDED;   /* Input-Text */
  --jv-text-hell:   #F2F2F2;   /* Begrüßung */
  --jv-text-titel:  #9A9A9A;   /* Fenstertitel */
  --jv-text-label:  #7A7A7A;   /* Micro-Labels */
  --jv-text-lock:   #B4B4B4;   /* Text im Lock-Button */
  --jv-button-text: #0A0A0A;   /* Text auf Akzent-Button */

  /* Ampel */
  --jv-ampel-rot:    #FF5F57;
  --jv-ampel-gelb:   #FEBC2E;
  --jv-ampel-gruen:  #28C840;
  --jv-ampel-inaktiv:#4B4B4B;  /* alle drei, wenn das Fenster den Fokus verliert */
  --jv-glyph-rot:    #7A0B06;
  --jv-glyph-gelb:   #8A5A00;
  --jv-glyph-gruen:  #0A5217;

  /* Fehler = Ampel-Rot (Vorgabe: Unterstrich im Fehlerfall) */
  --jv-fehler: #FF5F57;

  /* ---------- Raster & Geometrie ---------- */
  --jv-raster: 42px;           /* Hintergrund-Raster 42×42 */
  --jv-radius: 0;              /* keine border-radius (außer Ampel-Kreisen) */

  /* ---------- Schrift-Stacks ---------- */
  --jv-font: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --jv-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Schatten des Fensters */
  --jv-schatten: 0 24px 70px -30px rgba(0, 0, 0, .85);
}

/* ---------- Micro-Label (Referenz: 600 10px mono, .16em, uppercase) ---------- */
.jv-micro-label {
  font: 600 10px/1 var(--jv-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jv-text-label);
}