/* ============================================================
   BLACKBOX — LEGACY → NEW DESIGN SYSTEM BRIDGE
   ------------------------------------------------------------
   Maps old token names used in 6000+ lines of existing CSS and
   inline JSX styles onto the new design system tokens defined
   in blackbox-design/styles/tokens.css.
   Loaded AFTER tokens.css so the legacy variables resolve.
   ============================================================ */

:root {
  /* ── Brand (signal blue) ───────────────────────── */
  --brand:        var(--signal-500);
  --brand-soft:   var(--signal-300);
  --brand-dim:    var(--signal-700);
  --brand-2:      #7b5bff;
  --brand-b:      rgba(0, 144, 255, 0.10);

  /* ── Surface stack (s0 lightest legacy → ink-700 raised) ─── */
  --bg:    var(--ink-900);
  --s0:    var(--ink-1000);
  --s1:    var(--ink-800);
  --s2:    var(--ink-700);
  --s3:    var(--ink-600);
  --s4:    var(--ink-500);
  --s5:    var(--ink-400);

  /* ── Text stack ──────────────────────────────────── */
  --t1:    var(--ink-50);
  --t2:    var(--ink-100);
  --t3:    var(--ink-300);
  --t4:    var(--ink-400);

  /* ── Borders ─────────────────────────────────────── */
  --b0:    rgba(255, 255, 255, 0.04);
  --b1:    rgba(255, 255, 255, 0.08);
  --b2:    rgba(255, 255, 255, 0.12);
  --b3:    rgba(255, 255, 255, 0.18);

  /* ── Status colours ─────────────────────────────── */
  --green: var(--state-success);
  --red:   var(--state-danger);
  --amber: var(--state-warning);
  --cyan:  var(--signal-300);
  --purple:var(--state-info);
  --gold:  #ffcd55;

  /* ── Radii — only the legacy aliases that didn't already exist in tokens.
        Don't self-reference any of the new design's --r-* names (would
        create a CSS cycle and resolve to initial). ─────────────── */
  --r-xs:  6px;     /* legacy alias not in tokens */
  --r-3xl: 28px;    /* legacy alias mapped to new --r-2xl */

  /* ── Extra brand variants used by client/src/index.css (44+ refs) ── */
  --brand-a:    rgba(0,144,255,0.35);   /* BlackBox glow alpha */
  --brand-d:    var(--signal-400);
  --brand-l:    var(--signal-200);
  --brand-glow: 0 0 20px rgba(0,144,255,0.4);
  --neon:       0 0 24px rgba(0,144,255,0.5);
  --shadow-blue: 0 8px 24px -4px rgba(0,144,255,0.45);
  --aurora-1:   var(--signal-400);
  --aurora-2:   var(--state-info);
  --aurora-3:   #ff5468;

  /* ── Shadows ────────────────────────────────────── */
  --sh-sm: var(--el-1);
  --sh-md: var(--el-2);
  --sh-lg: var(--el-3);
  --sh-xl: var(--el-4);

  /* ── Glass ──────────────────────────────────────── */
  --glass-blur:        var(--blur-md);
  --glass-blur-sm:     var(--blur-sm);
  --glass-border:      rgba(255, 255, 255, 0.08);
  --glass-border-bright: rgba(255, 255, 255, 0.14);

  /* ── Fonts (legacy aliases) ─────────────────────── */
  --f-ui:      var(--font-ui);
  --f-display: var(--font-display);
  --f-mono:    var(--font-mono);

  /* ── Safe insets used by mobile sheets ──────────── */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ── Misc legacy ───────────────────────────────── */
  --tap: 44px;
}

/* Fix: existing legacy class .glass uses both --glass-blur AND a fallback */
.glass {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* Existing apps tend to set body bg directly — keep it driven by --bg → --ink-900 */
body {
  background: var(--bg);
  color: var(--t1);
}