/* Design-Tokens — JSCS Content Engine (NFA-003, Design-Richtung A).
 *
 * SOLL-STAND: High-Fidelity Design-Handoff (2026-06-19), siehe
 * Obs_JSCSContent/Design-Handoff/ (README.md = verbindliche Design-Spec).
 *
 * Single source of truth für Farben/Radien/Schatten/Typo als CSS-Variablen.
 * Light = :root, Dark = .dark (class-Strategie, Toggle in base.html).
 * --accent ist die CI-Farbe (Salbeigrün #829a94); --project-accent kann pro
 * Projekt überschrieben werden (FA-004 #20, JSCS #829a94 / JSS #c4a672) und
 * fällt sonst auf die CI-Farbe. Akzent-Flächen referenzieren --project-accent.
 *
 * Tailwind (CDN, Phase 0/1) ist in base.html so konfiguriert, dass Utilities wie
 * bg-bg, text-fg, border-line, bg-accent, bg-pa auf diese Variablen mappen.
 * In Phase 11 wird der Play-CDN durch einen Tailwind-Standalone-Build ersetzt.
 */

:root {
  /* Flächen & Text — hell & luftig */
  --bg: #f7f8f7;
  --surface: #ffffff;
  --surface-2: #f1f4f3;
  --surface-3: #fbfcfb;
  --fg: #14201c;
  --fg-muted: #5d6b66;
  --fg-soft: #8a958f;
  --line: #e3e8e6;
  --line-2: #eef1f0;

  /* CI-Akzent (Salbeigrün) + Projekt-Akzent (überschreibbar) */
  --accent: #829a94;
  --accent-hover: #6f8780;
  --accent-fg: #14201c; /* dunkler Text auf hellem Salbei-Button */
  --accent-tint: #eef2f1;
  --accent-tint-2: #dde6e3;
  --project-accent: var(--accent); /* JSCS #829a94 · JSS #c4a672 */

  /* Status (Pills/Badges) */
  --ok: #2f7d57;
  --ok-bg: #e3f3ea;
  --warn: #9a6b1f;
  --warn-bg: #faf0db;
  --danger: #b13a3a;
  --danger-bg: #fbe6e6;
  --info: #3a6ea5;
  --info-bg: #e6eef7;

  /* RGB-Kanäle derselben Farben für Tailwind-Opacity-Utilities (z. B. ring-accent/30,
   * bg-info/10). Tailwind kann eine Hex-`var()`-Farbe nicht in Kanäle zerlegen; mit
   * `rgb(var(--x-rgb) / <alpha-value>)` (base.html) funktioniert die Opacity dann korrekt
   * statt auf Tailwind-Blau zurückzufallen. Bei Farbänderung oben hier mitpflegen. */
  --accent-rgb: 130 154 148;
  --ok-rgb: 47 125 87;
  --warn-rgb: 154 107 31;
  --danger-rgb: 177 58 58;
  --info-rgb: 58 110 165;

  /* Form / Elevation */
  --radius: 0.625rem;
  --r-sm: 0.375rem;
  --r-lg: 0.875rem;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(20, 32, 28, 0.05), 0 1px 3px rgba(20, 32, 28, 0.04);
  --shadow-pop: 0 10px 30px rgba(20, 32, 28, 0.18);

  /* Typografie — Signature-Font + Body = Source Sans 3 (via Google Fonts in
   * base.html). IBM Plex Mono für Timestamps, IDs, Token-/Score-/Budget-Werte,
   * Channel-Pfade. --font / --mono sind Aliase für die Handoff-Spec-Konvention. */
  --font-heading: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "Consolas", monospace;
  --font: var(--font-sans);
  --mono: var(--font-mono);

  /* Pipeline-Stage-Farben (Handoff-Tabelle). Die meisten Stages mappen auf
   * Status-Tokens (info/warn/danger/ok) bzw. Akzent; hier nur die Sonderfälle:
   * Claimed (neutral-grün) und Übermitteln (violett). Review = warn, Überarbeiten = danger. */
  --stage-claimed: #5d6b66;  --stage-claimed-bg: #eef1f0;  --stage-claimed-dot: #9aa8a2;
  --stage-send: #6a5a8c;     --stage-send-bg: #ece8f4;     --stage-send-dot: #7a68a6;
}

/* Schrift-Skalierung (Design-Tweak): Basis +2pt ggü. Browser-Default (16px).
 * Skaliert alle rem-basierten Tailwind-Text-Utilities proportional mit.
 * NB: Offene Design-Entscheidung (Handoff #3) — 16px vs. +2pt ≈ 18.7px. */
html { font-size: calc(16px + 2pt); } /* ≈ 18.7px */

/* Body-Text im Sans-Stack, Headings im Signature-Font (Source Sans 3). */
body { font-family: var(--font-sans); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

.dark {
  --bg: #0e1513;
  --surface: #14201c;
  --surface-2: #1b2925;
  --surface-3: #111a17;
  --fg: #e8eeec;
  --fg-muted: #93a39d;
  --fg-soft: #6d7d77;
  --line: #2a3a35;
  --line-2: #22302b;

  --accent: #8fa9a2;
  --accent-hover: #a3bab3;
  --accent-fg: #0e1513;
  --accent-tint: #1b2925;
  --accent-tint-2: #243430;
  --project-accent: var(--accent);

  --ok: #6cc295;
  --ok-bg: #16352a;
  --warn: #e0b15e;
  --warn-bg: #3a2f17;
  --danger: #e08585;
  --danger-bg: #3a1f1f;
  --info: #8bb4e0;
  --info-bg: #1a2a3a;

  /* RGB-Kanäle (Dark) — siehe Kommentar im :root-Block. */
  --accent-rgb: 143 169 162;
  --ok-rgb: 108 194 149;
  --warn-rgb: 224 177 94;
  --danger-rgb: 224 133 133;
  --info-rgb: 139 180 224;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5);

  /* Stage-Sonderfarben (Dark) */
  --stage-claimed: #93a39d;  --stage-claimed-bg: #22302b;  --stage-claimed-dot: #6d7d77;
  --stage-send: #b9a9d6;     --stage-send-bg: #2a2440;     --stage-send-dot: #9a86c6;
}

/* ── Animationen (Handoff) ───────────────────────────────────────────────── */
/* Skeleton / Slot „in progress" (Shimmer), Spinner, In-Arbeit-Punkt (Pulse). */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes jscs-toast-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}
.jscs-toast { animation: jscs-toast-in 0.18s ease-out; }