/* SPIRITUAL COMPASS - IMPROVED COLOR ACCESSIBILITY */

:root {
    /* Improved color palette with better contrast */
    --primary: #1e40af;           /* Darker blue for better contrast */
    --primary-dark: #1e3a8a;      /* Even darker for hover states */
    --secondary: #6366f1;         /* Softer purple */
    --accent: #f59e0b;            /* Warm gold accent */
    
    /* Text colors - much better contrast */
    --text-primary: #111827;      /* Almost black for main text */
    --text-secondary: #374151;    /* Dark grey instead of light grey */
    --text-light: #6b7280;        /* Medium grey for subtitles */
    
    /* Background improvements */
    --background: #ffffff;
    --surface: #f8fafc;           /* Slightly cooler surface */
    --surface-elevated: #ffffff;
    
    /* Better borders */
    --border: #d1d5db;            /* Stronger border contrast */
    --border-light: #e5e7eb;
    
    /* Spiritual colors - enhanced */
    --wisdom-blue: #2563eb;       /* Stronger blue */
    --peace-green: #059669;       /* Deeper green */
    --love-pink: #db2777;         /* Richer pink */
    --hope-yellow: #d97706;       /* Warmer yellow */
    --truth-purple: #7c3aed;      /* Deeper purple */
}

/* Enhanced text readability */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700; /* Bolder headings */
}

p, .hero-subtitle, .assessment-subtitle {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Improve button contrast */
.btn-primary {
    background-color: var(--primary);
    color: white;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 64, 175, 0.3);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    font-weight: 600;
}

.btn-secondary:hover {
    background-color: var(--primary);
    color: white;
}

/* Enhance navigation */
.nav-link {
    color: var(--text-secondary);
    font-weight: 500;
}

.nav-link:hover {
    color: var(--primary);
}

/* Better form styling */
.options label {
    color: var(--text-secondary);
    border: 2px solid var(--border);
}

.options label:hover {
    border-color: var(--primary);
    color: var(--text-primary);
}

.options label:has(input:checked) {
    background: rgba(30, 64, 175, 0.1);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}

/* Improve wisdom card */
.wisdom-quote blockquote {
    color: var(--text-primary);
    font-weight: 500;
}

.wisdom-quote cite {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Better card contrast */
.about-card, .community-card, .contact-form {
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.08);
    border: 1px solid var(--border-light);
}

.about-card:hover, .community-card:hover {
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.15);
    border-color: var(--border);
}

/* Enhance hero section */
.hero-title {
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Better footer contrast */
.footer {
    background: var(--text-primary);
}

.footer-section a {
    color: rgba(255, 255, 255, 0.85);
}

.footer-section a:hover {
    color: white;
}

/* Assessment page improvements */
.assessment-header {
    color: white;
}

.question h3 {
    color: var(--text-primary);
    font-weight: 600;
}

/* Accessibility improvements */
input:focus, 
select:focus, 
textarea:focus, 
.btn:focus {
    outline: 3px solid rgba(30, 64, 175, 0.5);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #000000;
        --text-secondary: #1f2937;
        --primary: #1e3a8a;
        --border: #9ca3af;
    }
}