:root,
[data-bs-theme=light] {
  --hl-surface-page: #F3F6F9;
  --hl-surface: #FFFFFF;
  --hl-surface-2: #FFFFFF;
  --hl-surface-3: #F8FAFC;
  --hl-surface-inset: #EDEDED;
  --hl-surface-hover: #F1F5F9;
  --hl-text: #444444;
  --hl-text-strong: #202429;
  --hl-text-muted: #6C757D;
  --hl-text-faint: #888888;
  --hl-text-caption: #555555;
  --hl-text-quiet: #BBBBBB;
  --hl-link: #666666;
  --hl-link-accent: #32B1F9;
  --hl-link-accent-hover: #32B1F9;
  --hl-border: #DEE2E6;
  --hl-border-subtle: #E9ECEF;
  --hl-border-strong: #CED4DA;
  --hl-divider: #F1F3F5;
  --hl-accent: #4F46E5;
  --hl-accent-hover: #4338CA;
  --hl-accent-active: #3730A3;
  --hl-accent-subtle: #EEF2FF;
  --hl-on-accent: #F0F0F0;
  --hl-fg-primary: #4F46E5;
  --hl-fg-secondary: #64748B;
  --hl-fg-success: #10B981;
  --hl-fg-info: #06B6D4;
  --hl-fg-warning: #F59E0B;
  --hl-fg-danger: #EF4444;
  --hl-bg-primary: #4F46E5;
  --hl-bg-secondary: #64748B;
  --hl-bg-success: #10B981;
  --hl-bg-info: #06B6D4;
  --hl-bg-warning: #F59E0B;
  --hl-bg-danger: #EF4444;
  --hl-alert-primary-fg: #3730A3;
  --hl-alert-primary-bg: #EEF2FF;
  --hl-alert-primary-bd: #C7D2FE;
  --hl-alert-secondary-fg: #334155;
  --hl-alert-secondary-bg: #F1F5F9;
  --hl-alert-secondary-bd: #CBD5E1;
  --hl-alert-success-fg: #065F46;
  --hl-alert-success-bg: #D1FAE5;
  --hl-alert-success-bd: #A7F3D0;
  --hl-alert-info-fg: #155E75;
  --hl-alert-info-bg: #CFFAFE;
  --hl-alert-info-bd: #A5F3FC;
  --hl-alert-warning-fg: #92400E;
  --hl-alert-warning-bg: #FEF3C7;
  --hl-alert-warning-bd: #FDE68A;
  --hl-alert-danger-fg: #991B1B;
  --hl-alert-danger-bg: #FEE2E2;
  --hl-alert-danger-bd: #FECACA;
  --hl-util-light: #F8FAFC;
  --hl-util-dark: #0F172A;
  --hl-inverse-1: #2B2B2B;
  --hl-inverse-2: #464646;
  --hl-inverse-3: #393939;
  --hl-inverse-4: #1F1F1F;
  --hl-inverse-text: #F0F0F0;
  --hl-inverse-text-muted: #D3D3D3;
  --hl-inverse-text-faint: #A9A9A9;
  --hl-inverse-text-dim: #94A3B8;
  --hl-inverse-active: #0D6EFD;
  --hl-rank-top: #D85D4E;
  --hl-rank-normal: #ADB5BD;
  --hl-pill-hover: #667EEA;
  --hl-pill-hover-bg: rgba(102, 126, 234, 0.05);
  --hl-code-inline-bg: #282C34;
  --hl-code-inline-fg: #F6B2B8;
  --hl-quote-accent: #78C0A8;
  --hl-shadow: rgba(0, 0, 0, 0.08);
  --hl-shadow-sm: rgba(0, 0, 0, 0.04);
  --hl-on-solid: #FFFFFF;
  --hl-util-light-fixed: #F8FAFC;
  --hl-util-dark-fixed: #0F172A;
  --hl-secondary-hover: #475569;
  --hl-secondary-active: #334155;
  --hl-success-hover: #059669;
  --hl-success-active: #047857;
  --hl-info-hover: #0891B2;
  --hl-info-active: #0E7490;
  --hl-warning-hover: #D97706;
  --hl-warning-active: #B45309;
  --hl-danger-hover: #DC2626;
  --hl-danger-active: #B91C1C;
  --hl-light-hover: #E2E8F0;
  --hl-light-active: #CBD5E1;
  --hl-dark-hover: #1E293B;
  --hl-dark-active: #334155;
  --bs-primary: #4F46E5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-secondary: #64748B;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-success: #10B981;
  --bs-success-rgb: 16, 185, 129;
  --bs-info: #06B6D4;
  --bs-info-rgb: 6, 182, 212;
  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: #EF4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-light: var(--hl-util-light);
  --bs-light-rgb: 248, 250, 252;
  --bs-dark: var(--hl-util-dark);
  --bs-dark-rgb: 15, 23, 42;
  --bs-link-color: var(--hl-accent);
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: var(--hl-accent-hover);
  --bs-link-hover-color-rgb: 67, 56, 202;
  --bs-focus-ring-color: rgba(79, 70, 229, .25);
}

[data-bs-theme=dark] {
  --hl-surface-page: #424242;
  --hl-surface: #393939;
  --hl-surface-2: #454545;
  --hl-surface-3: #474747;
  --hl-surface-inset: #2F2F2F;
  --hl-surface-hover: #525252;
  --hl-text: #D3D3D3;
  --hl-text-strong: #F0F0F0;
  --hl-text-muted: #B8B8B8;
  --hl-text-faint: #B2B2B2;
  --hl-text-caption: #B8B8B8;
  --hl-text-quiet: #8E8E8E;
  --hl-link: #D3D3D3;
  --hl-link-accent: #5CC0FA;
  --hl-link-accent-hover: #8CD3FC;
  --hl-border: #676767;
  --hl-border-subtle: #4F4F4F;
  --hl-border-strong: #949494;
  --hl-divider: #4A4A4A;
  --hl-accent: #818CF8;
  --hl-accent-hover: #A5B4FC;
  --hl-accent-active: #6366F1;
  --hl-accent-subtle: #2F3350;
  --hl-on-accent: #0F172A;
  --hl-fg-primary: #A5B4FC;
  --hl-fg-secondary: #A7B2C0;
  --hl-fg-success: #34D399;
  --hl-fg-info: #38D9EE;
  --hl-fg-warning: #FBBF24;
  --hl-fg-danger: #FCA5A5;
  --hl-bg-primary: #4F46E5;
  --hl-bg-secondary: #64748B;
  --hl-bg-success: #10B981;
  --hl-bg-info: #06B6D4;
  --hl-bg-warning: #F59E0B;
  --hl-bg-danger: #EF4444;
  --hl-alert-primary-fg: #C7D2FE;
  --hl-alert-primary-bg: #2E3154;
  --hl-alert-primary-bd: #4A4E86;
  --hl-alert-secondary-fg: #CBD5E1;
  --hl-alert-secondary-bg: #3C4149;
  --hl-alert-secondary-bd: #5A6270;
  --hl-alert-success-fg: #A7F3D0;
  --hl-alert-success-bg: #17392F;
  --hl-alert-success-bd: #2F6B57;
  --hl-alert-info-fg: #A5F3FC;
  --hl-alert-info-bg: #163B44;
  --hl-alert-info-bd: #2C6A78;
  --hl-alert-warning-fg: #FDE68A;
  --hl-alert-warning-bg: #43351A;
  --hl-alert-warning-bd: #806329;
  --hl-alert-danger-fg: #FECACA;
  --hl-alert-danger-bg: #45262A;
  --hl-alert-danger-bd: #7E4045;
  --hl-util-light: #474747;
  --hl-util-dark: #E5E5E5;
  --hl-inverse-1: #2B2B2B;
  --hl-inverse-2: #464646;
  --hl-inverse-3: #393939;
  --hl-inverse-4: #1F1F1F;
  --hl-inverse-text: #F0F0F0;
  --hl-inverse-text-muted: #D3D3D3;
  --hl-inverse-text-faint: #A9A9A9;
  --hl-inverse-text-dim: #94A3B8;
  --hl-inverse-active: #0D6EFD;
  --hl-rank-top: #F2A091;
  --hl-rank-normal: #ADB5BD;
  --hl-pill-hover: #A5B4FC;
  --hl-pill-hover-bg: rgba(129, 140, 248, 0.14);
  --hl-code-inline-bg: #282C34;
  --hl-code-inline-fg: #F6B2B8;
  --hl-quote-accent: #78C0A8;
  --hl-shadow: rgba(0, 0, 0, 0.45);
  --hl-shadow-sm: rgba(0, 0, 0, 0.3);
  --hl-on-solid: #FFFFFF;
  --hl-util-light-fixed: #F8FAFC;
  --hl-util-dark-fixed: #0F172A;
  --hl-secondary-hover: #475569;
  --hl-secondary-active: #334155;
  --hl-success-hover: #059669;
  --hl-success-active: #047857;
  --hl-info-hover: #0891B2;
  --hl-info-active: #0E7490;
  --hl-warning-hover: #D97706;
  --hl-warning-active: #B45309;
  --hl-danger-hover: #DC2626;
  --hl-danger-active: #B91C1C;
  --hl-light-hover: #E2E8F0;
  --hl-light-active: #CBD5E1;
  --hl-dark-hover: #1E293B;
  --hl-dark-active: #334155;
  --bs-primary: #4F46E5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-secondary: #64748B;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-success: #10B981;
  --bs-success-rgb: 16, 185, 129;
  --bs-info: #06B6D4;
  --bs-info-rgb: 6, 182, 212;
  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: #EF4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-light: var(--hl-util-light);
  --bs-light-rgb: 71, 71, 71;
  --bs-dark: var(--hl-util-dark);
  --bs-dark-rgb: 229, 229, 229;
  --bs-body-bg: var(--hl-surface-page);
  --bs-body-bg-rgb: 66, 66, 66;
  --bs-body-color: var(--hl-text);
  --bs-body-color-rgb: 211, 211, 211;
  --bs-secondary-bg: var(--hl-surface-2);
  --bs-secondary-bg-rgb: 69, 69, 69;
  --bs-secondary-color: var(--hl-text-muted);
  --bs-secondary-color-rgb: 184, 184, 184;
  --bs-tertiary-bg: var(--hl-surface-3);
  --bs-tertiary-bg-rgb: 71, 71, 71;
  --bs-heading-color: var(--hl-text-strong);
  --bs-emphasis-color: var(--hl-text-strong);
  --bs-emphasis-color-rgb: 240, 240, 240;
  --bs-border-color: var(--hl-border);
  --bs-border-color-translucent: rgba(255, 255, 255, .18);
  --bs-link-color: var(--hl-link-accent);
  --bs-link-color-rgb: 92, 192, 250;
  --bs-link-hover-color: var(--hl-link-accent-hover);
  --bs-link-hover-color-rgb: 140, 211, 252;
  --bs-focus-ring-color: rgba(129, 140, 248, .35);
}

[data-bs-theme=dark] header,
[data-bs-theme=dark] footer,
[data-bs-theme=dark] .offcanvas {
  --bs-light: #F8FAFC;
  --bs-light-rgb: 248, 250, 252;
  --bs-dark: #0F172A;
  --bs-dark-rgb: 15, 23, 42;
}
[data-bs-theme=dark] .bg-warning,
[data-bs-theme=dark] .bg-success,
[data-bs-theme=dark] .bg-info,
[data-bs-theme=dark] .bg-danger,
[data-bs-theme=dark] .bg-white,
[data-bs-theme=dark] .text-bg-dark {
  --bs-dark: #0F172A;
  --bs-dark-rgb: 15, 23, 42;
}
[data-bs-theme=dark] #navigationOffcanvas:not(.text-bg-dark) {
  --bs-light: var(--hl-util-light);
  --bs-light-rgb: 71, 71, 71;
  --bs-dark: var(--hl-util-dark);
  --bs-dark-rgb: 229, 229, 229;
}
[data-bs-theme=dark] [style*="#f8f9fa"] {
  --bs-dark: #0F172A;
  --bs-dark-rgb: 15, 23, 42;
}

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

.btn-secondary {
  --bs-btn-bg: var(--hl-bg-secondary);
  --bs-btn-border-color: var(--hl-bg-secondary);
  --bs-btn-hover-bg: var(--hl-secondary-hover);
  --bs-btn-hover-border-color: var(--hl-secondary-hover);
  --bs-btn-active-bg: var(--hl-secondary-active);
  --bs-btn-active-border-color: var(--hl-secondary-active);
  --bs-btn-disabled-bg: var(--hl-bg-secondary);
  --bs-btn-disabled-border-color: var(--hl-bg-secondary);
}

.btn-success {
  --bs-btn-bg: var(--hl-bg-success);
  --bs-btn-border-color: var(--hl-bg-success);
  --bs-btn-hover-bg: var(--hl-success-hover);
  --bs-btn-hover-border-color: var(--hl-success-hover);
  --bs-btn-active-bg: var(--hl-success-active);
  --bs-btn-active-border-color: var(--hl-success-active);
  --bs-btn-disabled-bg: var(--hl-bg-success);
  --bs-btn-disabled-border-color: var(--hl-bg-success);
}

.btn-info {
  --bs-btn-color: var(--hl-on-solid);
  --bs-btn-bg: var(--hl-bg-info);
  --bs-btn-border-color: var(--hl-bg-info);
  --bs-btn-hover-color: var(--hl-on-solid);
  --bs-btn-hover-bg: var(--hl-info-hover);
  --bs-btn-hover-border-color: var(--hl-info-hover);
  --bs-btn-active-color: var(--hl-on-solid);
  --bs-btn-active-bg: var(--hl-info-active);
  --bs-btn-active-border-color: var(--hl-info-active);
  --bs-btn-disabled-color: var(--hl-on-solid);
  --bs-btn-disabled-bg: var(--hl-bg-info);
  --bs-btn-disabled-border-color: var(--hl-bg-info);
}

.btn-warning {
  --bs-btn-color: var(--hl-on-solid);
  --bs-btn-bg: var(--hl-bg-warning);
  --bs-btn-border-color: var(--hl-bg-warning);
  --bs-btn-hover-color: var(--hl-on-solid);
  --bs-btn-hover-bg: var(--hl-warning-hover);
  --bs-btn-hover-border-color: var(--hl-warning-hover);
  --bs-btn-active-color: var(--hl-on-solid);
  --bs-btn-active-bg: var(--hl-warning-active);
  --bs-btn-active-border-color: var(--hl-warning-active);
  --bs-btn-disabled-color: var(--hl-on-solid);
  --bs-btn-disabled-bg: var(--hl-bg-warning);
  --bs-btn-disabled-border-color: var(--hl-bg-warning);
}

.btn-danger {
  --bs-btn-bg: var(--hl-bg-danger);
  --bs-btn-border-color: var(--hl-bg-danger);
  --bs-btn-hover-bg: var(--hl-danger-hover);
  --bs-btn-hover-border-color: var(--hl-danger-hover);
  --bs-btn-active-bg: var(--hl-danger-active);
  --bs-btn-active-border-color: var(--hl-danger-active);
  --bs-btn-disabled-bg: var(--hl-bg-danger);
  --bs-btn-disabled-border-color: var(--hl-bg-danger);
}

.btn-light {
  --bs-btn-bg: var(--hl-util-light-fixed);
  --bs-btn-border-color: var(--hl-util-light-fixed);
  --bs-btn-hover-bg: var(--hl-light-hover);
  --bs-btn-hover-border-color: var(--hl-light-hover);
  --bs-btn-active-bg: var(--hl-light-active);
  --bs-btn-active-border-color: var(--hl-light-active);
}

.btn-dark {
  --bs-btn-bg: var(--hl-util-dark-fixed);
  --bs-btn-border-color: var(--hl-util-dark-fixed);
  --bs-btn-hover-bg: var(--hl-dark-hover);
  --bs-btn-hover-border-color: var(--hl-dark-hover);
  --bs-btn-active-bg: var(--hl-secondary-active);
  --bs-btn-active-border-color: var(--hl-secondary-active);
}

.btn-outline-primary {
  --bs-btn-color: var(--hl-fg-primary);
  --bs-btn-border-color: var(--hl-fg-primary);
  --bs-btn-hover-color: var(--hl-on-accent);
  --bs-btn-hover-bg: var(--hl-accent);
  --bs-btn-hover-border-color: var(--hl-accent);
  --bs-btn-active-color: var(--hl-on-accent);
  --bs-btn-active-bg: var(--hl-accent-active);
  --bs-btn-active-border-color: var(--hl-accent-active);
}

.btn-outline-secondary {
  --bs-btn-color: var(--hl-fg-secondary);
  --bs-btn-border-color: var(--hl-fg-secondary);
  --bs-btn-hover-bg: var(--hl-bg-secondary);
  --bs-btn-hover-border-color: var(--hl-bg-secondary);
  --bs-btn-active-bg: var(--hl-secondary-hover);
  --bs-btn-active-border-color: var(--hl-secondary-hover);
}

.btn-outline-success {
  --bs-btn-color: var(--hl-fg-success);
  --bs-btn-border-color: var(--hl-fg-success);
  --bs-btn-hover-bg: var(--hl-bg-success);
  --bs-btn-hover-border-color: var(--hl-bg-success);
  --bs-btn-active-bg: var(--hl-success-hover);
  --bs-btn-active-border-color: var(--hl-success-hover);
}

.btn-outline-info {
  --bs-btn-color: var(--hl-fg-info);
  --bs-btn-border-color: var(--hl-fg-info);
  --bs-btn-hover-bg: var(--hl-bg-info);
  --bs-btn-hover-border-color: var(--hl-bg-info);
  --bs-btn-active-bg: var(--hl-info-hover);
  --bs-btn-active-border-color: var(--hl-info-hover);
}

.btn-outline-warning {
  --bs-btn-color: var(--hl-fg-warning);
  --bs-btn-border-color: var(--hl-fg-warning);
  --bs-btn-hover-bg: var(--hl-bg-warning);
  --bs-btn-hover-border-color: var(--hl-bg-warning);
  --bs-btn-active-bg: var(--hl-warning-hover);
  --bs-btn-active-border-color: var(--hl-warning-hover);
}

.btn-outline-danger {
  --bs-btn-color: var(--hl-fg-danger);
  --bs-btn-border-color: var(--hl-fg-danger);
  --bs-btn-hover-bg: var(--hl-bg-danger);
  --bs-btn-hover-border-color: var(--hl-bg-danger);
  --bs-btn-active-bg: var(--hl-danger-hover);
  --bs-btn-active-border-color: var(--hl-danger-hover);
}

.btn-outline-light {
  --bs-btn-color: var(--hl-util-light-fixed);
  --bs-btn-border-color: var(--hl-util-light-fixed);
  --bs-btn-hover-color: var(--hl-util-dark-fixed);
  --bs-btn-hover-bg: var(--hl-util-light-fixed);
  --bs-btn-hover-border-color: var(--hl-util-light-fixed);
}

.btn-outline-dark {
  --bs-btn-color: var(--hl-util-dark);
  --bs-btn-border-color: var(--hl-util-dark);
  --bs-btn-hover-bg: var(--hl-util-dark);
  --bs-btn-hover-border-color: var(--hl-util-dark);
}

.bg-primary, .text-bg-primary {
  background-color: var(--hl-bg-primary) !important;
}

.bg-secondary, .text-bg-secondary {
  background-color: var(--hl-bg-secondary) !important;
}

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

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

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

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

.text-primary {
  color: var(--hl-fg-primary) !important;
}

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

.text-success {
  color: var(--hl-fg-success) !important;
}

.text-info {
  color: var(--hl-fg-info) !important;
}

.text-warning {
  color: var(--hl-fg-warning) !important;
}

.text-danger {
  color: var(--hl-fg-danger) !important;
}

.border-primary {
  border-color: var(--hl-fg-primary) !important;
}

.border-secondary {
  border-color: var(--hl-fg-secondary) !important;
}

.border-success {
  border-color: var(--hl-fg-success) !important;
}

.border-info {
  border-color: var(--hl-fg-info) !important;
}

.border-warning {
  border-color: var(--hl-fg-warning) !important;
}

.border-danger {
  border-color: var(--hl-fg-danger) !important;
}

.link-primary {
  color: var(--hl-fg-primary) !important;
}

.link-primary:hover, .link-primary:focus {
  color: var(--hl-accent-hover) !important;
}

.link-secondary {
  color: var(--hl-fg-secondary) !important;
}

.link-secondary:hover, .link-secondary:focus {
  color: var(--hl-secondary-hover) !important;
}

.link-success {
  color: var(--hl-fg-success) !important;
}

.link-success:hover, .link-success:focus {
  color: var(--hl-success-hover) !important;
}

.link-info {
  color: var(--hl-fg-info) !important;
}

.link-info:hover, .link-info:focus {
  color: var(--hl-info-hover) !important;
}

.link-warning {
  color: var(--hl-fg-warning) !important;
}

.link-warning:hover, .link-warning:focus {
  color: var(--hl-warning-hover) !important;
}

.link-danger {
  color: var(--hl-fg-danger) !important;
}

.link-danger:hover, .link-danger:focus {
  color: var(--hl-danger-hover) !important;
}

.link-body-emphasis {
  color: var(--hl-text-strong) !important;
}

.link-body-emphasis:hover,
.link-body-emphasis:focus {
  color: var(--hl-link-accent) !important;
}

.alert-primary {
  --bs-alert-color: var(--hl-alert-primary-fg);
  --bs-alert-bg: var(--hl-alert-primary-bg);
  --bs-alert-border-color: var(--hl-alert-primary-bd);
  --bs-alert-link-color: var(--hl-alert-primary-fg);
}

.alert-secondary {
  --bs-alert-color: var(--hl-alert-secondary-fg);
  --bs-alert-bg: var(--hl-alert-secondary-bg);
  --bs-alert-border-color: var(--hl-alert-secondary-bd);
  --bs-alert-link-color: var(--hl-alert-secondary-fg);
}

.alert-success {
  --bs-alert-color: var(--hl-alert-success-fg);
  --bs-alert-bg: var(--hl-alert-success-bg);
  --bs-alert-border-color: var(--hl-alert-success-bd);
  --bs-alert-link-color: var(--hl-alert-success-fg);
}

.alert-info {
  --bs-alert-color: var(--hl-alert-info-fg);
  --bs-alert-bg: var(--hl-alert-info-bg);
  --bs-alert-border-color: var(--hl-alert-info-bd);
  --bs-alert-link-color: var(--hl-alert-info-fg);
}

.alert-warning {
  --bs-alert-color: var(--hl-alert-warning-fg);
  --bs-alert-bg: var(--hl-alert-warning-bg);
  --bs-alert-border-color: var(--hl-alert-warning-bd);
  --bs-alert-link-color: var(--hl-alert-warning-fg);
}

.alert-danger {
  --bs-alert-color: var(--hl-alert-danger-fg);
  --bs-alert-bg: var(--hl-alert-danger-bg);
  --bs-alert-border-color: var(--hl-alert-danger-bd);
  --bs-alert-link-color: var(--hl-alert-danger-fg);
}

.progress-bar {
  background-color: var(--hl-accent);
}

.bg-primary.progress-bar {
  background-color: var(--hl-bg-primary) !important;
}

.bg-secondary.progress-bar {
  background-color: var(--hl-bg-secondary) !important;
}

.bg-success.progress-bar {
  background-color: var(--hl-bg-success) !important;
}

.bg-info.progress-bar {
  background-color: var(--hl-bg-info) !important;
}

.bg-warning.progress-bar {
  background-color: var(--hl-bg-warning) !important;
}

.bg-danger.progress-bar {
  background-color: var(--hl-bg-danger) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--hl-accent);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:checked {
  background-color: var(--hl-accent);
  border-color: var(--hl-accent);
}

[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select,
[data-bs-theme=dark] .form-check-input,
[data-bs-theme=dark] .input-group-text {
  border-color: var(--hl-border-strong);
}

.spinner-border.text-primary, .spinner-grow.text-primary {
  color: var(--hl-fg-primary) !important;
}

.spinner-border.text-secondary, .spinner-grow.text-secondary {
  color: var(--hl-fg-secondary) !important;
}

.spinner-border.text-success, .spinner-grow.text-success {
  color: var(--hl-fg-success) !important;
}

.spinner-border.text-info, .spinner-grow.text-info {
  color: var(--hl-fg-info) !important;
}

.spinner-border.text-warning, .spinner-grow.text-warning {
  color: var(--hl-fg-warning) !important;
}

.spinner-border.text-danger, .spinner-grow.text-danger {
  color: var(--hl-fg-danger) !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--hl-accent);
  color: var(--hl-on-accent);
}

.nav-tabs .nav-link.active {
  color: var(--hl-fg-primary);
}

.page-link {
  color: var(--hl-fg-primary);
}

.page-link:hover {
  color: var(--hl-accent-hover);
}

.page-item.active .page-link {
  background-color: var(--hl-accent);
  border-color: var(--hl-accent);
  color: var(--hl-on-accent);
}

[data-bs-theme=dark] .pagination {
  --bs-pagination-color: var(--hl-text);
  --bs-pagination-bg: var(--hl-surface-2);
  --bs-pagination-border-color: var(--hl-border);
  --bs-pagination-hover-color: var(--hl-link-accent);
  --bs-pagination-hover-bg: var(--hl-surface-hover);
  --bs-pagination-hover-border-color: var(--hl-border);
  --bs-pagination-focus-color: var(--hl-link-accent);
  --bs-pagination-focus-bg: var(--hl-surface-hover);
  --bs-pagination-active-color: var(--hl-on-accent);
  --bs-pagination-active-bg: var(--hl-accent);
  --bs-pagination-active-border-color: var(--hl-accent);
  --bs-pagination-disabled-color: var(--hl-text-faint);
  --bs-pagination-disabled-bg: var(--hl-surface);
  --bs-pagination-disabled-border-color: var(--hl-border-subtle);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--hl-accent);
  color: var(--hl-on-accent);
}

.list-group-item.active {
  background-color: var(--hl-accent);
  border-color: var(--hl-accent);
  color: var(--hl-on-accent);
}

[data-bs-theme=dark] .card {
  --bs-card-bg: var(--hl-surface-2);
  --bs-card-cap-bg: var(--hl-surface-3);
  --bs-card-border-color: var(--hl-border);
  --bs-card-color: var(--hl-text);
}
[data-bs-theme=dark] .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--hl-text);
  --bs-list-group-border-color: var(--hl-border);
  --bs-list-group-action-hover-bg: var(--hl-surface-hover);
  --bs-list-group-action-hover-color: var(--hl-text-strong);
}
[data-bs-theme=dark] .table {
  --bs-table-color: var(--hl-text);
  --bs-table-border-color: var(--hl-border);
  --bs-table-striped-bg: var(--hl-surface-2);
  --bs-table-hover-bg: var(--hl-surface-hover);
}
[data-bs-theme=dark] .dropdown-menu {
  --bs-dropdown-bg: var(--hl-surface-2);
  --bs-dropdown-color: var(--hl-text);
  --bs-dropdown-border-color: var(--hl-border);
  --bs-dropdown-link-color: var(--hl-text);
  --bs-dropdown-link-hover-bg: var(--hl-surface-hover);
  --bs-dropdown-link-hover-color: var(--hl-text-strong);
}
[data-bs-theme=dark] .accordion {
  --bs-accordion-bg: var(--hl-surface-2);
  --bs-accordion-color: var(--hl-text);
  --bs-accordion-border-color: var(--hl-border);
  --bs-accordion-btn-color: var(--hl-text);
  --bs-accordion-active-bg: var(--hl-surface-3);
  --bs-accordion-active-color: var(--hl-text-strong);
}
[data-bs-theme=dark] .modal {
  --bs-modal-bg: var(--hl-surface-2);
  --bs-modal-color: var(--hl-text);
}

a {
  color: var(--bs-link-color);
}

a:hover {
  color: var(--bs-link-hover-color);
}

.btn-kakao,
.btn-kakao:hover {
  background: #FEE500;
  border-color: #FEE500;
  color: #000000;
}

.btn-facebook,
.btn-facebook:hover {
  background: #3B5998;
  border-color: #3B5998;
  color: #FFFFFF;
}

.btn-twitter,
.btn-twitter:hover {
  background: #1DA1F2;
  border-color: #1DA1F2;
  color: #FFFFFF;
}

.btn-instagram,
.btn-instagram:hover {
  background: #E1306C;
  border-color: #E1306C;
  color: #FFFFFF;
}

.btn-linkedin,
.btn-linkedin:hover {
  background: #0077B5;
  border-color: #0077B5;
  color: #FFFFFF;
}

.btn-pinterest,
.btn-pinterest:hover {
  background: #BD081C;
  border-color: #BD081C;
  color: #FFFFFF;
}

.btn-google,
.btn-google:hover {
  background: #DB4437;
  border-color: #DB4437;
  color: #FFFFFF;
}

.btn-apple,
.btn-apple:hover {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
}

.btn-github,
.btn-github:hover {
  background: #333333;
  border-color: #333333;
  color: #FFFFFF;
}

.btn-naver,
.btn-naver:hover {
  background: #03C75A;
  border-color: #03C75A;
  color: #FFFFFF;
}

.btn-line,
.btn-line:hover {
  background: #00C300;
  border-color: #00C300;
  color: #FFFFFF;
}

.btn-whatsapp,
.btn-whatsapp:hover {
  background: #25D366;
  border-color: #25D366;
  color: #FFFFFF;
}

.btn-telegram,
.btn-telegram:hover {
  background: #0088CC;
  border-color: #0088CC;
  color: #FFFFFF;
}

.btn-reddit,
.btn-reddit:hover {
  background: #FF4500;
  border-color: #FF4500;
  color: #FFFFFF;
}

.btn-yahoo,
.btn-yahoo:hover {
  background: #400191;
  border-color: #400191;
  color: #FFFFFF;
}

.btn-email,
.btn-email:hover {
  background: #393939;
  border-color: #393939;
  color: #FFFFFF;
}

.btn-print,
.btn-print:hover {
  background: #4082F1;
  border-color: #4082F1;
  color: #FFFFFF;
}

.btn-link,
.btn-link:hover {
  background: #E0215A;
  border-color: #E0215A;
  color: #FFFFFF;
}