/* Gestaltungs-Tokens von Tenderscope nach Designkonzept Abschnitt 5 bis 9 (E162 löst E108 ab, E118).
   Einzige Quelle für Farbe, Schrift, Abstand, Radius, Schatten und Bewegung der App. Jede Farbe steht
   einmal mit hellem und dunklem Wert in light-dark(); welcher gilt, entscheidet color-scheme:
   ohne data-theme das System, mit data-theme="light" oder "dark" die Wahl im Umschalter (G10).
   Neue Regeln nutzen nur die Namen dieser Datei. Die Kontraste prüft tokens.test.ts nach WCAG 2.1. */

:root {
  color-scheme: light dark;

  /* 5.10 Grundtöne Nachtblau, leicht zum Blau gefärbt */
  --bg: light-dark(#f6f7fa, #0d111b);
  --surface: light-dark(#ffffff, #141a27);
  --surface-2: light-dark(#eff1f6, #1a2233);
  /* Designkonzept 4.2: Seitenleiste leicht abgesetzt vom Inhalt */
  --nav: light-dark(#eceff5, #0a0e16);
  --hover: light-dark(#e6eaf2, #222c40);
  /* Regelwerk 15: Rückmeldung beim Herunterdrücken, eine Stufe dunkler als --hover */
  --pressed: light-dark(#dfe4ee, #28344a);
  --border: light-dark(#d3d9e4, #2a3448);
  --input: light-dark(#7a8499, #5f6c86);
  --text: light-dark(#141a26, #e6eaf2);
  /* Recherche UX 4.5 (E297): Nebenschriften im Dunkelmodus heller, damit Zeichen und Metadaten auf
     dunklen Flächen lesbar bleiben. */
  --text-2: light-dark(#4a5366, #b8c0cf);
  --text-3: light-dark(#5a6478, #a3acbf);

  /* 5.10 Marke Nachtblau, Link, Messing für „beobachtet“ und Suchtreffer */
  --primary: light-dark(#1e3a6e, #8fb0ee);
  --primary-hover: light-dark(#162c55, #abc4f3);
  --primary-subtle: light-dark(#eaf0fc, #16264a);
  --on-primary: light-dark(#ffffff, #0d111b);
  /* Link in der Stufe des Logoblaus, die auf jeder Fläche 4,5 : 1 hält */
  --link: light-dark(#2f5fc9, #7fa4f1);
  /* Logoblau als Akzent, nur Grafik ab 3 : 1: Logozeichen, Auswahl, Fokus, Häkchen, Fortschritt.
     Nie Schrift, nie Status. */
  --brand-accent: #5484ec;
  --on-brand-accent: light-dark(#ffffff, #0d111b);
  --watch: light-dark(#a57a1c, #d9ae52);
  --watch-text: light-dark(#74540d, #e4c47c);
  --mark-bg: light-dark(#f7e8bf, #3e3216);
  --focus-ring: var(--brand-accent);
  --inverse-bg: light-dark(#141a26, #e6eaf2);
  --inverse-text: light-dark(#f6f7fa, #0d111b);
  --scrim: light-dark(rgb(13 17 27 / 0.45), rgb(0 0 0 / 0.6));
  /* QR-Code der Einrichtung (E302): in beiden Schemata dunkel auf hell, weil Kameras invertierte
     Codes oft nicht lesen. */
  --qr-module: #141a26;
  --qr-quiet: #ffffff;

  /* Blauskala um das Logoblau für einfarbige Diagramme, hell nach dunkel */
  --primary-50: #eef3fd;
  --primary-100: #dbe6fb;
  --primary-200: #bed0f6;
  --primary-300: #8fb0ee;
  --primary-400: #5484ec;
  --primary-500: #3a6cd9;
  --primary-600: #2f5fc9;
  --primary-700: #264ca3;
  --primary-800: #1e3a6e;
  --primary-900: #162c55;

  /* 5.4 Semantik: Schrift und Fläche, jede Meldung zusätzlich mit Symbol und Text */
  --success: light-dark(#1b7a43, #5ccb8a);
  --success-subtle: light-dark(#e5f4ea, #12301f);
  --warning: light-dark(#8f5400, #f0b451);
  --warning-subtle: light-dark(#fdf0d9, #3a2a0e);
  --danger: light-dark(#b42318, #f28b82);
  --danger-subtle: light-dark(#fde8e6, #3d1714);
  --info: light-dark(#1f5fbf, #7eb0f5);
  --info-subtle: light-dark(#e6effc, #15284a);

  /* 5.5 Fristampel: Farbe nur zusätzlich zu Form und Wort */
  --deadline-urgent: var(--danger);
  --deadline-soon: var(--warning);
  --deadline-open: var(--success);
  --deadline-none: var(--text-3);

  /* 5.6 Relevanz: nur das Blau der Marke, nie Ampel */
  --relevance-high: light-dark(#2f5fc9, #8fb0ee);
  --relevance-mid: var(--brand-accent);
  --relevance-low: light-dark(#bed0f6, #253a66);

  /* 5.7 Workflow-Status als Chip: Schrift auf Fläche. Kein Status trägt Marke oder Akzent (E162):
     Neu Türkis, Prüfung Violett, Bearbeitung Beere. */
  --status-new-text: light-dark(#0b6a72, #6cc9d1);
  --status-new-bg: light-dark(#e2f3f4, #0f3338);
  --status-review-text: light-dark(#6a3db8, #c0a6f2);
  --status-review-bg: light-dark(#f1ebfa, #2a1f45);
  --status-go-text: var(--success);
  --status-go-bg: var(--success-subtle);
  --status-in-progress-text: light-dark(#9a2d6a, #f09ac8);
  --status-in-progress-bg: light-dark(#fbe9f2, #3f1a2f);
  --status-submitted-text: var(--text);
  --status-submitted-bg: var(--hover);
  --status-won-text: #ffffff;
  --status-won-bg: #1b7a43;
  --status-lost-text: var(--danger);
  --status-lost-bg: var(--danger-subtle);
  --status-no-go-text: light-dark(#4a5366, #a9b2c4);
  --status-no-go-bg: light-dark(#e8ebf1, #20293a);
  /* E191: Nicht relevant ist ein eigener Ausgang der Sichtung, warmes Grau statt des kühlen No-Go. */
  --status-irrelevant-text: light-dark(#5c5852, #b4afa8);
  --status-irrelevant-bg: light-dark(#efedea, #2a2825);

  /* Statussprache von Tenderscope 2 (Recherche UX 4.5, Mockup Orchestrierung Fassung 3, E287, E297):
     gestrichelt heißt ungeprüft, gelb gefüllt heißt „du bist dran“, Grün mit Haken heißt „ein Mensch
     hat bestätigt“. Jedes Zeichen trägt zusätzlich Form, Symbol und Wort. Herkunft in vier Zuständen. */
  --prov-system-text: var(--text-2);
  --prov-system-bg: var(--surface-2);
  --prov-assistant-text: var(--link);
  --prov-assistant-line: var(--brand-accent);
  --prov-validated-text: var(--success);
  --prov-validated-bg: var(--success-subtle);
  --prov-superseded-text: var(--warning);
  --prov-superseded-bg: var(--warning-subtle);
  /* Gates und Freigaben: offen mit gestricheltem Rand ab 3 : 1 (wie im Mockup das Feld, nicht die leise
     Trennlinie), fällig gelb gefüllt, erfüllt wie validiert, gescheitert in der Gefahrfarbe. */
  --gate-open-line: var(--input);
  --gate-open-text: var(--text-2);
  --gate-due-bg: light-dark(#e9a53a, #f0b451);
  --gate-due-text: light-dark(#141a26, #0d111b);
  --gate-done-text: var(--prov-validated-text);
  --gate-done-bg: var(--prov-validated-bg);
  --gate-blocked-text: var(--danger);
  --gate-blocked-bg: var(--danger-subtle);
  /* Lebenszeichen des Assistenten (E296): Punkt im Logoblau, stehengeblieben in der Gefahrfarbe. */
  --agent-active: var(--brand-accent);
  --agent-stale: var(--danger);
  /* Weiche Stufe des Logoblaus für Schraffuren, nur Grafik neben einer Zahl. */
  --brand-soft: light-dark(#bed0f6, #253a66);

  /* 5.8 Diagrammpalette in fester Reihenfolge (auch in palette.ts), Semantik nie als Reihe */
  --chart-1: light-dark(#2a78d6, #3987e5);
  --chart-2: light-dark(#eb6834, #d95926);
  --chart-3: light-dark(#1baf7a, #199e70);
  --chart-4: light-dark(#eda100, #c98500);
  --chart-5: light-dark(#e87ba4, #d55181);
  --chart-6: light-dark(#008300, #008300);
  --chart-7: light-dark(#6250d6, #9085e9);
  --chart-8: light-dark(#e34948, #e66767);
  --chart-other: var(--text-3);

  /* Länder folgen dem Platz, nie dem Rang; Farbe nur als Punkt neben dem Kürzel */
  --country-be: var(--chart-1);
  --country-nl: var(--chart-2);
  --country-lu: var(--chart-3);
  --country-ch: var(--chart-4);
  --country-other: var(--chart-other);

  /* 6 Typografie */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Schriftstufen nach Regelwerk 15 (R3-14, E155): Größe in rem, damit die Schriftgröße des
     Nutzers das Layout mitnimmt; jede Stufe hat ihren eigenen Zeilenabstand und ihre Laufweite.
     Große Stufen enger und dichter, Fließtext Laufweite 0 und Zeilenabstand 1,5, kleine Stufen
     leicht gesperrt. Pixelwerte bei 16 px Grundgröße in Klammern. */
  --text-display: 2rem; /* 32 */
  --leading-display: 1.1;
  --tracking-display: -0.022em;
  --text-title: 1.375rem; /* 22 */
  --leading-title: 1.2;
  --tracking-title: -0.017em;
  --text-lead: 1.125rem; /* 18 */
  --leading-lead: 1.3;
  --tracking-lead: -0.01em;
  --text-section: 1rem; /* 16 */
  --leading-section: 1.35;
  --tracking-section: -0.006em;
  --text-body: 0.875rem; /* 14 */
  --leading-body: 1.5;
  --tracking-body: 0;
  --text-meta: 0.78125rem; /* 12,5 */
  --leading-meta: 1.45;
  --tracking-meta: 0.004em;
  --text-label: 0.75rem; /* 12 */
  --leading-label: 1.4;
  --tracking-label: 0.01em;
  --text-micro: 0.6875rem; /* 11 */
  --leading-micro: 1.35;
  --tracking-micro: 0.02em;
  /* Versalien in Etiketten und Spaltenköpfen bleiben deutlich gesperrt. */
  --tracking-caps: 0.06em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* 7 Raster 4 Pixel in rem, mit halben Stufen für dichte Bedienelemente; Dichte, Radien, Breiten */
  --space-px: 1px;
  --space-0-5: 0.125rem; /* 2 */
  --space-1: 0.25rem; /* 4 */
  --space-1-5: 0.375rem; /* 6 */
  --space-2: 0.5rem; /* 8 */
  --space-2-5: 0.625rem; /* 10 */
  --space-3: 0.75rem; /* 12 */
  --space-3-5: 0.875rem; /* 14 */
  --space-4: 1rem; /* 16 */
  --space-4-5: 1.25rem; /* 20 */
  --space-5: 1.5rem; /* 24 */
  --space-6: 2rem; /* 32 */
  --space-7: 3rem; /* 48 */
  --space-8: 4rem; /* 64 */
  --space-9: 6rem; /* 96 */
  --row-compact: 2.5rem; /* 40 */
  --row-normal: 3.25rem; /* 52 */
  --target-min: 2.75rem; /* 44 */
  --radius-small: 0.25rem; /* 4 */
  --radius-control: 0.375rem; /* 6 */
  --radius-surface: 0.625rem; /* 10 */
  --radius-frame: 0.875rem; /* 14 */
  --radius-pill: 999px;
  --sidebar-width: 14rem; /* 224 */
  --sidebar-collapsed: 3.5rem; /* 56 */
  --preview-width: 22.5rem; /* 360 */
  --tip-width: 28rem; /* 448, Tipp mit dem Kern der KI am Titel (E270) */
  --tip-offset: 0.375rem; /* 6, Abstand des Tipps zum Titel */
  --measure: 70ch;
  --focus-width: 2px;
  --auth-width: 28rem; /* 448, Karte der Anmeldeseiten unter /auth/ (E300) */
  --qr-size: 14rem; /* 224, QR-Code der Einrichtung (E302) */
  /* Statuszeichen von Tenderscope 2 (E297): Zielgröße 24 Pixel nach WCAG 2.2, 2.5.8 */
  --mark-height: 1.5rem; /* 24 */
  --mark-symbol: 0.875rem; /* 14 */
  --pulse-size: 0.4375rem; /* 7, Punkt des Lebenszeichens */
  --bar-height: 0.5rem; /* 8, Segment-, Phasen- und Belastbarkeitsbalken */
  --bar-height-small: 0.375rem; /* 6, dieselben Balken in Zeilen */
  --legend-swatch: 0.625rem; /* 10, Farbfeld in der Legende eines Balkens */
  --card-min: 20rem; /* 320, Freigabekarte am Telefon */
  --popover-width: 24rem; /* 384, Erklärung eines Herkunftszeichens */

  /* Schatten nur für schwebende Ebenen (DP8) */
  --shadow-color: light-dark(rgb(13 17 27 / 0.12), rgb(0 0 0 / 0.55));
  --shadow-color-soft: light-dark(rgb(13 17 27 / 0.06), rgb(0 0 0 / 0.35));
  --shadow-float: 0 1px 2px var(--shadow-color-soft), 0 6px 20px var(--shadow-color-soft);
  --shadow-overlay: 0 2px 6px var(--shadow-color-soft), 0 16px 48px var(--shadow-color);

  /* 9 Bewegung nach Regelwerk 15: nichts federt, animiert werden nur transform und opacity.
     Weg und Maßstab stehen als Tokens, damit prefers-reduced-motion sie auf null setzt und nur ein
     kurzes Überblenden bleibt. Menüs wachsen aus ihrem Auslöser (transform-origin in ui.css). */
  --duration-press: 80ms;
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-shift: -0.25rem; /* Einblenden von oben */
  --motion-rise: 1.5rem; /* Blatt von unten */
  --motion-pop: 0.96; /* Menü wächst aus dem Auslöser */
  --press-scale: 0.97; /* Knopf beim Herunterdrücken */

  /* Frühere Namen aus styles.css (vor R3-08a) als Verweise, damit bestehende Regeln sofort im neuen
     Ton erscheinen. Nicht für neue Regeln; sie entfallen, wenn keine Regel sie mehr nutzt. */
  --fg: var(--text);
  --muted: var(--text-2);
  --line: var(--border);
  --accent: var(--primary);
  --accent-fg: var(--on-primary);
  --accent-soft: var(--primary-subtle);
  --ok: var(--success);
  --ok-soft: var(--success-subtle);
  --warn: var(--warning);
  --bad: var(--danger);
  --bad-soft: var(--danger-subtle);
  --focus: var(--focus-ring);
  --radius: var(--radius-surface);
  --shadow: var(--shadow-float);
}

:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}

/* Drei Pflichtabfragen nach Regelwerk 15 (R3-14, E155), geprüft in tokens.test.ts. */

/* Weniger Bewegung: kein Gleiten, kein Wachsen, kein Eindrücken; es bleibt ein kurzes Überblenden. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-base: var(--duration-fast);
    --duration-slow: var(--duration-fast);
    --motion-shift: 0;
    --motion-rise: 0;
    --motion-pop: 1;
    --press-scale: 1;
  }
}

/* Weniger Transparenz: durchscheinende Flächen werden deckend, ohne Unschärfe. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --scrim: light-dark(#5a6478, #000000);
    --shadow-color: light-dark(#b8c0cf, #000000);
    --shadow-color-soft: light-dark(#d3d9e4, #000000);
  }
}

/* Mehr Kontrast: Ränder als Bedienelement mit mindestens 3 : 1, Nebentext nahe am Haupttext,
   breiterer Fokusring, Link eine Stufe kräftiger für die dunklere Druckfläche. */
@media (prefers-contrast: more) {
  :root {
    --border: light-dark(#6b7488, #717d95);
    --text-2: light-dark(#2c3445, #c9d0dc);
    --text-3: light-dark(#2c3445, #c9d0dc);
    --link: light-dark(#264ca3, #abc4f3);
    --hover: light-dark(#dce2ec, #2a3550);
    --pressed: light-dark(#d3d9e4, #313d58);
    --focus-width: 3px;
  }
}

/* Seiten der eigenen Anmeldung unter /auth/ (E300 bis E311). Der Dienst liefert sie ohne die React-App
   und ohne Skript aus und hängt dieses Stylesheet an tokens.css an (src/web/auth-pages.ts). Darum nur
   Namen aus tokens.css; Farben, Abstände und Schriftstufen kommen von dort (Tor 22). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.auth {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: var(--space-7) var(--space-4);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.auth-card {
  width: 100%;
  max-width: var(--auth-width);
  padding: var(--space-6);
  background: var(--surface);
  border: var(--space-px) solid var(--border);
  border-radius: var(--radius-frame);
  box-shadow: var(--shadow-float);
}

.auth-card.wide {
  max-width: var(--measure);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  color: var(--primary);
  font-size: var(--text-section);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
  font-weight: var(--weight-semibold);
}

.auth-mark {
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-small);
  background: var(--brand-accent);
}

.auth h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  font-weight: var(--weight-semibold);
}

.auth h2 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-section);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
  font-weight: var(--weight-semibold);
}

.auth p {
  margin: 0 0 var(--space-3);
}

.auth .muted {
  color: var(--text-2);
}

.auth a {
  color: var(--link);
}

.auth-form {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
}

.auth-form label {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  font-weight: var(--weight-medium);
  color: var(--text-2);
}

.auth-form input {
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-3);
  border: var(--space-px) solid var(--input);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-section);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-section);
}

.auth-form input.code {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-caps);
}

.auth-form input:focus-visible,
.auth button:focus-visible,
.auth a:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--space-0-5);
}

.auth button {
  min-height: var(--target-min);
  padding: var(--space-2) var(--space-4);
  border: var(--space-px) solid var(--primary);
  border-radius: var(--radius-control);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.auth button:hover {
  background: var(--primary-hover);
}

.auth button:active {
  transform: scale(var(--press-scale));
}

.auth button.secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.auth button.secondary:hover {
  background: var(--hover);
}

.auth-note {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--info-subtle);
  color: var(--info);
}

.auth-note.error {
  background: var(--danger-subtle);
  color: var(--danger);
}

.auth-note.success {
  background: var(--success-subtle);
  color: var(--success);
}

.auth-rules {
  margin: 0;
  padding: 0 0 0 var(--space-5);
  color: var(--text-2);
}

.qr-box {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.qr {
  width: var(--qr-size);
  height: var(--qr-size);
  color: var(--qr-module);
}

.qr-quiet {
  fill: var(--qr-quiet);
}

.secret {
  font-family: var(--font-mono);
  font-size: var(--text-section);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-caps);
  word-break: break-all;
}

.codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: var(--text-section);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-caps);
}

.auth table {
  width: 100%;
  border-collapse: collapse;
}

.auth th,
.auth td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: var(--space-px) solid var(--border);
  text-align: left;
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
}

.auth th {
  color: var(--text-2);
  font-weight: var(--weight-medium);
}

.auth-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  font-size: var(--text-meta);
  line-height: var(--leading-meta);
  letter-spacing: var(--tracking-meta);
  color: var(--text-2);
}

.auth-inline {
  display: inline;
  margin: 0;
}

@media (max-width: 30rem) {
  body.auth {
    padding: var(--space-4) var(--space-3);
  }

  .auth-card {
    padding: var(--space-5) var(--space-4);
  }
}