/* ===========================================================================
   NexusCrawler — Design-Tokens (IronPulse-Design-System)
   Quelle: design/IronPulse (Dashboard).fig
   Fonts:  JetBrains Mono (Display/Zahlen/Labels) + Montserrat (UI)
   ========================================================================== */

:root {
  /* --- Flächen ---------------------------------------------------------- */
  --bg:          #f8fafc;   /* Seitenhintergrund */
  --surface:     #ffffff;   /* Karten, Panels */
  --ink:         #1c1a18;   /* Sidebar, dunkle Buttons */
  --panel:       #201e1c;   /* dunkle Hero-Panels */
  --panel-deep:  #171513;   /* Inset-Boxen in der Sidebar */
  --beige:       #efece4;   /* Pills, Chips, Icon-Flächen */
  --tan:         #ddd9cf;   /* Tracks, Trennflächen */

  /* --- Akzente ---------------------------------------------------------- */
  --red:         #e63946;   /* Primärakzent */
  --red-deep:    #c62b38;
  --green:       #38a865;
  --orange:      #e08c00;
  --orange-hot:  #ff8c40;
  --purple:      #7c6fdb;
  --gold:        #e8a33d;
  --blue:        #4a90d9;
  --teal:        #2a9d8f;

  /* --- Text ------------------------------------------------------------- */
  --text:        #22201d;
  --text-soft:   #6f6a62;
  --text-faint:  #9b958b;
  --side-text:   #b5afa6;   /* Sidebar-Grundtext */
  --side-faint:  #6f6a62;
  --side-border: #2e2b28;

  --border:      #e7e3da;

  /* --- Radii ------------------------------------------------------------ */
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;

  /* --- Fonts ------------------------------------------------------------ */
  --mono: 'JetBrains Mono', 'Courier Prime', ui-monospace, monospace;
  --sans: 'Montserrat', 'Nunito', system-ui, -apple-system, sans-serif;

  /* --- Effekte ---------------------------------------------------------- */
  --shadow: 0 1px 2px rgba(28,26,24,.04), 0 4px 16px rgba(28,26,24,.05);
  --shadow-red: 0 6px 16px rgba(230,57,70,.35);
  --ring-brand: 0 0 0 3px rgba(230,57,70,.25);
  --ring-error: 0 0 0 3px rgba(230,57,70,.35);
  --transition-base: all 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --sidebar-w: 248px;

  /* =====================================================================
     Legacy-Aliase (Semantik der alten Token-Datei → IronPulse-Werte),
     damit ältere Verweise weiter funktionieren.
     ===================================================================== */
  --brand:            var(--red);
  --brand-strong:     var(--red-deep);
  --brand-deep:       var(--ink);
  --brand-accent:     var(--orange-hot);
  --brand-ring:       rgba(230,57,70,.25);
  --brand-tint:       #fdeeef;
  --brand-tint-border:#fadcde;

  --text-ink:         var(--text);
  --text-body:        var(--text);
  --text-muted:       var(--text-soft);
  --text-subtle:      var(--text-faint);
  --text-on-brand:    #ffffff;
  --text-link:        var(--red);

  --surface-page:     var(--bg);
  --surface-card:     var(--surface);
  --surface-sunken:   var(--beige);
  --surface-inverse:  var(--ink);
  --surface-hover:    #f4f1ea;

  --border-subtle:    var(--border);
  --border-default:   var(--tan);
  --border-strong:    var(--text-faint);
  --border-brand:     #f5b8bd;

  --radius-sm:   6px;
  --radius-md:   var(--r-sm);
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  var(--r-lg);
  --radius-full: 9999px;

  --shadow-card:   var(--shadow);
  --shadow-soft:   0 4px 12px rgba(230,57,70,.10), 0 12px 28px rgba(230,57,70,.14);
  --shadow-button: var(--shadow-red);
  --shadow-overlay:0 8px 24px rgba(28,26,24,.12), 0 24px 48px rgba(28,26,24,.18);

  /* Status-Farben (Füllung + Text + Rand) */
  --status-ok-bg:      rgba(56,168,101,.13);
  --status-ok-text:    var(--green);
  --status-warn-bg:    rgba(224,140,0,.13);
  --status-warn-text:  var(--orange);
  --status-err-bg:     rgba(230,57,70,.12);
  --status-err-text:   var(--red);
  --status-js-bg:      rgba(124,111,219,.14);
  --status-js-text:    var(--purple);
  --status-neutral-bg: var(--beige);
  --status-neutral-text: var(--text-soft);
}