:root {
  /* Background */
  --color-bg:        #FFFFFF;
  --color-surface:   #F9FAFB;
  --color-border:    #E5E7EB;

  /* Text */
  --color-text:      #111827;
  --color-secondary: #6B7280;
  --color-muted:     #9CA3AF;

  /* Accent */
  --color-accent:        #2563EB;
  --color-accent-hover:  #1D4ED8;
  --color-accent-bg:     #EFF6FF;

  /* Semantic */
  --color-success:    #059669;
  --color-success-bg: #ECFDF5;
  --color-warning:    #D97706;
  --color-warning-bg: #FFFBEB;
  --color-danger:     #DC2626;
  --color-danger-bg:  #FEF2F2;

  /* Spacing scale (4px base) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Monospace numerics — use on amounts, IDs, timestamps */
.amount,
.mono-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Confidence / health dots */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot-success { background: var(--color-success); box-shadow: 0 0 0 3px rgba(5,150,105,0.15); }
.dot-warning { background: var(--color-warning); box-shadow: 0 0 0 3px rgba(217,119,6,0.15); }
.dot-danger  { background: var(--color-danger);  box-shadow: 0 0 0 3px rgba(220,38,38,0.15); }

/* Flash banners */
.flash-banner { animation: flash-in 0.2s ease-out; }
.flash-banner.flash-out { animation: flash-out 0.3s ease-in forwards; }
@keyframes flash-in  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flash-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }

/* Drop zone */
.drop-zone { transition: border-color 0.15s ease, background-color 0.15s ease; }
.drop-zone.dragover {
  border-color: var(--color-accent) !important;
  background-color: var(--color-accent-bg) !important;
}

/* Smooth transitions */
.nav-item    { transition: color 0.15s ease, border-color 0.15s ease; }
tbody tr     { transition: background-color 0.1s ease; }

/* Focus ring (consistent across project) */
*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.focus\:ring-2:focus { outline: none; }

/* Subtle scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); }