:root {
  
  --nx-bg: #09090b;
  --nx-surface: #131316;
  --nx-surface-2: #1a1a1e;
  --nx-surface-hover: #222228;
  --nx-surface-press: #2a2a31;

  
  --nx-line: rgba(255, 255, 255, 0.07);
  --nx-line-strong: rgba(255, 255, 255, 0.13);
  --nx-line-focus: rgba(255, 255, 255, 0.28);

  
  --nx-text: #f4f4f5;
  --nx-muted: #a1a1aa;
  --nx-faint: #71717a;
  


  --nx-subtle: #8a8a93;

  
  --nx-primary: #fafafa;
  --nx-primary-fg: #09090b;
  --nx-primary-off: #2a2a31;
  --nx-primary-off-fg: #71717a;

  
  --nx-online: #34d399;
  --nx-warn: #fbbf24;
  --nx-danger: #f87171;
  --nx-plan: #a5b4fc;
  --nx-plan-bg: rgba(165, 180, 252, 0.10);
  --nx-online-ring: rgba(52, 211, 153, 0.18);
  --nx-warn-bg: rgba(251, 191, 36, 0.07);
  --nx-warn-line: rgba(251, 191, 36, 0.26);
  --nx-danger-bg: rgba(248, 113, 113, 0.08);

  
  --nx-glow-claude: 217, 119, 87;
  --nx-glow-codex: 110, 168, 254;
  --nx-glow-grok: 200, 200, 210;
  --nx-glow: var(--nx-glow-claude);

  
  --nx-radius-card: 22px;
  --nx-radius-menu: 16px;
  --nx-radius-chip: 999px;
  --nx-radius-row: 10px;
  --nx-radius-list: 14px;
  --nx-radius-sheet: 20px;

  
  --nx-shadow-card:
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 64px -24px rgba(0, 0, 0, 0.75),
    0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --nx-shadow-menu:
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 48px -12px rgba(0, 0, 0, 0.7);
  --nx-ring: 0 0 0 4px rgba(255, 255, 255, 0.06);

  
  --nx-col: 760px;
}