:root {
  --bp-magenta: #3B82F6;
  --bp-cyan: #06B6D4;
  --bp-success: #10B981;
  --bp-warning: #F59E0B;
  --bp-error: #EF4444;
}

/* Accent (blue) utilities — guaranteed to work regardless of Tailwind CDN scan */
.bg-bp-magenta       { background-color: #3B82F6; }
.text-bp-magenta     { color: #3B82F6; }
.border-bp-magenta   { border-color: #3B82F6; }
.hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.hover\:text-bp-magenta:hover { color: #3B82F6; }
.hover\:border-bp-magenta:hover { border-color: #3B82F6; }
.hover\:text-blue-400:hover { color: #60a5fa; }
.focus\:border-bp-magenta:focus { border-color: #3B82F6; }

.text-bp-error   { color: #EF4444; }
.hover\:text-bp-error:hover { color: #EF4444; }
.hover\:border-bp-error:hover { border-color: #EF4444; }

/* Dark mode surfaces */
.dark .dark\:bg-bp-base    { background-color: #0A0B0F; }
.dark .dark\:bg-bp-surface { background-color: #14161D; }
.dark .dark\:border-bp-border { border-color: #23262F; }
.dark .dark\:text-bp-primary   { color: #F4F4F5; }
.dark .dark\:text-bp-secondary { color: #A1A1AA; }
.dark .dark\:hover\:bg-bp-border:hover { background-color: #23262F; }

/* Light mode surfaces */
.bg-bp-light-base    { background-color: #FAFAF9; }
.bg-bp-light-surface { background-color: #FFFFFF; }
.border-bp-light-border { border-color: #E7E5E4; }
.dark .dark\:border-bp-border { border-color: #23262F; }
.text-bp-light-primary   { color: #18181B; }
.text-bp-light-secondary { color: #52525B; }

/* Secondary text (used without dark: prefix sometimes) */
.text-bp-secondary { color: #A1A1AA; }

/* Body base */
body {
  background-color: #FAFAF9;
  color: #18181B;
}
.dark body,
body.dark,
.dark {
  background-color: #0A0B0F;
  color: #F4F4F5;
}

/* Glow on focus */
.bp-glow:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.35);
}

/* Border radius */
.rounded-card  { border-radius: 12px; }
.rounded-btn   { border-radius: 8px; }
.rounded-modal { border-radius: 16px; }
.rounded-full  { border-radius: 9999px; }

/* Avatar sizing */
.w-20 { width: 5rem; }
.h-20 { height: 5rem; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.shrink-0 { flex-shrink: 0; }

/* Font */
body { font-family: 'Inter', system-ui, sans-serif; }
.font-display { font-family: 'Inter Display', 'Inter', system-ui, sans-serif; }

/* Transitions */
.transition-colors { transition-property: color, background-color, border-color; transition-duration: 150ms; }

/* Accent color for checkboxes */
input[type="checkbox"] { accent-color: #3B82F6; }

/* Dropdown dark mode */
.dark .dark-dd {
  background: #14161D !important;
  border-color: #23262F !important;
}