/* Dark Mode Styles */
:root {
    /* Light theme variables */
    --bg-light: #f5f7fa;
    --text-light: #333;
    --header-light: #2d3748;
    --card-light: white;
    --accent-light: #007bff;
    --accent-hover-light: #0056b3;
    --border-light: #e2e8f0;
    --input-bg-light: #f8f9fa;
    --navbar-text-light: white;
    --marketing-heading-light: #2d3748;
    
    /* Dark theme variables */
    --bg-dark: #1a202c;
    --text-dark: #e2e8f0;
    --header-dark: #f7fafc;
    --card-dark: #2d3748;
    --accent-dark: #3182ce;
    --accent-hover-dark: #4299e1;
    --border-dark: #4a5568;
    --input-bg-dark: #2d3748;
    --navbar-text-dark: #f7fafc;
    --marketing-heading-dark: #f7fafc; /* High contrast for heading in dark mode */
    
    /* Default (light) theme variables */
    --bg: var(--bg-light);
    --text: var(--text-light);
    --header: var(--header-light);
    --card: var(--card-light);
    --accent: var(--accent-light);
    --accent-hover: var(--accent-hover-light);
    --border: var(--border-light);
    --input-bg: var(--input-bg-light);
    --navbar-text: var(--navbar-text-light);
    --marketing-heading: var(--marketing-heading-light);
}

.force-dark {
    --bg: var(--bg-dark);
    --text: var(--text-dark);
    --header: var(--header-dark);
    --card: var(--card-dark);
    --accent: var(--accent-dark);
    --accent-hover: var(--accent-hover-dark);
    --border: var(--border-dark);
    --input-bg: var(--input-bg-dark);
    --navbar-text: var(--navbar-text-dark);
    --marketing-heading: var(--marketing-heading-dark);
    
    color-scheme: dark;
}

.force-light {
    --bg: var(--bg-light);
    --text: var(--text-light);
    --header: var(--header-light);
    --card: var(--card-light);
    --accent: var(--accent-light);
    --accent-hover: var(--accent-hover-light);
    --border: var(--border-light);
    --input-bg: var(--input-bg-light);
    --navbar-text: var(--navbar-text-light);
    --marketing-heading: var(--marketing-heading-light);
    
    color-scheme: light;
}

/* Now update your existing CSS to use variables */
body {
    background-color: var(--bg);
    color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--header);
}

/* Marketing section heading specific styling */
.marketing-text h1 {
    color: var(--marketing-heading);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Force a higher contrast for marketing headings in dark mode */
.force-dark .marketing-text h1 {
    color: #ffffff; /* Pure white for maximum contrast */
}

/* Navbar specific styling */
.navbar {
    background: linear-gradient(to right, var(--accent-hover), var(--accent));
    color: var(--navbar-text);
}

.navbar-brand {
    color: var(--navbar-text);
}

.theme-toggle {
    color: var(--navbar-text);
}

/* Make sure the navbar is high contrast in both modes */
.force-dark .navbar {
    background: linear-gradient(to right, #1a4a94, #2563eb);
}

.force-light .navbar {
    background: linear-gradient(to right, #0062cc, #007bff);
}

/* Marketing section in dark mode */
.force-dark .marketing {
    background: #2d3748; /* Darker background */
    border: 1px solid #4a5568; /* Add border for definition */
}

.force-dark .marketing-text p {
    color: #cbd5e0; /* Lighter text for better contrast */
}

/* Other elements */
.marketing,
.upload-section,
.map-section {
    background: var(--card);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background: linear-gradient(to right, var(--accent-hover), var(--accent));
    color: white; /* Always keep button text white for better contrast */
}

.btn-primary:hover {
    background: linear-gradient(to right, var(--accent), var(--accent-hover));
}

.drop-zone {
    border-color: var(--accent);
    background: var(--input-bg);
}

.drop-zone:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--input-bg));
    border-color: var(--accent-hover);
}

.drop-zone i {
    color: var(--accent);
}

.search-box,
.coordinates {
    background: var(--input-bg);
}

.search-box input,
.coordinate-input input {
    border-color: var(--border);
    background: var(--card);
    color: var(--text);
}

.search-box button {
    background: var(--accent);
    color: white; /* Always keep button text white for better contrast */
}

.search-box button:hover {
    background: var(--accent-hover);
}

.stat {
    background: var(--input-bg);
}

.number {
    color: var(--accent);
}

.label {
    color: var(--text);
}

/* Add text contrast to dark mode for better readability */
.force-dark .coordinate-input label {
    color: #cbd5e0; /* Lighter text in dark mode */
}

/* Preview grid images in dark mode */
.force-dark .preview-grid img {
    border-color: var(--border);
}

/* Transition for smooth theme switching */
body,
.marketing,
.upload-section,
.map-section,
.drop-zone,
.search-box,
.coordinates,
.search-box input,
.coordinate-input input,
.btn-primary,
.navbar,
.stat {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* High contrast debugging helper - uncomment if needed to troubleshoot */
/*
.force-dark .marketing-text h1 {
    outline: 2px solid red;
}
*/