/* Dark Mode CSS Variables and Styles */
:root {
    /* Light mode colors (default) */
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-gradient-start: #f5f7fa;
    --bg-gradient-end: #c3cfe2;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-tertiary: #888888;
    --border-color: rgba(0, 0, 0, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.15);
    --accent-primary: #4a8743;
    --accent-dark: #2d5a27;
    --accent-light: #6db65b;
    --code-bg: #2d3748;
    --code-text: #e2e8f0;
    --code-border: #4a5568;
    --highlight-bg: #e8f5e8;
    --modal-overlay: rgba(0, 0, 0, 0.5);
    --header-bg: rgba(255, 255, 255, 0.95);
    --card-bg: rgba(255, 255, 255, 0.95);
    --tech-item-bg-start: #f8f9fa;
    --tech-item-bg-end: #e9ecef;
    --tech-item-hover-start: #e8f5e8;
    --tech-item-hover-end: #f0f8f0;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode colors */
        --bg-primary: #0d0d0d;
        --bg-secondary: #1a1a1a;
        --bg-gradient-start: #0d0d0d;
        --bg-gradient-end: #1a1a1a;
        --text-primary: #f0f0f0;
        --text-secondary: #c0c0c0;
        --text-tertiary: #909090;
        --border-color: rgba(255, 255, 255, 0.15);
        --shadow-color: rgba(0, 0, 0, 0.5);
        --shadow-hover: rgba(0, 0, 0, 0.7);
        --accent-primary: #6db65b;
        --accent-dark: #4a8743;
        --accent-light: #8fc97f;
        --code-bg: #1e1e1e;
        --code-text: #f0f0f0;
        --code-border: #3a3a3a;
        --highlight-bg: #1a2a1a;
        --modal-overlay: rgba(0, 0, 0, 0.85);
        --header-bg: rgba(26, 26, 26, 0.95);
        --card-bg: rgba(26, 26, 26, 0.95);
        --tech-item-bg-start: #2a2a2a;
        --tech-item-bg-end: #1a1a1a;
        --tech-item-hover-start: #1a301a;
        --tech-item-hover-end: #2a402a;
    }
}

/* Apply CSS variables to body and main elements */
body {
    background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%) !important;
    color: var(--text-primary) !important;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Header styles */
.header {
    background: var(--header-bg) !important;
    box-shadow: 0 4px 20px var(--shadow-color) !important;
}

/* Cards and sections */
.hero-section,
.tech-section,
.feature-card,
.stat-card,
.footer,
.page-section,
.card,
.dashboard-container,
.login-container {
    background: var(--card-bg) !important;
    box-shadow: 0 8px 32px var(--shadow-color) !important;
    border: 1px solid var(--border-color) !important;
}

.feature-card:hover,
.stat-card:hover {
    box-shadow: 0 12px 40px var(--shadow-hover);
}

/* Text colors */
h1, h2, h3, h4, h5, h6,
.section-title,
.feature-title,
.page-title {
    color: var(--text-primary) !important;
}

.hero-subtitle,
.story-content,
.feature-desc,
.stat-label,
.content-text,
.last-updated {
    color: var(--text-secondary) !important;
}

.footer p {
    color: var(--text-secondary) !important;
}

.footer .tech-credits {
    color: var(--text-tertiary) !important;
}

/* Links */
a {
    color: var(--accent-primary);
}

a:hover {
    color: var(--accent-dark);
}

/* Code blocks */
code,
.code-block,
div[style*="background: #2d3748"] {
    background: var(--code-bg) !important;
    color: var(--code-text) !important;
    border: none !important;
}

/* Highlight boxes */
.highlight-box {
    background: linear-gradient(135deg, var(--highlight-bg) 0%, var(--highlight-bg) 100%) !important;
    border-left-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

/* Data list and contact info boxes */
.data-list {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.data-list ul {
    color: var(--text-secondary) !important;
}

.contact-info {
    background: var(--bg-secondary) !important;
    border-left-color: var(--accent-primary) !important;
    color: var(--text-primary) !important;
}

/* Warning box for terms page */
.warning-box {
    background: linear-gradient(135deg, #3a3320 0%, #4a4330 100%) !important;
    border-left-color: #f39c12 !important;
    color: var(--text-primary) !important;
}

@media (prefers-color-scheme: dark) {
    .warning-box {
        background: linear-gradient(135deg, #3a3320 0%, #4a4330 100%) !important;
    }
}

/* Tech items */
.tech-item {
    background: linear-gradient(135deg, var(--tech-item-bg-start) 0%, var(--tech-item-bg-end) 100%);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.tech-item:hover {
    background: linear-gradient(135deg, var(--tech-item-hover-start) 0%, var(--tech-item-hover-end) 100%);
    box-shadow: 0 6px 20px var(--shadow-color);
}

/* Modal styles */
.modal {
    background-color: var(--modal-overlay) !important;
}

.modal-content {
    background: var(--card-bg) !important;
    box-shadow: 0 20px 60px var(--shadow-color) !important;
}

.modal-body {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.modal-body p {
    color: var(--text-primary) !important;
}


/* Admin button */
.admin-link {
    background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent-primary) 50%, var(--accent-light) 100%);
}

/* Cost comparison boxes */
.cost-before {
    background: linear-gradient(135deg, #fee 0%, #fdd 100%);
    border-color: #e74c3c;
}

.cost-after {
    background: linear-gradient(135deg, #efe 0%, #dfd 100%);
    border-color: #27ae60;
}

@media (prefers-color-scheme: dark) {
    .cost-before {
        background: linear-gradient(135deg, #4a2a2a 0%, #3a2020 100%);
        border-color: #e74c3c;
    }

    .cost-after {
        background: linear-gradient(135deg, #2a4a2a 0%, #203a20 100%);
        border-color: #27ae60;
    }
}

/* Gradient text fix for dark mode */
@media (prefers-color-scheme: dark) {
    .logo,
    .hero-title,
    .stat-value,
    .page-title {
        background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-primary) 50%, var(--accent-dark) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* Input fields for admin pages */
input[type="text"],
input[type="password"],
input[type="url"],
textarea,
select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-primary);
    outline: none;
}

/* Table styles for admin dashboard */
table {
    background: var(--card-bg);
}

th {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--accent-primary) !important;
}

td {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

tr:hover {
    background: var(--highlight-bg) !important;
}

/* Card header */
.card-header {
    background: var(--bg-secondary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Form elements in dashboard */
.form-input {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 2px solid var(--border-color) !important;
}

.form-input:focus {
    border-color: var(--accent-primary) !important;
}

/* Modal styles for dashboard */
.modal-content {
    background: var(--card-bg) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-color) !important;
}

/* Success and error messages */
.success {
    background: var(--highlight-bg) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--accent-primary) !important;
}

.error {
    background: rgba(255, 100, 100, 0.1) !important;
    color: #ff6666 !important;
    border: 1px solid #ff6666 !important;
}

@media (prefers-color-scheme: dark) {
    .error {
        background: rgba(255, 100, 100, 0.2) !important;
    }
}

/* Button styles */
button:not(.theme-toggle):not(.close) {
    background: var(--accent-primary);
    color: white;
    border: 1px solid var(--accent-primary);
}

button:not(.theme-toggle):not(.close):hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
}

/* Ensure copy buttons remain visible */
button[onclick*="copy"] {
    background: var(--accent-primary) !important;
    color: white !important;
}

/* Loading spinner for dark mode */
.spinner {
    border-color: var(--border-color);
    border-top-color: var(--accent-primary);
}