/* ===== SHARED DARK MODE STYLES ===== */
/* Dark mode styles that apply across all pages */

/* === GLOBAL DARK MODE OVERRIDES === */
body.dark-mode {
    /* Override text colors for dark mode */
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted: var(--dark-text-muted);
    
    /* Global background and text colors */
    background-color: var(--body-bg-dark);
    color: var(--body-color-dark);
}

/* === LOADING OVERLAY DARK MODE === */
body.dark-mode .loading-overlay { 
    background: var(--loading-bg-dark) !important; 
}

body.dark-mode .loading-text {
    color: var(--slate-100);
}

body.dark-mode .loading-dots .dot {
    background: var(--blue-400);
}

/* === AMBIENT BACKGROUND DARK MODE === */
body.dark-mode .ambient-background { 
    background: linear-gradient(135deg, rgba(5, 8, 16, 0.95) 0%, rgba(10, 15, 25, 0.9) 50%, rgba(15, 20, 30, 0.85) 100%) !important; 
    transition: all 0.9s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
    will-change: background; 
}

/* === CHOICE CONTAINER DARK MODE === */
body.dark-mode .choice-container { 
    background: transparent !important; 
    border-radius: 20px !important; 
}

/* === MISSION CLARITY SECTION DARK MODE === */
body.dark-mode .mission-clarity {
    background: rgba(20, 25, 35, 0.95);
    border-color: rgba(229, 57, 53, 0.3);
}

body.dark-mode .mission-point {
    background: rgba(30, 35, 45, 0.8);
    border-color: rgba(229, 57, 53, 0.2);
}

body.dark-mode .mission-point:hover {
    background: rgba(35, 40, 50, 0.9);
}

body.dark-mode .urgency-message {
    background: linear-gradient(135deg, rgba(229, 57, 53, 0.2), rgba(198, 40, 40, 0.1));
}

body.dark-mode .founder-story {
    background: linear-gradient(135deg, rgba(107, 138, 170, 0.15), rgba(122, 132, 113, 0.1));
    border-color: rgba(107, 138, 170, 0.3);
}

body.dark-mode .founder-quote {
    background: rgba(30, 35, 45, 0.8);
}

/* === ABOUT PAGE DARK MODE === */
body.dark-mode .mission-statement {
    background: rgba(20, 25, 35, 0.95);
    border-color: rgba(229, 57, 53, 0.3);
}

body.dark-mode .principle, 
body.dark-mode .why-item {
    background: rgba(30, 35, 45, 0.8);
    border-color: rgba(107, 138, 170, 0.3);
}

body.dark-mode .principle:hover, 
body.dark-mode .why-item:hover {
    background: rgba(35, 40, 50, 0.9);
}

body.dark-mode .why-choose {
    background: linear-gradient(135deg, rgba(107, 138, 170, 0.15), rgba(122, 132, 113, 0.1));
    border-color: rgba(107, 138, 170, 0.3);
}

body.dark-mode .founder-profile {
    background: rgba(20, 25, 35, 0.95);
    border-color: rgba(139, 90, 92, 0.3);
}

body.dark-mode .origin-story {
    background: linear-gradient(135deg, rgba(229, 57, 53, 0.2), rgba(198, 40, 40, 0.1));
}

body.dark-mode .origin-story blockquote {
    background: rgba(30, 35, 45, 0.8);
}

/* === REQUEST PAGE DARK MODE === */
body.dark-mode .realtime-network-header {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.8), rgba(185, 28, 28, 0.7));
    border-color: rgba(220, 38, 38, 0.4);
}

body.dark-mode .process-step {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .process-step:hover {
    background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .urgency-item {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .urgency-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* === REGISTRATION JUSTIFICATION DARK MODE === */
body.dark-mode .justification-card {
    background: rgba(20, 25, 35, 0.95);
    border-color: rgba(220, 38, 38, 0.3);
}

body.dark-mode .justification-item {
    background: rgba(30, 35, 45, 0.8);
    border-color: rgba(220, 38, 38, 0.2);
}

body.dark-mode .justification-item:hover {
    background: rgba(35, 40, 50, 0.9);
}

body.dark-mode .recipient-insight {
    background: linear-gradient(135deg, rgba(107, 138, 170, 0.2), rgba(122, 132, 113, 0.1));
    border-color: rgba(107, 138, 170, 0.3);
}

body.dark-mode .category {
    background: rgba(30, 35, 45, 0.6);
    border-color: rgba(220, 38, 38, 0.2);
}

/* === CHOICE BUTTONS DARK MODE === */
/* Dark mode emergency button styles */
body.dark-mode .emergency-btn { 
    background: transparent !important; 
    border: 3px solid var(--red-medium) !important; 
    color: var(--red-light) !important; 
    box-shadow: 0 0 20px rgba(255, 107, 107, 0.3) !important; 
}

body.dark-mode .emergency-btn::before { 
    background: linear-gradient(135deg, var(--red-medium), var(--red-bright)) !important; 
}

body.dark-mode .emergency-btn:hover { 
    color: var(--white) !important; 
    border-color: var(--red-medium-light) !important; 
    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.6) !important; 
}

/* Dark mode hero button styles */
body.dark-mode .hero-btn { 
    background: transparent !important; 
    border: 3px solid var(--accent-light) !important; 
    color: var(--accent-light) !important; 
    box-shadow: 0 0 20px rgba(38, 166, 154, 0.3) !important; 
}

body.dark-mode .hero-btn::before { 
    background: linear-gradient(135deg, var(--accent-light), var(--accent-color)) !important; 
}

body.dark-mode .hero-btn:hover { 
    color: var(--white) !important; 
    border-color: var(--accent-color) !important; 
    box-shadow: 0 15px 40px rgba(38, 166, 154, 0.6) !important; 
}