/* ─────────────────────────────────────────────────────────────────────────────
 * my-workbench Website — Design-Tokens (MYW-1103)
 *
 * Verbindliche CI-Referenz: Epic-Doc `design-ci` (Mini-CI V1, Hannes 2026-09-09).
 * Die Farbwerte spiegeln bewusst 1:1 die Tokens aus `manager/frontend/src/index.css`
 * (MYW-871), damit Website und Portal als EIN System wirken. Die Marken-Ebene
 * darüber (Space Grotesk / IBM Plex) kommt aus der CI.
 *
 * Regel aus der CI: der Orange-Akzent führt, dominiert nicht (~10 % der Fläche) —
 * Orange ist ausschließlich Interaktion/Marke, nie Statusfläche.
 * Tokens NICHT über die Seite verstreut hardcoden — alles läuft über diese Vars.
 * ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* — Farbwelt (aus design-ci / manager-frontend) — */
  --wb-orange:        #e2662b;  /* Signal / Akzent — Werkbank-Orange, sparsam   */
  --wb-orange-hover:  #c9541d;  /* Interaktions-Hover                            */
  --wb-orange-soft:   #fdf1e9;  /* Akzentfläche hell (Chips, Hovers)             */
  --wb-orange-ink:    #8f3a12;  /* Text auf heller Akzentfläche                  */

  --wb-paper:         #f5f2ec;  /* Papier / Werkbank-Weiß — warmes Off-White     */
  --wb-paper-2:       #f2efe9;  /* zweite helle Fläche (Sektionen)               */
  --wb-card:          #ffffff;  /* Karten                                        */

  --wb-ink:           #1a1917;  /* Text primär — Tinte, warmes Near-Black        */
  --wb-secondary:     #6b6660;  /* Text sekundär — warmes Grau                   */
  --wb-muted:         #8b857c;  /* noch leiser (Fußnoten, Meta)                  */

  --wb-anthracite:    #232120;  /* dunkle warme Fläche — Header/Footer/Werkstatt */
  --wb-anthracite-2:  #1a1917;  /* tiefste dunkle Fläche                         */
  --wb-on-dark:       #f0ece4;  /* Text auf dunkler Fläche                       */
  --wb-on-dark-muted: #a89f92;  /* sekundärer Text auf dunkler Fläche            */

  --wb-border:        #e3ddd3;  /* Rahmen/Trennlinien auf hell                   */
  --wb-border-dark:   rgba(240, 236, 228, 0.13); /* Rahmen auf dunkel            */

  /* Statusfarben — tragen Zustand, damit Orange Marke bleibt (aus manager) */
  --wb-ok:            #2f7a43;
  --wb-warn:          #96690a;
  --wb-bad:           #b42318;

  /* — Typografie (CI) — */
  --wb-font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wb-font-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --wb-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* — Form / Radius / Schatten (am Manager orientiert, --radius 0.625rem) — */
  --wb-radius:    0.625rem;
  --wb-radius-sm: 0.375rem;
  --wb-radius-lg: 1rem;
  --wb-radius-pill: 999px;
  --wb-shadow:    0 1px 2px rgba(26, 25, 23, 0.06), 0 8px 24px rgba(26, 25, 23, 0.06);
  --wb-shadow-sm: 0 1px 2px rgba(26, 25, 23, 0.06);

  /* — Layout — */
  --wb-maxw:      72rem;   /* Content-Breite                                    */
  --wb-gutter:    1.5rem;  /* Seitenrand mobil                                  */
}