:root {
  --brand-primary: #667eea;
  --brand-secondary: #764ba2;
  --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --brand-primary-05: rgba(102, 126, 234, 0.05);
  --brand-primary-06: rgba(102, 126, 234, 0.06);
  --brand-primary-08: rgba(102, 126, 234, 0.08);
  --brand-primary-10: rgba(102, 126, 234, 0.1);
  --brand-primary-12: rgba(102, 126, 234, 0.12);
  --brand-primary-15: rgba(102, 126, 234, 0.15);
  --brand-primary-20: rgba(102, 126, 234, 0.2);
  --brand-primary-30: rgba(102, 126, 234, 0.3);
  --brand-calendar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");

  /* Shared semantic UI tokens. BrandTheme remains the only color applicator. */
  --ui-page-surface: #f5f6fa;
  --ui-panel-surface: #ffffff;
  --ui-panel-muted: #f8f9fc;
  --ui-text: #273042;
  --ui-text-muted: #697386;
  --ui-border: #e3e6ed;
  --ui-border-strong: #cdd2de;
  --ui-focus-ring: 0 0 0 3px var(--brand-primary-12);
  --ui-radius-sm: 7px;
  --ui-radius-md: 10px;
  --ui-radius-lg: 12px;
  --ui-shadow-sm: 0 1px 2px rgba(28, 35, 52, 0.04), 0 8px 24px rgba(28, 35, 52, 0.07);
  --ui-shadow-lg: 0 18px 60px rgba(25, 31, 45, 0.22);
  --ui-space-1: 0.25rem;
  --ui-space-2: 0.5rem;
  --ui-space-3: 0.75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;

  /* Compatibility aliases for existing registration/admin styles. */
  --primary-color-1: var(--brand-primary);
  --primary-color-2: var(--brand-secondary);
}

.brand-primary-action {
  background: var(--brand-gradient);
  color: white;
}