/* Accessibility Overrides — loaded separately to bypass Tailwind CSS tree-shaking */

/* High Contrast */
.high-contrast {
  --color-primary: #00ffff !important;
  --color-text-primary: #FFFFFF !important;
  --color-text-secondary: #CCCCCC !important;
  --color-bg-primary: #000000 !important;
  --color-bg-secondary: #111111 !important;
  --color-bg-card: #1a1a2e !important;
  --color-border: #FFFFFF40 !important;
  --color-success: #00FF00 !important;
  --color-error: #FF4444 !important;
}

.light.high-contrast {
  --color-primary: #0055FF !important;
  --color-text-primary: #000000 !important;
  --color-text-secondary: #333333 !important;
  --color-bg-primary: #FFFFFF !important;
  --color-bg-secondary: #EEEEEE !important;
  --color-bg-card: #FFFFFF !important;
  --color-border: #00000040 !important;
}

/* Reduce Motion */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Dyslexia Font */
.dyslexia-font,
.dyslexia-font * {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', sans-serif !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.15em !important;
  line-height: 1.8 !important;
}

/* Letter Spacing */
.letter-spacing,
.letter-spacing * {
  letter-spacing: 0.08em !important;
  word-spacing: 0.2em !important;
  line-height: 1.6 !important;
}

/* Inverted Colors */
.inverted,
.inverted * {
  filter: invert(100%) hue-rotate(180deg) !important;
}

.inverted img,
.inverted video,
.inverted canvas {
  filter: invert(100%) hue-rotate(180deg) !important;
}

/* Highlight Headings */
.highlight-headings h1,
.highlight-headings h2,
.highlight-headings h3,
.highlight-headings h4,
.highlight-headings h5,
.highlight-headings h6 {
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  text-decoration-color: var(--color-primary) !important;
  text-decoration-thickness: 2px !important;
}

/* Re-invert a11y panel so it stays visible when inverted */
.inverted [data-a11y="panel"],
.inverted [data-a11y="panel"] * {
  filter: invert(100%) hue-rotate(180deg) !important;
}