/* ============================================================
   JARVIS Base Styles — Phase 4A P0
   Ergänzt legacy.css mit Token-basierter Grundlage.
   Beeinflusst bewusst wenig — visuelle Regression vermeiden.

   WICHTIG: Legacy-Inline-Styles in view.js überschreiben diese
   Datei (da sie nach den <link>-Tags stehen). Diese Datei
   etabliert die Token-Grundlage für Phase 4B.
   ============================================================ */

/* ============================================================
   TYPOGRAFISCHE GRUNDLAGE
   Setzt die semantische Token-Basis — wird von Legacy-Styles
   überschrieben, bis Legacy-Migration abgeschlossen.
   ============================================================ */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Textauswahl-Farbe */
::selection {
  background: var(--color-selection, #eef2ff);
}

/* ============================================================
   ÜBERSCHRIFTEN-HIERARCHIE
   Token-basiert — Legacy hat Vorrang durch Spezifität.
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight, 1.25);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary, #1a1d21);
  margin-top: 0;
  margin-bottom: var(--space-3, 12px);
}

/* ============================================================
   LINKS
   Erkennbar durch mehr als nur Farbe (Unterstrich).
   ============================================================ */
a:not(nav a):not(.skip-link):not([class]) {
  color: var(--color-action-primary, #6366f1);
  text-decoration: underline;
}

a:not(nav a):not(.skip-link):not([class]):hover {
  color: var(--color-action-primary-hover, #4f46e5);
}

/* ============================================================
   LISTEN
   ============================================================ */
ul, ol {
  padding-left: var(--space-6, 24px);
  margin: 0 0 var(--space-4, 16px) 0;
}

li {
  margin-bottom: var(--space-1, 4px);
}

/* ============================================================
   TECHNISCHE TEXTE
   ============================================================ */
code, kbd, samp {
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-sm, 0.875rem);
  background: var(--color-bg-sunken, #e9ecef);
  padding: var(--space-0-5, 2px) var(--space-1, 4px);
  border-radius: var(--radius-sm, 4px);
}

pre {
  font-family: var(--font-family-mono, monospace);
  font-size: var(--font-size-sm, 0.875rem);
  background: var(--color-bg-sunken, #e9ecef);
  padding: var(--space-4, 16px);
  border-radius: var(--radius-md, 8px);
  overflow-x: auto;
  margin: 0 0 var(--space-4, 16px) 0;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ============================================================
   SEMANTISCHE BEREICHE
   Grundstruktur für AppShell — wird in Phase 4B ausgebaut.
   ============================================================ */
main#main-content {
  outline: none;
}

/* ============================================================
   TABELLEN — Ergänzung zu Legacy
   ============================================================ */
th {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide, 0.025em);
  color: var(--color-text-tertiary, #868e96);
}

/* ============================================================
   FORMULARE — Ergänzung zu Legacy
   ============================================================ */
label {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  margin-bottom: var(--space-1, 4px);
}

fieldset {
  border: var(--border-width-thin, 1px) solid var(--color-border-default, #dee2e6);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-4, 16px);
  margin: 0 0 var(--space-4, 16px) 0;
}

legend {
  font-weight: var(--font-weight-medium, 500);
  padding: 0 var(--space-2, 8px);
}