:root {
  --brand-primary: #2563eb;
  --brand-secondary: #1e293b;
  --brand-accent: #60a5fa;
  --brand-background: #f1f5f9;
  --primary: var(--brand-primary);
  --primary-hover: color-mix(in srgb, var(--brand-primary) 82%, black);
  --sidebar-bg: var(--brand-secondary);
  --sidebar-active: var(--brand-primary);
  --content-bg: var(--brand-background);
}

body { background-color: var(--brand-background) !important; }
.bg-blue-600 { background-color: var(--brand-primary) !important; }
.bg-blue-500 { background-color: color-mix(in srgb, var(--brand-primary) 86%, white) !important; }
.bg-blue-50 { background-color: color-mix(in srgb, var(--brand-primary) 7%, white) !important; }
.bg-blue-100 { background-color: color-mix(in srgb, var(--brand-primary) 14%, white) !important; }
.bg-blue-200 { background-color: color-mix(in srgb, var(--brand-primary) 24%, white) !important; }
.text-blue-800, .text-blue-700, .text-blue-600, .text-blue-500 { color: var(--brand-primary) !important; }
.text-blue-400 { color: color-mix(in srgb, var(--brand-primary) 68%, white) !important; }
.text-blue-100 { color: color-mix(in srgb, var(--brand-primary) 18%, white) !important; }
.border-blue-600, .border-blue-500 { border-color: var(--brand-primary) !important; }
.border-blue-300 { border-color: color-mix(in srgb, var(--brand-primary) 38%, white) !important; }
.border-blue-200, .border-blue-100 { border-color: color-mix(in srgb, var(--brand-primary) 22%, white) !important; }
.focus\:ring-blue-500:focus { --tw-ring-color: var(--brand-accent) !important; }
.focus\:ring-blue-100:focus { --tw-ring-color: color-mix(in srgb, var(--brand-accent) 28%, white) !important; }
.focus\:border-blue-500:focus { border-color: var(--brand-primary) !important; }
.hover\:bg-blue-700:hover { background-color: color-mix(in srgb, var(--brand-primary) 82%, black) !important; }
.hover\:bg-blue-600:hover { background-color: var(--brand-primary) !important; }
.hover\:bg-blue-500:hover { background-color: color-mix(in srgb, var(--brand-primary) 86%, white) !important; }
.hover\:bg-blue-50:hover { background-color: color-mix(in srgb, var(--brand-primary) 7%, white) !important; }
.hover\:bg-blue-200:hover { background-color: color-mix(in srgb, var(--brand-primary) 24%, white) !important; }
.hover\:text-blue-700:hover, .hover\:text-blue-600:hover { color: color-mix(in srgb, var(--brand-primary) 82%, black) !important; }
.badge-blue { background: color-mix(in srgb, var(--brand-primary) 14%, white) !important; color: var(--brand-primary) !important; }
.portal-nav-link.active { background: color-mix(in srgb, var(--brand-primary) 9%, white) !important; color: var(--brand-primary) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-primary); }