/* ============================================
   TAYSTIFY DARK MODE - MASTER OVERRIDE
   This file contains ALL dark mode styles
   Load this LAST to ensure proper overrides
   ============================================ */

/* ============================================
   CSS VARIABLES OVERRIDE - CRITICAL
   Override all CSS variables for dark mode
   ============================================ */
body.dark-mode {
    /* Dark Mode Color Variables - policies.css */
    --bg-primary: #0a0a0a !important;
    --bg-secondary: #1a1a1a !important;
    --bg-tertiary: #2a2a2a !important;
    --bg-card: #1e1e1e !important;
    --bg-card-hover: #252525 !important;
    
    --text-primary: #ffffff !important;
    --text-secondary: #e0e0e0 !important;
    --text-tertiary: #b0b0b0 !important;
    --text-light: #999999 !important;
    
    --border-color: #333333 !important;
    --border-subtle: rgba(255, 255, 255, 0.08) !important;
    
    --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.4), 0 10px 15px rgba(0, 0, 0, 0.5) !important;
    --shadow-large: 0 10px 25px rgba(0, 0, 0, 0.6), 0 20px 40px rgba(0, 0, 0, 0.7) !important;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
    
    /* Dark Mode Color Variables - styles.css */
    --background-light: #1a1a1a !important;
    --background-ultra-light: #1e1e1e !important;
    --border-light: #333333 !important;
    
    /* Brand colors stay the same */
    --primary-color: #ffb300 !important;
    --primary-hover: #e6a000 !important;
    --primary-orange: #FFB300 !important;
    --primary-orange-hover: #e6a000 !important;
    --primary-orange-glow: rgba(255, 179, 0, 0.4) !important;
}

/* ============================================
   BASE DARK MODE
   ============================================ */
body.dark-mode {
    background: #0f0f0f !important;
    color: #e5e5e5 !important;
}

/* ============================================
   TYPOGRAPHY - DARK MODE - NUCLEAR OVERRIDE
   Force EVERY text element to be light colored
   ============================================ */
body.dark-mode,
body.dark-mode * {
    color: #e0e0e0 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode h1 *,
body.dark-mode h2 *,
body.dark-mode h3 *,
body.dark-mode h4 *,
body.dark-mode h5 *,
body.dark-mode h6 * {
    color: #ffffff !important;
}

/* EXCEPTION: Keep brand orange titles in both modes */
body.dark-mode .hero-title,
body.dark-mode .hero-title * {
    color: #FFB300 !important;
}

body.dark-mode p,
body.dark-mode p *,
body.dark-mode span,
body.dark-mode div,
body.dark-mode li,
body.dark-mode ul,
body.dark-mode ol,
body.dark-mode section,
body.dark-mode article {
    color: #e0e0e0 !important;
}

body.dark-mode .policy-section-title,
body.dark-mode .policy-section-title *,
body.dark-mode .policy-title,
body.dark-mode .policy-card-title,
body.dark-mode .policy-highlights-title {
    color: #ffffff !important;
}

body.dark-mode .policy-section-content,
body.dark-mode .policy-section-content p,
body.dark-mode .policy-section-content li,
body.dark-mode .policy-description,
body.dark-mode .policy-card-summary {
    color: #e0e0e0 !important;
}

body.dark-mode .policy-callout-title {
    color: #FFB300 !important;
}

body.dark-mode .policy-callout-content {
    color: #e0e0e0 !important;
}

/* ============================================
   BACKGROUNDS - DARK MODE
   ============================================ */
body.dark-mode .navbar {
    background: rgba(15, 15, 15, 0.98) !important;
    backdrop-filter: blur(30px);
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .sidebar {
    background: #1a1a1a !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .policy-card,
body.dark-mode .floating-card {
    background: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .policy-highlights,
body.dark-mode .policy-callout {
    background: rgba(255, 179, 0, 0.05) !important;
}

body.dark-mode .how-it-works,
body.dark-mode .different-section {
    background: #1a1a1a !important;
}

body.dark-mode .policies-page {
    background-color: #0a0a0a !important;
}

/* ============================================
   FORMS & INPUTS - DARK MODE
   ============================================ */
body.dark-mode .waitlist-input-group {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .waitlist-email {
    color: #e5e5e5 !important;
    background: transparent !important;
}

body.dark-mode .waitlist-email::placeholder {
    color: #666 !important;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    color: #e5e5e5 !important;
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   BUTTONS - DARK MODE
   Keep buttons with proper contrast
   ============================================ */
body.dark-mode .nav-cta,
body.dark-mode .nav-cta *,
body.dark-mode .waitlist-submit,
body.dark-mode .waitlist-submit *,
body.dark-mode .policy-action-btn {
    background: var(--primary-color) !important;
    color: #0f0f0f !important;
}

body.dark-mode .policy-action-btn:hover,
body.dark-mode .policy-action-btn:hover * {
    background: var(--primary-color) !important;
    color: #1a1a1a !important;
}

/* ============================================
   LINKS - DARK MODE
   ============================================ */
body.dark-mode .sidebar-nav a,
body.dark-mode .nav-links a,
body.dark-mode .footer-link {
    color: #e5e5e5 !important;
}

body.dark-mode .sidebar-nav a:hover,
body.dark-mode .nav-links a:hover,
body.dark-mode .footer-link:hover {
    color: var(--primary-color) !important;
}

body.dark-mode .policy-sidebar-link {
    color: #e0e0e0 !important;
}

body.dark-mode .policy-sidebar-link.active {
    color: var(--primary-color) !important;
}

/* ============================================
   SPECIAL ELEMENTS - DARK MODE
   ============================================ */
body.dark-mode .hero-subtitle,
body.dark-mode .policies-hero-description {
    color: #b8b8b8 !important;
}

body.dark-mode .step p {
    color: #a0a0a0 !important;
}

body.dark-mode .card-meta,
body.dark-mode .policy-meta {
    color: #888 !important;
}

/* Orange text elements */
body.dark-mode .brand-name,
body.dark-mode .nav-logo h2,
body.dark-mode .page-title,
body.dark-mode .policies-hero-title,
body.dark-mode .policy-card-link,
body.dark-mode .question-arrow,
body.dark-mode .policy-callout-title {
    color: #FFB300 !important;
}

/* Links that should be orange on hover */
body.dark-mode a[href*="policy-"]::before {
    color: #FFB300 !important;
}

/* ============================================
   ICONS - DARK MODE
   Keep icons on orange backgrounds dark
   ============================================ */
body.dark-mode .policy-card-icon,
body.dark-mode .question-icon,
body.dark-mode .policy-highlights-icon {
    color: #1a1a1a !important;
}

/* ============================================
   FOOTER - DARK MODE
   ============================================ */
body.dark-mode .site-footer {
    background-color: #1a1a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .brand-tagline {
    color: #999999 !important;
}

/* ============================================
   QUESTION LINKS - DARK MODE
   ============================================ */
body.dark-mode .question-link {
    background: #1e1e1e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .question-title {
    color: #ffffff !important;
}

body.dark-mode .question-subtitle {
    color: #b0b0b0 !important;
}

/* ============================================
   RELATED POLICIES - DARK MODE
   ============================================ */
body.dark-mode .related-policy-link {
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

body.dark-mode .related-policies-title {
    color: #b0b0b0 !important;
}

/* ============================================
   CONTACT PAGE - DARK MODE
   ============================================ */
body.dark-mode .contact-page {
    background: #0f0f0f !important;
}

body.dark-mode .contact-form-card {
    background: #1e1e1e !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .form-input,
body.dark-mode .form-textarea,
body.dark-mode .form-select {
    background: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #e5e5e5 !important;
}

body.dark-mode .form-select:invalid {
    color: #999999 !important;
}

body.dark-mode .form-select:valid {
    color: #e5e5e5 !important;
}

body.dark-mode .form-input::placeholder,
body.dark-mode .form-textarea::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

body.dark-mode .form-label {
    color: #e0e0e0 !important;
}

body.dark-mode .info-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 179, 0, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .info-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 179, 0, 0.3) !important;
}

body.dark-mode .info-title {
    color: #ffffff !important;
}

body.dark-mode .info-text {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* ============================================
   ABOUT PAGE - DARK MODE
   ============================================ */
body.dark-mode .about-hero {
    background: #0f0f0f !important;
}

body.dark-mode .tech-text h2 {
    color: #ffffff !important;
}

body.dark-mode .tech-text p {
    color: #a0a0a0 !important;
}

body.dark-mode .different-card {
    background: #242424 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .different-card h3 {
    color: #ffffff !important;
}

body.dark-mode .different-card p {
    color: #b8b8b8 !important;
}