variables.css
:root {
  /* =========================
     EVERCORE DESIGN SYSTEM
     X-INSPIRED DARK INTERFACE
  ========================== */

  /* Typography */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Background System */
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-tertiary: #121212;

  /* Text Hierarchy */
  --text-primary: #e7e9ea;
  --text-secondary: #71767b;
  --text-muted: #4d5156;

  /* Brand */
  --brand-primary: #4f8cff;
  --brand-hover: #3b78ff;

  /* Status */
  --success: #00ba7c;
  --warning: #ffd400;
  --danger: #f4212e;

  /* Borders */
  --border: #2f3336;

  /* Layout */
  --container-width: 600px;

  /* Spacing (dense X-style system) */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --time-fast: 120ms;
  --time-normal: 180ms;
}