:root {
  --ui-color-brand-blue: #0273d4;
  --ui-color-brand-dark: #003366;
  --ui-color-brand-red: #e11d48;

  --ui-color-bg: #ffffff;
  --ui-color-surface: #f8fafc;
  --ui-color-border: #e2e8f0;
  --ui-color-text: #0f172a;
  --ui-color-muted: #64748b;

  --ui-color-success-bg: #ecfdf5;
  --ui-color-success-fg: #047857;
  --ui-color-warning-bg: #fffbeb;
  --ui-color-warning-fg: #b45309;
  --ui-color-danger-bg: #fff1f2;
  --ui-color-danger-fg: #be123c;

  --ui-radius-sm: 0.375rem;
  --ui-radius-md: 0.5rem;
  --ui-radius-lg: 0.75rem;
  --ui-radius-xl: 1rem;
  --ui-radius-pill: 9999px;

  --ui-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.08);
  --ui-shadow-topbar: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

  --ui-sidebar-width: 18rem;
  --ui-topbar-height: 4rem;
}