/* ═══════════════════════════════════════════════
   StageOrder — Shared Design System
   ═══════════════════════════════════════════════ */

:root {
  --bg-base: #08080c; --bg-surface: #101014; --bg-elevated: #18181e; --bg-hover: #202028;
  --text-primary: #eeeef2; --text-secondary: #888896; --text-muted: #555562; --text-dim: #33333e;
  --accent: #f59e0b; --accent-hover: #d97706; --accent-subtle: rgba(245,158,11,0.08); --accent-glow: rgba(245,158,11,0.12);
  --green: #22c55e; --red: #ef4444; --red-subtle: rgba(239,68,68,0.12);
  --border: #1a1a22; --border-light: #282832;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', "SF Mono", Menlo, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #000; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 99px; }