:root,
[data-bs-theme="light"] {
  --bs-body-bg: var(--ak-page-bg);
  --bs-body-color: var(--ak-text);
  --bs-body-font-family: var(--ak-font-family);
  --bs-primary: var(--ak-primary);
  --bs-primary-rgb: 63, 114, 175;
  --bs-secondary: var(--ak-secondary-action);
  --bs-secondary-rgb: 219, 226, 239;
  --bs-success: var(--ak-success);
  --bs-success-rgb: 23, 114, 69;
  --bs-info: var(--ak-info);
  --bs-info-rgb: 23, 105, 170;
  --bs-warning: var(--ak-warning);
  --bs-warning-rgb: 138, 90, 0;
  --bs-danger: var(--ak-danger);
  --bs-danger-rgb: 180, 35, 24;
  --bs-border-color: var(--ak-border);
  --bs-secondary-color: var(--ak-text-secondary);
  --bs-link-color: var(--ak-primary);
  --bs-link-hover-color: var(--ak-primary-hover);
  --bs-border-radius: var(--ak-radius-md);
  --bs-border-radius-sm: var(--ak-radius-sm);
  --bs-border-radius-lg: var(--ak-radius-lg);
  --bs-border-radius-xl: var(--ak-radius-xl);
  --bs-box-shadow-sm: var(--ak-shadow-sm);
  --bs-box-shadow: var(--ak-shadow-md);
  --bs-box-shadow-lg: var(--ak-shadow-lg);
  --bs-focus-ring-color: var(--ak-focus-ring);
  color-scheme: light;
}

[data-bs-theme="dark"] {
  --bs-body-bg: var(--ak-page-bg);
  --bs-body-color: var(--ak-text);
  --bs-body-font-family: var(--ak-font-family);
  --bs-primary: var(--ak-primary);
  --bs-primary-rgb: 93, 177, 230;
  --bs-secondary: var(--ak-secondary-action);
  --bs-secondary-rgb: 15, 76, 117;
  --bs-success: var(--ak-success);
  --bs-success-rgb: 88, 202, 145;
  --bs-info: var(--ak-info);
  --bs-info-rgb: 119, 197, 243;
  --bs-warning: var(--ak-warning);
  --bs-warning-rgb: 246, 189, 96;
  --bs-danger: var(--ak-danger);
  --bs-danger-rgb: 255, 141, 133;
  --bs-border-color: var(--ak-border);
  --bs-secondary-color: var(--ak-text-secondary);
  --bs-link-color: var(--ak-primary);
  --bs-link-hover-color: var(--ak-primary-hover);
  --bs-border-radius: var(--ak-radius-md);
  --bs-border-radius-sm: var(--ak-radius-sm);
  --bs-border-radius-lg: var(--ak-radius-lg);
  --bs-border-radius-xl: var(--ak-radius-xl);
  --bs-box-shadow-sm: var(--ak-shadow-sm);
  --bs-box-shadow: var(--ak-shadow-md);
  --bs-box-shadow-lg: var(--ak-shadow-lg);
  --bs-focus-ring-color: var(--ak-focus-ring);
  color-scheme: dark;
}

.btn-primary {
  --bs-btn-bg: var(--ak-primary);
  --bs-btn-border-color: var(--ak-primary);
  --bs-btn-hover-bg: var(--ak-primary-hover);
  --bs-btn-hover-border-color: var(--ak-primary-hover);
  --bs-btn-color: var(--ak-on-primary);
  --bs-btn-disabled-bg: var(--ak-disabled);
  --bs-btn-disabled-border-color: var(--ak-disabled);
}

.btn-outline-primary {
  --bs-btn-color: var(--ak-primary);
  --bs-btn-border-color: var(--ak-primary);
  --bs-btn-hover-bg: var(--ak-primary-soft);
  --bs-btn-hover-border-color: var(--ak-primary);
  --bs-btn-hover-color: var(--ak-primary-text);
}

.form-control,
.form-select {
  min-height: var(--ak-control-height-md);
  background-color: var(--ak-surface);
  border-color: var(--ak-input-border);
  color: var(--ak-text);
  border-radius: var(--ak-radius-md);
  transition: border-color var(--ak-duration-fast) var(--ak-ease-standard),
    box-shadow var(--ak-duration-fast) var(--ak-ease-standard);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ak-focus);
  box-shadow: 0 0 0 .25rem var(--ak-focus-ring);
}

.form-control:disabled,
.form-select:disabled {
  background-color: var(--ak-disabled);
  color: var(--ak-text-muted);
}

.card {
  --bs-card-bg: var(--ak-surface);
  --bs-card-border-color: var(--ak-border);
  border-radius: var(--ak-radius-2xl);
  box-shadow: var(--ak-shadow-sm);
}

.text-secondary {
  color: var(--ak-text-secondary) !important;
}

.text-muted {
  color: var(--ak-text-muted) !important;
}

.alert-success {
  --bs-alert-color: var(--ak-success-text);
  --bs-alert-bg: var(--ak-success-soft);
  --bs-alert-border-color: var(--ak-success);
}

.alert-warning {
  --bs-alert-color: var(--ak-warning-text);
  --bs-alert-bg: var(--ak-warning-soft);
  --bs-alert-border-color: var(--ak-warning-border);
}

.alert-danger {
  --bs-alert-color: var(--ak-danger-text);
  --bs-alert-bg: var(--ak-danger-soft);
  --bs-alert-border-color: var(--ak-danger-border);
}

.alert-info {
  --bs-alert-color: var(--ak-info);
  --bs-alert-bg: var(--ak-info-soft);
  --bs-alert-border-color: var(--ak-info);
}

.badge.text-bg-primary {
  background-color: var(--ak-primary) !important;
  color: var(--ak-on-primary) !important;
}

.badge.text-bg-success {
  background-color: var(--ak-success) !important;
}

.badge.text-bg-warning {
  background-color: var(--ak-warning) !important;
}

.badge.text-bg-danger {
  background-color: var(--ak-danger) !important;
}

.badge.text-bg-info {
  background-color: var(--ak-info) !important;
}

.table {
  --bs-table-bg: var(--ak-surface);
  --bs-table-color: var(--ak-text);
  --bs-table-border-color: var(--ak-border);
  --bs-table-striped-bg: var(--ak-surface-secondary);
  --bs-table-hover-bg: var(--ak-selected);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--ak-surface-elevated);
  --bs-dropdown-border-color: var(--ak-border);
  --bs-dropdown-link-color: var(--ak-text);
  --bs-dropdown-link-hover-bg: var(--ak-selected);
  --bs-dropdown-link-hover-color: var(--ak-text);
  border-radius: var(--ak-radius-lg);
  box-shadow: var(--ak-shadow-md);
}

.modal-content {
  background-color: var(--ak-surface-elevated);
  border-color: var(--ak-border);
  border-radius: var(--ak-radius-xl);
  box-shadow: var(--ak-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  .form-control,
  .form-select {
    transition: none;
  }
}