:root{
  --brand-50: #e5f2ff;
  --brand-100: #cce5ff;
  --brand-200: #99ccff;
  --brand-300: #66b2ff;
  --brand-400: #3399ff;
  --brand-500: #0080ff;
  --brand-600: #0073e5;
  --brand-700: #0066cc;
  --brand-800: #0059b2;
  --brand-900: #00468c;

  --brand-primary: var(--brand-500);
  --brand-primary-hover: var(--brand-600);
  --brand-primary-contrast: #ffffff;

  --brand-surface: #ffffff;
  --brand-surface-muted: #f5f7fb;
  --brand-text: #0f172a;
  --brand-text-muted: #475569;
}
.text-brand { color: var(--brand-primary); }
.text-brand-muted { color: var(--brand-text-muted); }
.bg-brand { background-color: var(--brand-primary); }
.bg-brand-50 { background-color: var(--brand-50); }
.bg-surface { background-color: var(--brand-surface); }
.border-brand { border-color: var(--brand-primary); }
.hover\:bg-brand:hover { background-color: var(--brand-primary-hover); }
.hover\:text-brand:hover { color: var(--brand-primary); }
.btn-brand { background-color: var(--brand-primary); color: var(--brand-primary-contrast); transition: background-color .2s ease; }
.btn-brand:hover { background-color: var(--brand-primary-hover); }
.link-brand { color: var(--brand-primary); }
.link-brand:hover { color: var(--brand-700); }
.badge-brand { background-color: var(--brand-100); color: var(--brand-700); }
.card { background-color: var(--brand-surface); border: 1px solid #e5e7eb; border-radius: 1rem; padding: 1.25rem; }
.focus-ring { outline: 2px solid var(--brand-300); outline-offset: 2px; }