/* ==========================================================================
   Theme: Dark Mode
   Dark background with warm accents - easy on the eyes
   ========================================================================== */

:root {
    /* Primary Colors */
    --color-primary: #F59E0B;
    --color-primary-dark: #D97706;
    --color-primary-light: #FBBF24;

    /* Secondary Colors */
    --color-secondary: #10B981;
    --color-secondary-dark: #059669;
    --color-secondary-light: #34D399;

    /* Accent */
    --color-accent: #F472B6;

    /* Dark/Light - Inverted for dark mode */
    --color-dark: #F9FAFB;
    --color-dark-light: #F3F4F6;
    --color-light: #1F2937;
    --color-white: #111827;

    /* Grays - inverted for dark mode */
    --color-gray-100: #1F2937;
    --color-gray-200: #374151;
    --color-gray-300: #4B5563;
    --color-gray-400: #6B7280;
    --color-gray-500: #9CA3AF;
    --color-gray-600: #D1D5DB;
    --color-gray-700: #E5E7EB;
    --color-gray-800: #F3F4F6;
    --color-gray-900: #F9FAFB;
}

/* Dark mode specific overrides */
body {
    background-color: #111827;
    color: #F9FAFB;
}

.header {
    background-color: #1F2937;
    border-bottom-color: #374151;
}

.footer {
    background-color: #1F2937;
}

.card,
.feature-card,
.way-card,
.stat-card {
    background-color: #1F2937;
    border-color: #374151;
}

.section--alt {
    background-color: #1F2937;
}

.page-header {
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
}

/* Form elements */
input,
textarea,
select {
    background-color: #1F2937;
    border-color: #374151;
    color: #F9FAFB;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
}

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

a:hover {
    color: var(--color-primary);
}

/* Breadcrumbs */
.breadcrumbs a {
    color: #9CA3AF;
}

.breadcrumbs span {
    color: #6B7280;
}

/* Tables */
table {
    border-color: #374151;
}

th {
    background-color: #1F2937;
}

td {
    border-color: #374151;
}

tr:hover {
    background-color: #374151;
}

/* CTA sections */
.cta-section {
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
}

/* Info boxes */
.info-box,
.tip-box,
.warning-box {
    background-color: #1F2937;
    border-color: #374151;
}

/* Blockquotes */
blockquote {
    background-color: #1F2937;
    border-left-color: var(--color-primary);
}

/* Code blocks */
code,
pre {
    background-color: #374151;
    color: #F9FAFB;
}