/* Dark Mode Specific Styles */

/* Ensure smooth transition when toggling dark mode */
html.dark {
    color-scheme: dark;
}

html.light {
    color-scheme: light;
}

/* Dark mode transitions */
body,
header,
footer,
main {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Code blocks in dark mode */
.dark pre {
    background: #1c242c;
    border-color: #283039;
}

.dark code {
    background: #1c242c;
    color: #9dabb9;
}

/* Forms in dark mode */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="url"],
.dark input[type="password"],
.dark input[type="search"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="date"],
.dark textarea,
.dark select {
    background-color: #1c242c;
    border-color: #283039;
    color: white;
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="url"]:focus,
.dark input[type="password"]:focus,
.dark input[type="search"]:focus,
.dark input[type="number"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="date"]:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #137fec;
    ring-color: rgba(19, 127, 236, 0.3);
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #637588;
}

/* Tables in dark mode */
.dark table {
    border-color: #283039;
}

.dark th {
    background-color: #1c242c;
    border-color: #283039;
}

.dark td {
    border-color: #283039;
}

/* Blockquotes in dark mode */
.dark blockquote {
    border-left-color: #137fec;
    background-color: #1c242c;
    color: #9dabb9;
}

/* HR in dark mode */
.dark hr {
    border-color: #283039;
}

/* Selection in dark mode */
.dark ::selection {
    background-color: #137fec;
    color: white;
}

/* Links in dark mode */
.dark a {
    color: #137fec;
}

.dark a:hover {
    color: #3b9eff;
}

/* Dark mode toggle button icons */
.dark-mode-sun {
    display: none;
}

.dark .dark-mode-sun {
    display: inline-block;
}

.dark-mode-moon {
    display: inline-block;
}

.dark .dark-mode-moon {
    display: none;
}

/* Image brightness adjustment in dark mode (optional) */
.dark img:not([class*="no-filter"]) {
    /* Slightly reduce brightness for images in dark mode */
    /* filter: brightness(0.9); */
}

/* SVG colors in dark mode */
.dark svg:not([class*="no-filter"]) {
    /* filter: brightness(0.9); */
}