html.high-contrast {
  --primary: #ffff00;
  --primary-light: #ffff00;
  --primary-dark: #ffd700;
  --secondary: #00ffff;
  --accent: #ff00ff;

  --bg-body: #000000;
  --bg-card: #000000;

  --text-main: #ffffff;
  --text-muted: #e5e5e5;
  --white: #000000;

  --radius: 0;

  --shadow: 0 0 0 2px #ffffff;
  --shadow-sm: 0 0 0 1px #ffffff;
  --shadow-lg: 0 0 0 4px #ffff00;
  --shadow-hover: 0 0 0 6px #ffff00;

  --transition: none;
}

html.high-contrast * {
  transition: none !important;
  background-image: none !important;
}

/* Override Bootstrap background utilities */
html.high-contrast .bg-light,
html.high-contrast .bg-white {
  background-color: var(--bg-body) !important;
}

html.high-contrast .bg-dark {
  background-color: var(--text-main) !important;
}

/* Override Bootstrap text utilities */
html.high-contrast .text-primary {
  color: var(--primary) !important;
}

html.high-contrast .text-secondary {
  color: var(--secondary) !important;
}

html.high-contrast .text-muted {
  color: var(--text-muted) !important;
}

html.high-contrast .text-white {
  color: var(--text-main) !important;
}

html.high-contrast .text-dark {
  color: var(--bg-body) !important;
}

html.high-contrast body {
  background-color: var(--bg-body);
  color: var(--text-main);
}

html.high-contrast a {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

html.high-contrast a:hover,
html.high-contrast a:focus {
  background-color: var(--primary);
  color: var(--bg-body);
  outline: 3px solid var(--primary);
  text-decoration: none;
}

html.high-contrast header.site-header {
  border-bottom: 2px solid var(--text-main);
  background: var(--bg-body);
}

html.high-contrast .navbar {
  backdrop-filter: none !important;
  background-color: var(--bg-body) !important;
  box-shadow: none !important;
}

html.high-contrast .nav-link::after {
  display: none !important;
}

html.high-contrast .nav-link:hover,
html.high-contrast .nav-link.active {
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
}

html.high-contrast .logo a {
  color: var(--text-main);
  text-decoration: none;
  border: 2px solid transparent;
}

html.high-contrast .logo a:hover {
  border-color: var(--primary);
  background: transparent;
  color: var(--primary);
}

html.high-contrast .logo a::before {
  color: var(--primary);
  animation: none;
}

html.high-contrast .main-nav a {
  color: var(--text-main);
}

html.high-contrast .main-nav a:hover,
html.high-contrast .main-nav a[aria-current="page"] {
  color: var(--primary);
  background: transparent;
  text-decoration: underline;
}

html.high-contrast button {
  background-color: var(--bg-body);
  color: var(--primary);
  border: 2px solid var(--primary);
  font-weight: bold;
  padding: 0.5rem 1rem;
  min-width: 2.5rem;
}

html.high-contrast button:hover,
html.high-contrast button:focus {
  background-color: var(--primary);
  color: var(--bg-body);
  box-shadow: 0 0 0 4px var(--text-main);
}

html.high-contrast #theme-toggle {
  border: 2px solid var(--primary);
  border-radius: 0;
}

html.high-contrast #theme-toggle:hover,
html.high-contrast #theme-toggle:focus {
  background-color: var(--primary);
  color: var(--bg-body);
  transform: none;
}

html.high-contrast .content-card {
  border: 2px solid var(--text-main);
  box-shadow: none;
}

html.high-contrast input,
html.high-contrast textarea,
html.high-contrast select {
  background-color: var(--bg-body);
  color: var(--text-main);
  border: 2px solid var(--text-main);
  border-radius: 0;
}

html.high-contrast input:focus {
  outline: 2px solid var(--primary);
  border-color: var(--primary);
}

html.high-contrast img {
  border: 2px solid var(--text-main);
  filter: grayscale(100%) contrast(120%);
}

html.high-contrast .search-modal {
  background: rgba(0, 0, 0, 0.95);
}

html.high-contrast .search-content {
  border: 4px solid var(--primary);
  background: var(--bg-body);
}

html.high-contrast .search-result-item {
  border-bottom: 1px solid var(--text-main);
}

html.high-contrast .search-result-item strong {
  color: var(--primary);
}

html.high-contrast .skip-link {
  background: var(--primary);
  color: var(--bg-body);
  border: 2px solid var(--white);
  font-weight: bold;
}

/* New component overrides for refined design */
html.high-contrast .hero-section {
  background-color: var(--bg-body) !important;
  color: var(--text-main) !important;
  border-bottom: 4px solid var(--primary);
}

html.high-contrast .hero-section::before,
html.high-contrast .hero-section::after {
  display: none !important;
}

html.high-contrast .hero-section h1.display-3,
html.high-contrast .hero-section .lead,
html.high-contrast .hero-section blockquote p {
  color: var(--text-main) !important;
  opacity: 1 !important;
}

html.high-contrast .hero-section .badge {
  background-color: var(--bg-body) !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
}

html.high-contrast .hero-section .btn-light,
html.high-contrast .hero-section .btn-outline-light {
  background-color: var(--bg-body) !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  font-weight: bold;
}

html.high-contrast .hero-section .btn-light:hover,
html.high-contrast .hero-section .btn-outline-light:hover {
  background-color: var(--primary) !important;
  color: var(--bg-body) !important;
}

html.high-contrast .card {
  border: 2px solid var(--text-main) !important;
  box-shadow: none !important;
  transform: none !important;
}

html.high-contrast .feature-icon {
  background-color: var(--bg-body) !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
}

html.high-contrast .btn-primary {
  background-color: var(--bg-body) !important;
  color: var(--primary) !important;
  border: 2px solid var(--primary) !important;
  box-shadow: none !important;
  transform: none !important;
}

html.high-contrast .btn-primary:hover {
  background-color: var(--primary) !important;
  color: var(--bg-body) !important;
}

html.high-contrast .section-heading h2 {
  color: var(--primary) !important;
}

html.high-contrast .section-heading p {
  color: var(--secondary) !important;
}

html.high-contrast .bg-gradient-soft {
  background: var(--bg-body) !important;
}

html.high-contrast footer.site-footer {
  border-top: 2px solid var(--text-main);
  background: var(--bg-body);
}

html.high-contrast .footer-info h3 {
  color: var(--primary);
}