/* ============================================================
   AOS Design System — Tokens für die WG-Tools (statisches HTML)
   Quelle: Artfair/aos-ui · DESIGN-SYSTEM.md (Stand 28.05.2026)
   Light = :root (Console, Login, Vault)
   Dark  = [data-theme="dark"] (Mission Control, Audit — Always-on)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  /* Ink — warme Neutralskala */
  --ink-0:#FAFAF7; --ink-50:#F5F4EE; --ink-100:#EBE9E1; --ink-200:#D7D4C8;
  --ink-400:#A09C8E; --ink-600:#5C594F; --ink-800:#2A2925; --ink-900:#0F0F0D;
  /* Brass — Akzent */
  --brass-50:#FAF5EB; --brass-100:#F2E6CB; --brass-400:#D1B175;
  --brass-500:#B8935A; --brass-600:#9A7942; --brass-700:#7B5F33;
  /* Status — gedämpft */
  --success:#5C7A4F; --warning:#C28A2B; --danger:#9A3B2E; --info:#4A6280;
  /* Semantik */
  --background:var(--ink-0); --surface:#FFFFFF; --surface-2:var(--ink-50);
  --border:var(--ink-200); --border-subtle:var(--ink-100);
  --foreground:var(--ink-800); --foreground-muted:var(--ink-400); --foreground-strong:var(--ink-900);
  --accent:var(--brass-500); --accent-hover:var(--brass-600); --accent-subtle:var(--brass-50); --ring:var(--brass-500);
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px;
  --shadow-pop:0 4px 16px rgba(15,15,13,.06);
  --font-sans:"Public Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}

[data-theme="dark"]{
  --background:#0F0F0D; --surface:#17150F; --surface-2:#1E1B14;
  --border:#2A2925; --border-subtle:#211F1B;
  --foreground:#EBE9E1; --foreground-muted:#A09C8E; --foreground-strong:#FAFAF7;
  --accent:#B8935A; --accent-hover:#D1B175; --accent-subtle:#1E1A12; --ring:#B8935A;
  --success:#7FA06B; --warning:#D4A24A; --danger:#C2604F; --info:#7290B4;
  --shadow-pop:0 4px 16px rgba(0,0,0,.4);
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--background);color:var(--foreground);
  font-family:var(--font-sans);letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-mono)}

/* Shared: Pill / Badge (AOS-Spec §6) */
.pill{
  display:inline-block;font-size:.68rem;font-weight:500;line-height:1.4;
  padding:2px 9px;border-radius:999px;border:1px solid var(--border);
  color:var(--foreground-muted);letter-spacing:.01em;white-space:nowrap;
}
.pill.green,.pill.success{color:var(--success);border-color:color-mix(in srgb,var(--success) 45%,transparent);background:color-mix(in srgb,var(--success) 12%,transparent)}
.pill.yellow,.pill.warning{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 45%,transparent);background:color-mix(in srgb,var(--warning) 12%,transparent)}
.pill.red,.pill.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent);background:color-mix(in srgb,var(--danger) 14%,transparent)}
.pill.blue,.pill.info{color:var(--info);border-color:color-mix(in srgb,var(--info) 45%,transparent);background:color-mix(in srgb,var(--info) 12%,transparent)}
.pill.gray{color:var(--foreground-muted)}

/* Status dot — ruhig, kein Blink (Artlogic) */
.dot{width:7px;height:7px;border-radius:50%;background:var(--success);display:inline-block}

/* Focus ring */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}