/* LOKALE KOPIE — claude.ai/design "Capture & Scale Design System"
   (3a3ef1b2-cb49-4efa-9858-a00f83ec8d89, Stand 2026-07-11).
   1:1 gespiegelt, nicht von Hand ändern — Sync: docs/design-system.md */

/* ============================================================
   Capture & Scale — Color System
   A dark, technical HUD/blueprint palette:
   deep-navy grounds, electric-blue glow, lime-green signal.
   Competent, calm, premium — never neon-loud.
   ============================================================ */

:root {
  /* --- Ink / neutral grounds (dark → deep) --------------- */
  --ink-950: #05080f;   /* deepest ground — page base            */
  --ink-900: #080d17;   /* app / section ground                  */
  --ink-850: #0b1220;   /* raised ground                         */
  --ink-800: #0e1a2c;   /* panel / card surface                  */
  --ink-700: #12233a;   /* elevated panel, inputs                */
  --ink-600: #1a3049;   /* hover surface                         */
  --ink-500: #23405d;   /* strong divider / outline              */

  /* --- Slate (cool grey-blue text & lines) --------------- */
  --slate-600: #3a5372;
  --slate-500: #4d6a8c;
  --slate-400: #6b86a5;  /* muted text                           */
  --slate-300: #93a8c2;  /* secondary text                       */
  --slate-200: #bccadd;  /* soft text                            */
  --mist-100:  #dbe4f0;  /* near-white body on dark              */
  --white:     #ffffff;

  /* --- Lime — the brand signal --------------------------- */
  --lime-700: #5f8a00;
  --lime-600: #7fb500;
  --lime-500: #a4e320;   /* PRIMARY accent                       */
  --lime-400: #b8ee4a;   /* hover / bright                       */
  --lime-300: #cef47e;
  --lime-ink: #0c1400;   /* text/icon on a lime fill             */

  /* --- Blue — depth, data, secondary glow ---------------- */
  --blue-700: #163fa8;
  --blue-600: #1d4ed8;
  --blue-500: #2f6bf0;   /* data / links / secondary             */
  --blue-400: #4d8bff;
  --blue-300: #86b4ff;

  /* --- Signal red — "vorher"/problem/danger -------------- */
  --red-600: #cf3030;
  --red-500: #ef4444;
  --red-400: #f87171;

  /* --- Amber — caution (used sparingly) ------------------ */
  --amber-500: #f0a828;

  /* --- Raw glows (space-separated RGB, for rgba() halos) - */
  --glow-lime:  164 227 32;  /* @kind color */
  --glow-blue:  47 107 240;  /* @kind color */
  --glow-red:   239 68 68;   /* @kind color */
}

/* ============================================================
   Semantic aliases — reference these in components
   ============================================================ */
:root {
  /* Surfaces */
  --bg-base:        var(--ink-950);
  --bg-section:     var(--ink-900);
  --surface-card:   var(--ink-800);
  --surface-raised: var(--ink-700);
  --surface-hover:  var(--ink-600);
  --surface-inset:  var(--ink-850);

  /* Text */
  --text-primary:   var(--mist-100);
  --text-heading:   var(--white);
  --text-secondary: var(--slate-300);
  --text-muted:     var(--slate-400);
  --text-on-accent: var(--lime-ink);

  /* Accent */
  --accent:         var(--lime-500);
  --accent-bright:  var(--lime-400);
  --accent-deep:    var(--lime-600);

  /* Secondary / data */
  --data:           var(--blue-400);
  --data-deep:      var(--blue-600);

  /* State */
  --danger:         var(--red-500);
  --caution:        var(--amber-500);

  /* Lines */
  --border-hairline: rgba(147, 168, 194, 0.14);  /* thin cool line   */
  --border-soft:     rgba(147, 168, 194, 0.22);
  --border-strong:   var(--ink-500);
  --border-accent:   rgba(var(--glow-lime) / 0.55);

  /* Links */
  --link:            var(--blue-400);
  --link-hover:      var(--lime-400);

  /* Focus ring */
  --focus-ring:      rgba(var(--glow-lime) / 0.6);
}