/**
 * WCAG AA Accessibility Standards - Global Contrast Enforcement
 * Applied site-wide for maximum readability and compliance
 * Last updated: October 2025
 */

:root {
    /* WCAG-Compliant Dark Backgrounds (Never Pure Black) */
    --dark-bg-primary: #121212;
    --dark-bg-secondary: #1F1F1F;
    --dark-bg-tertiary: #2A2A2A;
    
    /* WCAG-Compliant Light Backgrounds */
    --light-bg-primary: #FFFFFF;
    --light-bg-secondary: #F8F9FA;
    --light-bg-tertiary: #E9ECEF;
    
    /* Text Colors for Dark Backgrounds (Off-White, Never Pure White) */
    --text-on-dark-primary: #E0E0E0;
    --text-on-dark-secondary: #B8B8B8;
    --text-on-dark-muted: #999999;
    
    /* Text Colors for Light Backgrounds (Dark, High Contrast) */
    --text-on-light-primary: #1A1A1A;
    --text-on-light-secondary: #4A4A4A;
    --text-on-light-muted: #6A6A6A;
    
    /* Accent Colors with WCAG-Compliant Contrast */
    --accent-blue: #0057B7;
    --accent-blue-dark: #003F8A;
    --accent-green: #0F7B0F;
    --accent-green-dark: #0A5D0A;
    --accent-orange: #B45309;
    --accent-orange-dark: #92400E;
    --accent-red: #B91C1C;
    --accent-red-dark: #7F1D1D;
}

/* ===============================================
   GLOBAL TEXT READABILITY - CONTEXT-AWARE
   =============================================== */

/* Default body text on light backgrounds */
body {
    background-color: var(--light-bg-primary);
    color: var(--text-on-light-primary);
    font-weight: 400;
    line-height: 1.6;
}

/* Dark background sections - enforce off-white text */
.bg-dark, .bg-primary, .bg-secondary, .navbar-dark,
.footer.bg-dark, section.bg-dark, div.bg-dark,
.hero-section, .bg-gradient-dark {
    background-color: var(--dark-bg-primary) !important;
    color: var(--text-on-dark-primary) !important;
}

.bg-dark *, .bg-primary *, .bg-secondary *, .navbar-dark *,
.hero-section *, .bg-gradient-dark *,
section.bg-dark *, div.bg-dark * {
    color: inherit !important;
}

/* Headings on dark backgrounds */
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.hero-section h1, .hero-section h2, .hero-section h3, .hero-section h4, .hero-section h5, .hero-section h6 {
    color: var(--text-on-dark-primary) !important;
    font-weight: 600;
}

/* Paragraphs and text on dark backgrounds */
.bg-dark p, .bg-dark span, .bg-dark div, .bg-dark li,
.bg-primary p, .bg-primary span, .bg-primary div, .bg-primary li,
.hero-section p, .hero-section span, .hero-section div, .hero-section li {
    color: var(--text-on-dark-primary) !important;
}

/* Muted text on dark backgrounds - use lighter gray, not pure black */
.bg-dark .text-muted, .bg-primary .text-muted, .hero-section .text-muted {
    color: var(--text-on-dark-muted) !important;
}

/* Light text utility class */
.text-light {
    color: var(--text-on-dark-primary) !important;
}

/* ===============================================
   BUTTONS & CTAs - HIGH CONTRAST ENFORCEMENT
   =============================================== */

/* Primary CTA Buttons */
.btn-primary, .cta-button, .btn-info {
    background-color: var(--accent-blue) !important;
    border-color: var(--accent-blue) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    min-height: 44px;
}

.btn-primary:hover, .cta-button:hover, .btn-info:hover {
    background-color: var(--accent-blue-dark) !important;
    border-color: var(--accent-blue-dark) !important;
    color: #FFFFFF !important;
}

/* Success Buttons */
.btn-success {
    background-color: var(--accent-green) !important;
    border-color: var(--accent-green) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-success:hover {
    background-color: var(--accent-green-dark) !important;
    border-color: var(--accent-green-dark) !important;
    color: #FFFFFF !important;
}

/* Warning Buttons */
.btn-warning {
    background-color: var(--accent-orange) !important;
    border-color: var(--accent-orange) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-warning:hover {
    background-color: var(--accent-orange-dark) !important;
    border-color: var(--accent-orange-dark) !important;
    color: #FFFFFF !important;
}

/* Danger Buttons */
.btn-danger {
    background-color: var(--accent-red) !important;
    border-color: var(--accent-red) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-danger:hover {
    background-color: var(--accent-red-dark) !important;
    border-color: var(--accent-red-dark) !important;
    color: #FFFFFF !important;
}

/* Light/White Buttons */
.btn-light, .cta-white, .btn-outline-dark {
    background-color: #FFFFFF !important;
    border: 2px solid #000000 !important;
    color: #000000 !important;
    font-weight: 600;
    text-shadow: none;
    min-height: 44px;
}

.btn-light:hover, .cta-white:hover, .btn-outline-dark:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #FFFFFF !important;
}

/* Outline Buttons on Dark Backgrounds */
.bg-dark .btn-outline-light, .hero-section .btn-outline-light {
    background-color: transparent !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    font-weight: 600;
}

.bg-dark .btn-outline-light:hover, .hero-section .btn-outline-light:hover {
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #000000 !important;
}

/* ===============================================
   CARDS & CONTENT CONTAINERS
   =============================================== */

/* Light background cards - dark text */
/* NOTE: Removed global .card override to allow pricing page cards to use their own inline styles */
.dashboard-card:not([style*="background"]), .content-card:not([style*="background"]) {
    background-color: var(--light-bg-primary) !important;
    color: var(--text-on-light-primary) !important;
    border: 1px solid #DEE2E6;
}

.dashboard-card .card-header, .dashboard-card .card-body, .dashboard-card .card-footer {
    color: var(--text-on-light-primary) !important;
}

.dashboard-card h1, .dashboard-card h2, .dashboard-card h3, .dashboard-card h4, .dashboard-card h5, .dashboard-card h6 {
    color: var(--text-on-light-primary) !important;
}

.dashboard-card p, .dashboard-card span, .dashboard-card div, .dashboard-card li {
    color: var(--text-on-light-primary) !important;
}

/* Cards on dark backgrounds - maintain light background */
.bg-dark .dashboard-card, .hero-section .dashboard-card {
    background-color: var(--light-bg-primary) !important;
    color: var(--text-on-light-primary) !important;
}

/* Exception: Card list-group-items with retro dark backgrounds need light text
   This overrides the card's generic dark text rules for list groups specifically */
.card .list-group-item {
    color: var(--text-on-dark-primary) !important;
}

.card .list-group-item h1, .card .list-group-item h2, .card .list-group-item h3,
.card .list-group-item h4, .card .list-group-item h5, .card .list-group-item h6 {
    color: var(--text-on-dark-primary) !important;
}

.card .list-group-item p, .card .list-group-item span, .card .list-group-item div,
.card .list-group-item strong, .card .list-group-item em, .card .list-group-item .fw-bold {
    color: var(--text-on-dark-primary) !important;
}

/* ===============================================
   FORMS - OPTIMAL INPUT CONTRAST
   =============================================== */

/* Form inputs - white background, dark text */
.form-control, .form-select, .form-check-input {
    background-color: #FFFFFF !important;
    border: 1px solid #CED4DA !important;
    color: var(--text-on-light-primary) !important;
    font-weight: 500;
}

.form-control:focus, .form-select:focus {
    background-color: #FFFFFF !important;
    border-color: var(--accent-blue) !important;
    color: var(--text-on-light-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 87, 183, 0.25) !important;
}

/* Form labels */
.form-label, .form-floating > label {
    color: var(--text-on-light-primary) !important;
    font-weight: 500;
}

/* Form labels on dark backgrounds */
.bg-dark .form-label, .bg-dark .form-floating > label {
    color: var(--text-on-dark-primary) !important;
}

/* Form help text */
.form-text, .form-hint, .help-text {
    color: var(--text-on-light-secondary) !important;
    font-size: 0.875rem;
}

.bg-dark .form-text, .bg-dark .form-hint, .bg-dark .help-text {
    color: var(--text-on-dark-secondary) !important;
}

/* ===============================================
   TEXT UTILITIES - CONTEXT-AWARE
   =============================================== */

/* Text muted - context-aware */
.text-muted {
    color: var(--text-on-light-muted) !important;
}

.bg-dark .text-muted, .bg-primary .text-muted, .hero-section .text-muted {
    color: var(--text-on-dark-muted) !important;
}

/* Text secondary */
.text-secondary {
    color: var(--text-on-light-secondary) !important;
}

.bg-dark .text-secondary, .bg-primary .text-secondary {
    color: var(--text-on-dark-secondary) !important;
}

/* Small text */
small, .small {
    color: var(--text-on-light-secondary) !important;
}

.bg-dark small, .bg-dark .small {
    color: var(--text-on-dark-secondary) !important;
}

/* ===============================================
   NAVIGATION - HIGH CONTRAST
   =============================================== */

/* Navbar links on dark backgrounds */
.navbar-dark .navbar-nav .nav-link {
    color: var(--text-on-dark-primary) !important;
    font-weight: 500;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #FFFFFF !important;
}

/* Navbar brand on dark backgrounds */
.navbar-dark .navbar-brand {
    color: #FFFFFF !important;
    font-weight: 700;
}

/* Dropdown menus - light background, dark text */
.dropdown-menu {
    background-color: var(--light-bg-primary) !important;
}

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

.dropdown-item:hover {
    background-color: var(--light-bg-secondary) !important;
    color: var(--text-on-light-primary) !important;
}

/* ===============================================
   ALERTS - WCAG-COMPLIANT COLORS
   =============================================== */

.alert-success {
    background-color: #D1FAE5 !important;
    border-color: #10B981 !important;
    color: #065F46 !important;
}

.alert-warning {
    background-color: #FEF3C7 !important;
    border-color: #F59E0B !important;
    color: #78350F !important;
}

.alert-danger {
    background-color: #FEE2E2 !important;
    border-color: #EF4444 !important;
    color: #991B1B !important;
}

.alert-info {
    background-color: #DBEAFE !important;
    border-color: #3B82F6 !important;
    color: #1E40AF !important;
}

/* ===============================================
   BADGES - HIGH CONTRAST STATUS INDICATORS
   =============================================== */

.badge {
    font-weight: 600;
    padding: 0.35em 0.65em;
}

.status-verified, .badge-success {
    background-color: #D1FAE5 !important;
    color: #065F46 !important;
    border: 1px solid #10B981 !important;
}

.status-pending, .badge-warning {
    background-color: #FEF3C7 !important;
    color: #78350F !important;
    border: 1px solid #F59E0B !important;
}

.status-failed, .badge-danger {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
    border: 1px solid #EF4444 !important;
}

.badge-light {
    background-color: #F8F9FA !important;
    color: var(--text-on-light-primary) !important;
    border: 1px solid #DEE2E6 !important;
}

/* ===============================================
   TABLES - READABLE DATA DISPLAY
   =============================================== */

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

.table th {
    color: var(--text-on-light-primary) !important;
    font-weight: 600;
    border-color: #DEE2E6 !important;
}

.table td {
    color: var(--text-on-light-primary) !important;
    border-color: #DEE2E6 !important;
}

.table-dark {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--text-on-dark-primary) !important;
}

.table-dark th, .table-dark td {
    color: var(--text-on-dark-primary) !important;
    border-color: #374151 !important;
}

/* ===============================================
   FOOTER - DARK BACKGROUND, LIGHT TEXT
   =============================================== */

footer, .footer {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--text-on-dark-primary) !important;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
    color: var(--text-on-dark-primary) !important;
}

footer p, footer span, footer div, footer li, footer a,
.footer p, .footer span, .footer div, .footer li {
    color: var(--text-on-dark-primary) !important;
}

footer a:hover, .footer a:hover {
    color: #FFFFFF !important;
}

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

/* Focus states - high visibility */
.btn:focus, .form-control:focus, .form-select:focus, 
a:focus, .nav-link:focus {
    outline: 2px solid var(--accent-blue) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(0, 87, 183, 0.25) !important;
}

/* Minimum touch targets */
.btn, .nav-link, .dropdown-item, .form-check-input {
    min-height: 44px;
    min-width: 44px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===============================================
   FONT WEIGHT ADJUSTMENTS FOR DARK BACKGROUNDS
   =============================================== */

/* Medium weight works better on dark backgrounds */
.bg-dark, .bg-primary, .hero-section {
    font-weight: 400;
}

.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-primary h1, .bg-primary h2, .bg-primary h3,
.hero-section h1, .hero-section h2, .hero-section h3 {
    font-weight: 600;
}

.bg-dark p, .bg-dark span, .bg-dark div,
.bg-primary p, .bg-primary span, .bg-primary div,
.hero-section p, .hero-section span, .hero-section div {
    font-weight: 400;
}

/* ===============================================
   LINK CONTRAST - CONTEXT-AWARE
   =============================================== */

/* Links on light backgrounds */
a {
    color: var(--accent-blue);
    text-decoration: none;
}

a:hover {
    color: var(--accent-blue-dark);
    text-decoration: underline;
}

/* Links on dark backgrounds */
.bg-dark a, .bg-primary a, .hero-section a {
    color: #60A5FA !important;
}

.bg-dark a:hover, .bg-primary a:hover, .hero-section a:hover {
    color: #93C5FD !important;
}

/* ===============================================
   RESPONSIVE TEXT SCALING
   =============================================== */

@media (max-width: 768px) {
    body {
        font-size: 0.95rem;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.1rem; }
    h6 { font-size: 1rem; }
    
    .btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* ===============================================
   OVERRIDE PROBLEMATIC STYLES FROM OTHER CSS
   =============================================== */

/* Fix retro-style.css issues */
body::before {
    opacity: 0.1 !important;
}

/* Fix main.css global black text enforcement */
html body, html p, html span, html div {
    color: var(--text-on-light-primary) !important;
}

/* Fix dark section text in main.css */
.navbar.bg-dark, .bg-dark.navbar {
    color: var(--text-on-dark-primary) !important;
}

/* Fix style.css forced black text */
.text-muted:not(.bg-dark *):not(.bg-primary *) {
    color: var(--text-on-light-muted) !important;
}