/* Werkstatt · Design Tokens v2 · Rot/Glow — stammt aus dem Design, nur nach Absprache ändern */
:root {
  /* Flächen & Text */
  --wk-bg:            #0b0b0e;
  --wk-bg-deep:       #07070a;
  --wk-surface-1:     #101014;
  --wk-surface-2:     #131318;
  --wk-surface-3:     #17171c;
  --wk-surface-card:  linear-gradient(180deg, #16161b, #101014);
  --wk-surface-hot:   radial-gradient(400px 200px at 100% 0%, rgba(255,47,58,.18), transparent 70%), #131318;
  --wk-line:          #22222a;
  --wk-line-strong:   #2a2a33;
  --wk-line-hot:      #3a1418;
  --wk-text:          #f2f2f4;
  --wk-text-2:        #c9c9cf;
  --wk-text-muted:    #8f8f99;
  --wk-text-dim:      #66666e;

  /* Akzent */
  --wk-accent:        #ff2f3a;   /* nur Fläche */
  --wk-accent-text:   #ff5a63;   /* roter Text, 6.4:1 */
  --wk-accent-deep:   #8f1219;
  --wk-accent-soft:   rgba(255,47,58,.16);
  --wk-on-accent:     #0b0b0d;

  /* Status */
  --wk-ok:            #38d17a;   --wk-ok-soft:   rgba(56,209,122,.14);
  --wk-wait:          #f0c23c;   --wk-wait-soft: rgba(240,194,60,.14);
  --wk-idle:          #9a9aa4;   --wk-idle-soft: rgba(154,154,164,.13);
  --wk-fail:          #ff5a63;   --wk-fail-soft: rgba(255,47,58,.16);
  --wk-track:         #25252c;   /* Balken-Hintergrund */

  /* Status-Glyphen (Farbe ist nie allein) */
  --wk-glyph-open:    "○";  --wk-glyph-sliced:  "◐";
  --wk-glyph-running: "▶";  --wk-glyph-done:    "✓";
  --wk-glyph-post:    "✦";  --wk-glyph-built:   "■";
  --wk-glyph-fail:    "✕";

  /* Glow statt Elevation */
  --wk-glow-btn:      0 12px 34px -10px rgba(255,47,58,.9);
  --wk-glow-btn-lg:   0 16px 44px -12px rgba(255,47,58,1);
  --wk-glow-panel:    0 40px 120px -40px rgba(255,47,58,.35);
  --wk-glow-bar:      0 0 18px 0 rgba(255,47,58,.85);
  --wk-glow-dot:      0 0 14px 2px rgba(255,47,58,.8);
  --wk-bar-fill:      linear-gradient(90deg, #8f1219, #ff2f3a);
  --wk-frame-edge:    linear-gradient(160deg, #2a2a33, #141418 40%, #3a1418);

  /* Radius */
  --wk-r-pill:  999px;
  --wk-r-panel: 20px;
  --wk-r-phone: 26px;
  --wk-r-card:  16px;
  --wk-r-row:   14px;
  --wk-r-chip:  8px;

  /* Abstand */
  --wk-s-1: 4px;  --wk-s-2: 6px;   --wk-s-3: 8px;   --wk-s-4: 10px;
  --wk-s-5: 14px; --wk-s-6: 18px;  --wk-s-7: 22px;  --wk-s-8: 32px;
  --wk-gutter-mobile: 14px;
  --wk-gutter-desktop: 22px;

  /* Maße */
  --wk-topbar-h:   64px;
  --wk-tabbar-h:   66px;
  --wk-row-h:      52px;
  --wk-touch:      48px;
  --wk-touch-shop: 56px;
  --wk-touch-prim: 64px;
  --wk-bar-h:       8px;
  --wk-focus:      2px solid #ffffff;
  --wk-focus-off:  2px;

  /* Typo */
  --wk-font-sans: "Archivo", Helvetica, Arial, sans-serif;
  --wk-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --wk-fs-display: 900 44px/.95 var(--wk-font-sans);
  --wk-fs-h1:      900 38px/.98 var(--wk-font-sans);
  --wk-fs-h2:      800 26px/1   var(--wk-font-sans);
  --wk-fs-h3:      800 27px/1.12 var(--wk-font-sans);
  --wk-fs-card:    700 15px/1   var(--wk-font-sans);
  --wk-fs-body:    400 15px/1.5 var(--wk-font-sans);
  --wk-fs-small:   400 13px/1.45 var(--wk-font-sans);
  --wk-fs-label:   600 10px/1 var(--wk-font-mono);   /* + letter-spacing .14em, uppercase */
  --wk-fs-num-xl:  700 38px/1 var(--wk-font-mono);
  --wk-fs-num:     700 22px/1 var(--wk-font-mono);
  --wk-fs-num-s:   700 13px/1 var(--wk-font-mono);
  --wk-fs-code:    400 11px/1 var(--wk-font-mono);
  --wk-ls-tight:   -.03em;
  --wk-ls-label:    .14em;
}