/* Color Scheme - Light and Dark Mode Support */

h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
    color: #333333;
}

body {
    background-color: #f5f5f5;
}

svg {
    fill: #4d75ce;
}

.lm-info-block,
.project-info-block {
    background-color: #fcfcfc;
    border-color: #e5e5e5;
}

.btn-primary,
.btn-secondary,
.back-link,
.app-link-button {
    border: 4px solid #4d75ce;
    background-color: #fff;
    color: #333;
}

.btn-primary:hover,
.btn-primary:focus,
button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.back-link:hover,
.app-link-button:hover {
    background-color: #4d75ce;
    color: #fff;
    border: 4px solid #4d75ce;
    box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.22);
}

.btn-secondary {
    border-color: #d5d5d5;
    background-color: #fff;
    color: #666;
}

.btn-secondary:hover,
.btn-secondary:focus {
    color: #333;
    border-color: #d5d5d5;
    background-color: #d5d5d5;
}

.content {
    background-color: #fff;
}

/* Header - light mode: light background with dark text */
.header {
    background-color: #fff !important;
    color: #333333;
    border-bottom: 2px solid #e5e5e5;
}

.header h1,
.header h2,
.header h3,
.header h4,
.header h5,
.header h6,
.header p {
    color: #333333 !important;
}

.header a {
    color: #333333;
}

/* Footer - light mode: light background with dark text */
.footer {
    background-color: #fff !important;
    color: #333333;
    border-top: 2px solid #e5e5e5;
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer p {
    color: #333333 !important;
}

.footer a {
    color: #333333 !important;
}

.app-card,
.feature-card,
.highlight-box,
.tech-details {
    background-color: #fff;
    border-color: #e5e5e5;
}

.block-title h4::after,
.content h2::after {
    background-color: #4d75ce;
}

@media (prefers-color-scheme: dark) {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a {
        color: #f5f5f5;
    }

    body {
        background-color: #1b1c1d;
    }

    .site-footer,
    .footer {
        border-top: 2px solid #444;
    }

    .lm-info-block,
    .project-info-block,
    .content,
    .app-card,
    .feature-card,
    .highlight-box,
    .tech-details {
        background-color: #404141;
        border-color: #5e5f5f;
    }

    .btn-secondary {
        border-color: #d5d5d5;
        background-color: #fff;
        box-shadow: 0px 10px 10px -8px #4d4d4d;
        color: #666;
    }

    .btn-secondary:hover,
    .btn-secondary:focus {
        color: #333;
        border-color: #d5d5d5;
        background-color: #d5d5d5;
    }

    .btn-primary,
    .back-link,
    .app-link-button {
        background-color: #fff;
        color: #1b1c1d;
    }

    .btn-primary:hover,
    .btn-primary:focus,
    .back-link:hover,
    .app-link-button:hover {
        border-color: #4d75ce;
        background-color: #4d75ce;
        color: #fff;
    }

    /* Header - dark mode: dark background with light text */
    .header {
        background-color: #2a2b2c !important;
        color: #f5f5f5;
        border-bottom: 2px solid #444;
    }

    .header h1,
    .header h2,
    .header h3,
    .header h4,
    .header h5,
    .header h6,
    .header p {
        color: #f5f5f5 !important;
    }

    .header a {
        color: #f5f5f5;
    }

    /* Footer - dark mode: dark background with light text */
    .footer {
        background-color: #2a2b2c !important;
        color: #f5f5f5;
        border-top: 2px solid #444;
    }

    .footer h1,
    .footer h2,
    .footer h3,
    .footer h4,
    .footer h5,
    .footer h6,
    .footer p {
        color: #f5f5f5 !important;
    }

    .footer a {
        color: #f5f5f5 !important;
    }

    .project-info-block {
        box-shadow: 0 12px 17px rgba(0, 0, 0, 0.06);
        background-color: #404141;
    }
}