/* 
 * Universal Text Legibility Enhancement
 * Ensures ALL text is fully legible in light mode, dark mode, and high contrast mode
 * February 2026 - WCAG 2.2 AAA Compliance
 */

/* ============================================
   CORE TEXT COLOR ENFORCEMENT
   ============================================ */

/* Base text colors - AAA compliant (7:1+) */
:root {
  /* Light mode (default) */
  --text-primary: #111111;      /* 19.6:1 on white */
  --text-secondary: #404040;     /* 10.1:1 on white */
  --text-tertiary: #595959;      /* 7.4:1 on white */
  --text-link: #003d7a;          /* 8.5:1 on white */
  --text-on-dark: #FFFFFF;       /* 21:1 on black */
  --text-on-color: #FFFFFF;      /* For colored backgrounds */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --text-primary: #FFFFFF;      /* 21:1 on dark backgrounds */
    --text-secondary: #E5E7EB;    /* 14.5:1 on #0B1423 */
    --text-tertiary: #D1D5DB;     /* 11.2:1 on #0B1423 */
    --text-link: #80c1ff;         /* 7.8:1 on #0B1423 */
    --text-on-dark: #FFFFFF;
    --text-on-color: #FFFFFF;
  }
}

/* User override for dark mode */
[data-theme="dark"] {
  --text-primary: #FFFFFF;
  --text-secondary: #E5E7EB;
  --text-tertiary: #D1D5DB;
  --text-link: #80c1ff;
  --text-on-dark: #FFFFFF;
  --text-on-color: #FFFFFF;
}

/* User override for light mode */
[data-theme="light"] {
  --text-primary: #111111;
  --text-secondary: #404040;
  --text-tertiary: #595959;
  --text-link: #003d7a;
  --text-on-dark: #FFFFFF;
  --text-on-color: #FFFFFF;
}

/* ============================================
   UNIVERSAL TEXT ENFORCEMENT
   All text elements MUST use these colors
   ============================================ */

body {
  color: var(--text-primary) !important;
  background-color: var(--bg-color, #FFFFFF);
}

/* Headings - always maximum contrast */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary) !important;
}

/* Paragraphs and body text */
p, li, td, th, dd, dt, figcaption {
  color: var(--text-primary) !important;
}

/* Links must always be visible */
a {
  color: var(--text-link) !important;
}

a:hover {
  color: var(--link-hover, var(--text-link)) !important;
}

a:visited {
  color: var(--link-visited, var(--text-link)) !important;
}

/* Secondary text */
.text-secondary,
.text-muted,
small,
.subtitle {
  color: var(--text-secondary) !important;
}

/* Form inputs */
input,
textarea,
select {
  color: var(--text-primary) !important;
  background-color: var(--bg-color, #FFFFFF) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary) !important;
}

/* Buttons must have sufficient contrast */
button,
.btn {
  color: var(--text-on-color) !important;
}

button.btn-secondary,
.btn-secondary {
  color: var(--text-primary) !important;
}

/* ============================================
   OVERRIDE INLINE STYLES THAT BREAK LEGIBILITY
   ============================================ */

/* Fix any element with inline style that sets text color */
[style*="color: #6b7280"],
[style*="color:#6b7280"],
[style*="color: #9ca3af"],
[style*="color:#9ca3af"],
[style*="color: rgb(107, 114, 128)"] {
  color: var(--text-secondary) !important;
}

[style*="color: #27AE60"],
[style*="color:#27AE60"],
[style*="color: #10b981"],
[style*="color:#10b981"] {
  color: #005a00 !important; /* AAA green */
}

@media (prefers-color-scheme: dark) {
  [style*="color: #27AE60"],
  [style*="color:#27AE60"],
  [style*="color: #10b981"],
  [style*="color:#10b981"] {
    color: #4ade80 !important; /* AAA green for dark mode */
  }
}

/* Fix green gradient boxes (blog CTAs, etc.) */
[style*="background: linear-gradient"][style*="#27AE60"],
[style*="background: linear-gradient"][style*="#10b981"] {
  background: linear-gradient(135deg, #005a00 0%, #007a00 100%) !important;
  color: #FFFFFF !important;
}

@media (prefers-color-scheme: dark) {
  [style*="background: linear-gradient"][style*="#27AE60"],
  [style*="background: linear-gradient"][style*="#10b981"] {
    background: linear-gradient(135deg, #166534 0%, #15803d 100%) !important;
    color: #FFFFFF !important;
  }
}

/* Fix gray text on any background */
[style*="color: #777"],
[style*="color:#777"],
[style*="color: #888"],
[style*="color:#888"],
[style*="color: #999"],
[style*="color:#999"] {
  color: var(--text-secondary) !important;
}

/* ============================================
   DARK MODE SPECIFIC OVERRIDES
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Ensure all cards have proper text colors */
  .card,
  .box,
  .panel,
  .content-block,
  [class*="card"],
  [class*="-box"] {
    color: var(--text-primary);
  }

  /* Success/error messages */
  .success,
  .error,
  .warning,
  .info {
    color: #FFFFFF !important;
  }

  /* Form labels */
  label,
  legend,
  .form-label {
    color: var(--text-primary) !important;
  }

  /* Tables */
  table {
    color: var(--text-primary);
  }

  thead th {
    color: var(--text-primary) !important;
  }

  /* Blockquotes */
  blockquote {
    color: var(--text-secondary);
  }

  /* Code blocks */
  code,
  pre {
    color: var(--text-primary);
    background-color: #1a1a1a !important;
  }

  /* Fix any remaining light-colored text */
  [style*="color: #fff"],
  [style*="color:#fff"],
  [style*="color: #ffffff"],
  [style*="color:#ffffff"],
  [style*="color: white"] {
    /* Already white - this is good for dark mode, but needs dark bg */
    background-color: #0B1423;
  }
}

/* ============================================
   LIGHT MODE SPECIFIC OVERRIDES
   ============================================ */

@media (prefers-color-scheme: light) {
  /* Ensure dark backgrounds have white text */
  [style*="background: #0B1423"],
  [style*="background: #183c65"],
  [style*="background: #0b2545"],
  [style*="background: linear-gradient"][style*="0B1423"],
  [class*="bg-dark"],
  .dark-bg,
  .header-bg {
    color: #FFFFFF !important;
  }

  [style*="background: #0B1423"] *,
  [style*="background: #183c65"] *,
  [style*="background: #0b2545"] * {
    color: #FFFFFF !important;
  }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */

@media (prefers-contrast: more) {
  /* Maximum contrast - pure black text on white, pure white on black */
  :root {
    --text-primary: #000000;
    --text-secondary: #000000;
    --text-tertiary: #000000;
    --text-link: #0000EE;
    --link-visited: #551A8B;
  }

  body {
    color: #000000 !important;
    background-color: #FFFFFF !important;
  }

  h1, h2, h3, h4, h5, h6,
  p, li, td, th, dd, dt {
    color: #000000 !important;
  }

  a {
    color: #0000EE !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
  }

  a:visited {
    color: #551A8B !important;
  }

  /* Colored backgrounds get white text */
  [style*="background:"],
  [class*="bg-"],
  .card,
  .btn {
    color: #FFFFFF !important;
  }

  /* But light backgrounds get black text */
  [style*="background: #fff"],
  [style*="background: white"],
  .bg-light,
  .bg-white {
    color: #000000 !important;
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root {
    --text-primary: #FFFFFF;
    --text-secondary: #FFFFFF;
    --text-tertiary: #FFFFFF;
    --text-link: #99CCFF;
  }

  body {
    color: #FFFFFF !important;
    background-color: #000000 !important;
  }

  h1, h2, h3, h4, h5, h6,
  p, li, td, th, dd, dt {
    color: #FFFFFF !important;
  }

  a {
    color: #99CCFF !important;
  }
}

/* ============================================
   FORCED COLORS MODE (Windows High Contrast)
   ============================================ */

@media (forced-colors: active) {
  * {
    forced-color-adjust: auto;
  }

  /* System colors will be used automatically */
  body {
    color: CanvasText !important;
    background-color: Canvas !important;
  }

  a {
    color: LinkText !important;
  }

  a:visited {
    color: VisitedText !important;
  }

  button {
    color: ButtonText !important;
    background-color: ButtonFace !important;
    border: 1px solid ButtonText !important;
  }

  /* Ensure decorative backgrounds don't interfere */
  [style*="background:"],
  [class*="gradient"] {
    background: Canvas !important;
  }
}

/* ============================================
   SPECIFIC COMPONENT FIXES
   ============================================ */

/* Blog post CTAs */
.cta-box,
.call-to-action,
[class*="engagement"] {
  color: var(--text-on-color) !important;
}

@media (prefers-color-scheme: dark) {
  .cta-box,
  .call-to-action,
  [class*="engagement"] {
    background-color: #1a5c3d !important;
    color: #FFFFFF !important;
  }
}

/* Community curation form */
.curation-form,
.community-form {
  color: var(--text-primary) !important;
}

.curation-form label,
.community-form label {
  color: var(--text-primary) !important;
}

.curation-form input,
.curation-form textarea,
.curation-form select,
.community-form input,
.community-form textarea,
.community-form select {
  color: var(--text-primary) !important;
  background-color: var(--bg-color, #FFFFFF) !important;
}

/* Success/info messages */
.success-message,
.info-message {
  background-color: #005a00 !important;
  color: #FFFFFF !important;
}

@media (prefers-color-scheme: dark) {
  .success-message,
  .info-message {
    background-color: #166534 !important;
    color: #FFFFFF !important;
  }
}

/* Card components */
.card h3,
.card h4,
.card p,
.box h3,
.box h4,
.box p {
  color: inherit !important;
}

/* ============================================
   PRINT STYLES - Ensure AAA compliance
   ============================================ */

@media print {
  * {
    color: #000000 !important;
    background: #FFFFFF !important;
  }

  a {
    color: #000080 !important;
    text-decoration: underline !important;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #000000 !important;
  }
}

/* ============================================
   UTILITY CLASSES FOR CONTENT AUTHORS
   ============================================ */

/* Use these classes instead of inline styles */

.text-white {
  color: #FFFFFF !important;
}

.text-black {
  color: #111111 !important;
}

.text-on-dark {
  color: var(--text-on-dark) !important;
}

.text-on-light {
  color: var(--text-primary) !important;
}

/* AAA-compliant color classes */
.text-green-aaa {
  color: #005a00 !important;
}

@media (prefers-color-scheme: dark) {
  .text-green-aaa {
    color: #4ade80 !important;
  }
}

.text-blue-aaa {
  color: #003d7a !important;
}

@media (prefers-color-scheme: dark) {
  .text-blue-aaa {
    color: #80c1ff !important;
  }
}

.text-red-aaa {
  color: #8b0000 !important;
}

@media (prefers-color-scheme: dark) {
  .text-red-aaa {
    color: #ff6b6b !important;
  }
}

/* Background utility classes with guaranteed contrast */
.bg-green-aaa {
  background-color: #005a00 !important;
  color: #FFFFFF !important;
}

@media (prefers-color-scheme: dark) {
  .bg-green-aaa {
    background-color: #166534 !important;
    color: #FFFFFF !important;
  }
}

.bg-blue-aaa {
  background-color: #003d7a !important;
  color: #FFFFFF !important;
}

@media (prefers-color-scheme: dark) {
  .bg-blue-aaa {
    background-color: #1e3a5f !important;
    color: #FFFFFF !important;
  }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Ensure focus indicators are always visible */
:focus-visible {
  outline: 3px solid var(--focus-outline, #0066CC) !important;
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  :focus-visible {
    outline-color: var(--focus-outline, #FFC107) !important;
  }
}

/* Skip link always visible when focused */
.skip-link:focus {
  color: #000000 !important;
  background-color: #FFFF00 !important;
  outline: 3px solid #000000 !important;
}

/* Error states must be visible in all modes */
[aria-invalid="true"],
.error-field,
.field-error {
  border-color: #8b0000 !important;
  color: var(--text-primary) !important;
}

.error-message,
.error-text {
  color: #8b0000 !important;
}

@media (prefers-color-scheme: dark) {
  [aria-invalid="true"],
  .error-field,
  .field-error {
    border-color: #ff6b6b !important;
  }

  .error-message,
  .error-text {
    color: #ff6b6b !important;
  }
}

/* Success states */
[aria-invalid="false"],
.success-field,
.field-success {
  border-color: #005a00 !important;
}

@media (prefers-color-scheme: dark) {
  [aria-invalid="false"],
  .success-field,
  .field-success {
    border-color: #4ade80 !important;
  }
}

/* ============================================
   FINAL CATCH-ALL
   Ensure nothing slips through
   ============================================ */

/* Any element with insufficient contrast gets mode-aware color */
* {
  /* Let CSS custom properties handle it */
  color: inherit;
}

/* But enforce on direct children of body */
body > * {
  color: var(--text-primary);
}

/* Ensure all interactive elements are visible */
a, button, input, select, textarea,
[role="button"],
[role="link"],
[tabindex]:not([tabindex="-1"]) {
  /* Must have sufficient contrast */
  min-height: 24px; /* Touch target size */
  min-width: 24px;
}