/* ============================================================
   Accessibility — WCAG AA contrast improvements
   ------------------------------------------------------------
   Tailwind's text-gray-300/400 are below 4.5:1 on white. These
   rules bump them to compliant equivalents WITHOUT breaking
   Tailwind utilities used on dark backgrounds (where gray-400
   already passes AA at ~5.2:1).

   Strategy: only bump contrast when the element sits inside a
   light-background container (bg-white, bg-light, bg-gray-50,
   #main-content cards), and leave the dark sections alone.
   ============================================================ */

.bg-white .text-gray-300,
.bg-light .text-gray-300,
.bg-gray-50 .text-gray-300,
.bg-white .text-gray-400,
.bg-light .text-gray-400,
.bg-gray-50 .text-gray-400,
section.bg-white .text-gray-400,
section.bg-light .text-gray-400 {
    /* gray-600 — 7.0:1 on white */
    color: #4b5563 !important;
}

/* Form input icons — Tailwind absolute icons inside white inputs */
input + .text-gray-400,
.peer + .text-gray-400,
input ~ .text-gray-400,
[class*="bg-white"] [class*="text-gray-400"] {
    color: #4b5563 !important;
}

/* Placeholder text contrast (commonly forgotten, ~3.0:1 by default) */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #6b7280 !important; /* gray-500 — 4.83:1 on white */
    opacity: 1;
}

/* Focus ring visibility for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #18A5E3;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip-link for keyboard users (revealed on focus) */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: #18A5E3;
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    z-index: 99999;
    text-decoration: none;
}
.skip-to-content:focus {
    top: 0;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}