:root {
  --halo-primary: #063849;
  --halo-secondary: #66DB82;
  --halo-accent: #00BF63;
  --halo-text: #4D4D4D;
  --halo-bg-light: #FAFAFA;
  --halo-bg-muted: #F4F4F4;
  --halo-border: #DDE6EB;
  --halo-focus: #00BF63;
  --halo-radius-sm: 8px;
  --halo-radius-md: 12px;
  --halo-radius-lg: 18px;
  --halo-shadow-sm: 0 8px 20px rgba(6, 56, 73, 0.08);
  --halo-shadow-md: 0 14px 32px rgba(6, 56, 73, 0.14);
  --halo-space-1: 8px;
  --halo-space-2: 12px;
  --halo-space-3: 16px;
  --halo-space-4: 24px;
  --halo-space-5: 32px;
}

.halo-focus-ring:focus-visible {
  outline: 3px solid var(--halo-focus);
  outline-offset: 2px;
}

.halo-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--halo-primary);
}

.halo-badge {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
}