:root {
  /* Override Bootstrap CSS Variables with Design System Tokens */
  --bs-primary: var(--pd-color-primary-900);
  --bs-primary-rgb: 11, 31, 58; /* #0b1f3a */
  --bs-secondary: var(--pd-color-neutral-200);
  --bs-success: var(--pd-color-success);
  --bs-info: var(--pd-color-info);
  --bs-warning: var(--pd-color-warning);
  --bs-danger: var(--pd-color-error);
  --bs-light: var(--pd-color-neutral-50);
  --bs-dark: var(--pd-color-neutral-900);
  
  --bs-body-font-family: var(--pd-font-family-base);
  --bs-body-color: var(--pd-text-base);
  --bs-body-bg: var(--pd-bg-base);
  
  --bs-link-color: var(--pd-color-info);
  --bs-link-hover-color: var(--pd-color-primary-600);
  
  --bs-border-color: var(--pd-border-base);
  
  --bs-font-sans-serif: var(--pd-font-family-base);
  --bs-font-monospace: var(--pd-font-family-mono);
}

/* Customizations for Bootstrap components using our tokens */
.btn-primary {
  --bs-btn-bg: var(--pd-color-primary-900);
  --bs-btn-border-color: var(--pd-color-primary-900);
  --bs-btn-hover-bg: var(--pd-color-primary-800);
  --bs-btn-hover-border-color: var(--pd-color-primary-800);
  --bs-btn-active-bg: var(--pd-color-primary-950);
  --bs-btn-active-border-color: var(--pd-color-primary-950);
  --bs-btn-color: var(--pd-text-inverse);
  --bs-btn-hover-color: var(--pd-text-inverse);
}

.btn-secondary {
  --bs-btn-bg: var(--pd-bg-surface);
  --bs-btn-border-color: var(--pd-border-base);
  --bs-btn-color: var(--pd-text-base);
  --bs-btn-hover-bg: var(--pd-bg-subtle);
  --bs-btn-hover-color: var(--pd-text-base);
  --bs-btn-hover-border-color: var(--pd-border-hover);
  box-shadow: var(--pd-shadow-sm);
}

.text-primary {
  color: var(--pd-color-primary-900) !important;
}

.bg-light {
  background-color: var(--pd-bg-subtle) !important;
}