<style>

/* 1. Focus Visibility (WCAG 2.2 – 2.4.11 Focus Appearance) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* 2. Keyboard Navigation Support */
a, button, input, select, textarea {
  min-height: 44px; /* WCAG 2.2 Target Size */
}

/* 3. Ensure Links Are Not Color-Only (1.4.1 Use of Color) */
a {
  text-decoration: underline;
}

/* 4. Improve Contrast Without Breaking Your Existing Styles */
.dark-mode a:hover,
.dark-mode a:focus-visible {
  color: #63b3ff !important;
}

/* 5. Respect User System Preferences (Non-intrusive addition) */
@media (prefers-color-scheme: dark) {
  body:not(.dark-mode) {
    background-color: #121212;
    color: #ffffff;
  }
}

/* 6. Reduce Motion for Accessibility (2.3.3 Animation from Interactions) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 7. Improve Readability (Spacing – WCAG 1.4.12) */
body {
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* 8. Form Accessibility Enhancements */
input, textarea, select {
  border: 1px solid #ccc;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border-color: #ffbf47;
}

/* 9. Skip Link (Add in HTML body for keyboard users) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

/* 10. Ensure Buttons Are Clearly Visible */
button {
  cursor: pointer;
}

</style>
