/**
 * MC Hybrid Migration — Design Tokens (Phase 1)
 *
 * Single :root block with all hybrid tokens. No visual changes until Phase 2
 * links this file to page HTML.
 *
 * Sources: approved pattern-library mockup + v2 plan §2.2
 */

/* ═══════════════════════════════════════
   Google Fonts — Inter + JetBrains Mono
   ═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ─── Typography ─── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ─── Semantic backgrounds ─── */
  --bg-page: #0f172a;
  --bg-card: rgba(30, 41, 59, 0.65);
  --bg-card-solid: #1e293b;
  --bg-card-hover: rgba(51, 65, 85, 0.5);
  --bg-sidebar: rgba(15, 23, 42, 0.85);
  --bg-input: rgba(15, 23, 42, 0.5);

  /* ─── Borders ─── */
  --border: rgba(71, 85, 105, 0.4);
  --border-focus: rgba(99, 102, 241, 0.6);

  /* ─── Text hierarchy ─── */
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --text-dim: #64748b;

  /* ─── Status colors ─── */
  --status-online: #10b981;
  --status-idle: #6b7280;
  --status-active: #3b82f6;
  --status-warn: #f59e0b;
  --status-error: #ef4444;
  --status-done: #10b981;

  /* ─── Palette (v2 §2.2) ─── */
  --hy-cyan: #22d3ee;
  --hy-green: #34d399;
  --hy-amber: #fbbf24;
  --hy-red: #f87171;
  --hy-indigo: #818cf8;
  --hy-magenta: #f472b6;

  /* ─── Glow variants (rgba 0.4 alpha) ─── */
  --hy-cyan-glow: rgba(34, 211, 238, 0.4);
  --hy-green-glow: rgba(52, 211, 153, 0.4);
  --hy-amber-glow: rgba(251, 191, 36, 0.4);
  --hy-red-glow: rgba(248, 113, 113, 0.4);
  --hy-indigo-glow: rgba(129, 140, 248, 0.4);
  --hy-magenta-glow: rgba(244, 114, 182, 0.4);

  /* ─── Glass material ─── */
  --glass-bg: rgba(20, 24, 36, 0.55);
  --glass-bg-hover: rgba(51, 65, 85, 0.5);
  --glass-border: 1px solid rgba(148, 163, 184, 0.12);
  --glass-border-top: 1px solid rgba(148, 163, 184, 0.18);
  --glass-blur: 16px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --glass-radius: 12px;

  /* ─── Spacing scale (Chris locked MINIMAL) ─── */
  --hy-space-1: 4px;
  --hy-space-2: 8px;
  --hy-space-3: 12px;
  --hy-space-4: 16px;
  --hy-space-5: 20px;
  --hy-space-6: 24px;
  --hy-space-7: 32px;

  /* ─── Radius ─── */
  --hy-radius: 12px;

  /* ─── Brand accent ─── */
  /* SPARING USE ONLY: primary CTA, nav-active indicator, logo-hover.
     See v2 §4.14 audit rule. */
  --hy-brand: #E8923A;
}