/* ================================================================
   Protokoll-Workspace · Design-Tokens — Variante A "Amtsstube"
   ================================================================
   Diese Tokens sind die Single Source of Truth f\u00fcr die Optik.
   Bestehende Komponenten sollen NUR diese Variablen referenzieren,
   nicht mehr hartcodierte Hex-Werte.

   Wenn ihr Tailwind nutzt: \u00fcbersetzt diese Werte in tailwind.config
   (theme.extend.colors / fontFamily / borderRadius / fontSize).
   Wenn ihr CSS-in-JS nutzt: importiert die Variablen aus :root.
   ================================================================ */

:root {
  /* ─── Farben: warm-stone Basis + gedeckter Dunkelgr\u00fcn-Akzent ─── */
  --color-bg:           #faf8f3;   /* App-Hintergrund (warmes Off-White) */
  --color-bg-muted:     #fbf9f4;   /* Sidebar / sekund\u00e4re Fl\u00e4chen */
  --color-panel:        #ffffff;   /* Karten, Eingabefelder */

  --color-ink:          #1c1917;   /* Prim\u00e4rtext */
  --color-ink-2:        #57534e;   /* Sekund\u00e4rtext, Metadaten */
  --color-ink-3:        #a8a29e;   /* Tertiar / Labels / Disabled */

  --color-line:         #e7e2d6;   /* Standard-Border */
  --color-line-soft:    #f0ebde;   /* Subtile Trennlinien */

  --color-accent:       #3d5a3a;   /* Gedeckter Dunkelgr\u00fcn (Hauptakzent) */
  --color-accent-soft:  #e8efe5;   /* Akzent-Hintergrund (Tags, aktive States) */
  --color-accent-ink:   #2a3f28;   /* Akzent-Hover/Pressed */

  --color-warn:         #9a6a2a;   /* Warnung (gedeckt-bernstein) */
  --color-success:      #3d5a3a;   /* = Akzent (kein zus\u00e4tzliches Gr\u00fcn) */
  --color-danger:       #9a3a2a;   /* Fehler (gedeckt-rot) */

  /* ─── Typografie ─── */
  --font-sans:  "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:    11px;   /* Pills, Mono-Labels */
  --fs-sm:    12.5px; /* Sekund\u00e4rtext, Buttons */
  --fs-base:  14px;   /* Body */
  --fs-md:    15px;   /* Section-Titel */
  --fs-lg:    18px;   /* Mono-Werte (Metrics) */
  --fs-xl:    22px;   /* H1 */

  --lh-tight: 1.2;
  --lh-base:  1.45;
  --lh-loose: 1.6;

  --tracking-mono-label: 1.2px;   /* Uppercase-Mono-Labels */

  /* ─── Spacing ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;

  /* ─── Radien ─── */
  --radius-sm: 4px;     /* Pills, Mono-Tags */
  --radius-md: 6px;     /* Buttons, Inputs, Sidebar-Items */
  --radius-lg: 8px;     /* Felder mit dashed border, Tab-Container */
  --radius-xl: 10px;    /* Karten */
  --radius-full: 999px; /* runde Avatare, Status-Dots */

  /* ─── Schatten ─── */
  --shadow-card:    0 1px 0 rgba(28,25,23,0.02);
  --shadow-active:  0 1px 0 rgba(0,0,0,0.04), 0 4px 12px rgba(61,90,58,0.18);

  /* ─── Animation ─── */
  --t-fast:   .12s ease;
  --t-base:   .18s cubic-bezier(.2,.7,.3,1);
}

/* ─── Anwendung auf body ─── */
body {
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* Keyframes f\u00fcr aktive Status-Dots */
@keyframes pulse-accent {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: .4; }
}