/* Improved color contrast fixes for accessibility */

:root {
    /* Original colors preserved for backgrounds */
    --primary-color: #D4B896;
    --primary-light: #E5CDB0;
    --primary-dark: #C3A582;
    --accent-color: #A67C52;
    --cream: #F7F3EF;
    --cream-light: #FEFCF9;
    --beige: #EDE5DB;
    --warm-gray: #8B7D6B;
    --dark-gray: #4A4A4A;
    --charcoal: #2D2D2D;
    --gold-accent: #B8956A;
    
    /* New improved text colors with better contrast */
    --text-warm-gray: #6B5D4F; /* Darker version of warm-gray for better contrast (5.2:1) */
    --text-light-improved: #5A5A5A; /* Improved from #8B7D6B for body text (7.4:1) */
    --text-accent-dark: #8B6239; /* Darker accent for text use (4.8:1) */
    --text-primary-dark: #B8956A; /* Better contrast version of primary for text (3.5:1 - large text only) */
    
    /* Update existing text color variables */
    --text-primary: #2D2D2D; /* Already good contrast (13.77:1) */
    --text-secondary: #4A4A4A; /* Already good contrast (8.86:1) */
    --text-light: var(--text-warm-gray); /* Use improved version */
}

/* Apply improved text colors */
.text-light,
.text-warm-gray {
    color: var(--text-warm-gray) !important;
}

/* Secondary text elements */
p,
.description,
.subtitle,
.caption,
.meta {
    color: var(--text-light-improved);
}

/* Accent text with better contrast */
.accent-text,
.text-accent {
    color: var(--text-accent-dark) !important;
}

/* Navigation and UI elements */
.tagline,
.nav-link,
.breadcrumb,
.footer-text {
    color: var(--text-light-improved);
}

/* Form labels and secondary headings */
label,
.form-label,
h4,
h5,
h6 {
    color: var(--text-secondary);
}

/* Stats and light text elements */
.stat-label,
.stat-description,
.feature-description,
.card-description {
    color: var(--text-light-improved);
}

/* Large text elements that can use lower contrast */
.hero-title,
.section-title,
h1,
h2,
h3 {
    color: var(--text-primary);
}

/* Button text - ensure white on colored backgrounds */
.btn-primary,
.btn-outline:hover,
.cta-button {
    color: #FFFFFF !important;
}

/* Links with proper contrast */
a:not(.btn):not(.nav-link):not(.logo-link) {
    color: var(--text-accent-dark);
}

a:not(.btn):not(.nav-link):not(.logo-link):hover {
    color: var(--text-primary);
}

/* Footer improvements */
.footer {
    background: #2D2D2D !important;
    color: #FFFFFF !important;
}

.footer h3,
.footer h4 {
    color: #FFFFFF !important;
    font-weight: 700 !important;
}

.footer p,
.footer .company-description,
.footer .disclaimer,
.footer small {
    color: #E5E5E5 !important;
    font-weight: 500 !important;
}

.footer .contact-link,
.footer .footer-links a {
    color: #D4B896 !important;
    font-weight: 600 !important;
}

.footer .contact-link:hover,
.footer .footer-links a:hover {
    color: #FFFFFF !important;
}

.footer .contact-icon {
    color: #D4B896 !important;
}

.footer strong {
    color: #FFFFFF !important;
}

/* Card and content improvements */
.story-location,
.clinical-source,
.consultation-note {
    color: var(--text-light-improved);
}

/* Mobile specific improvements */
@media (max-width: 768px) {
    /* Ensure text remains readable on mobile */
    p,
    .description,
    .text-light,
    .text-warm-gray {
        color: var(--text-light-improved) !important;
    }
    
    /* Mobile navigation text */
    .mobile-nav-link {
        color: var(--text-secondary) !important;
    }
    
    /* Ensure mobile buttons have sufficient contrast */
    .mobile-cta-button,
    .mobile-phone-button {
        color: #FFFFFF !important;
    }
}

/* Focus states for accessibility */
*:focus {
    outline: 2px solid var(--text-accent-dark);
    outline-offset: 2px;
}

/* Skip to content link for screen readers */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--text-primary);
    color: #FFFFFF;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    transition: top 0.3s;
    z-index: 1000;
}

.skip-to-content:focus {
    top: 6px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --text-light: var(--text-secondary);
        --text-warm-gray: var(--text-secondary);
        --text-light-improved: var(--text-secondary);
    }
    
    .text-light,
    .text-warm-gray,
    p,
    .description {
        color: var(--text-secondary) !important;
    }
}