/*
 * Dark/Light Mode System
 * Custom theme variables for fanaticosdelhardware.com
 */

/* Default theme (Dark Mode) */
:root {
    /* Backgrounds */
    --bg-primary: #212A34;
    --bg-secondary: #161D25;
    --bg-content: #212A34;
    --bg-light: #212A34;

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #F2F4F6;
    --text-dark: #212A34;
    --text-muted: #939393;

    /* Accent Colors */
    --accent-primary: #ecec00;
    --link-color: #FFFFFF;
    --border-color: #3b4252;
    --accent-green: #00d111;

    /* Menu & Navigation */
    --menu-bg: #212A34;
    --submenu-bg: #212A34;
    --menu-text: #FFFFFF;

    /* Footer */
    --footer-bg: #161D25;
    --footer-text: #FFFFFF;

    /* Card Overlays */
    --card-bg-overlay: rgba(1, 1, 1, 0.45);
    --card-text-overlay: #FFFFFF;
}

/* Light Mode */
[data-theme="light"] {
    /* Backgrounds */
    --bg-primary: #FFFFFF;
    --bg-secondary: #E5E7EB;
    /* Slightly darker for better distinction */
    --bg-content: #FFFFFF;
    --bg-light: #F9FAFB;

    /* Text Colors */
    --text-primary: #111827;
    /* Near black for better readability */
    --text-secondary: #1F2937;
    --text-dark: #111827;
    --text-muted: #4B5563;

    /* Accent Colors */
    --accent-primary: #212A34;
    --link-color: #111827;
    --border-color: #e5e5e5;
    --accent-green: #378708;

    /* Menu & Navigation */
    --menu-bg: #FFFFFF;
    --submenu-bg: #F3F4F6;
    --menu-text: #111827;

    /* Footer */
    --footer-bg: #FFFFFF;
    --footer-text: #111827;

    /* Button specific */
    --btn-icon-color: #F59E0B;
    /* Sun color */
}

[data-theme="dark"] {
    --btn-icon-color: #FCD34D;
    /* Moon color */
}

/* Smooth transitions for theme switching */
html,
body,
#header,
#subheader,
#footer,
.bg-dark,
.bg-light {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Theme Toggle Button Styles */
#theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

#theme-toggle:hover {
    opacity: 0.7;
}

#theme-toggle svg {
    width: 24px;
    height: 24px;
    stroke: var(--btn-icon-color, var(--text-primary));
    fill: none;
    transition: transform 0.3s ease;
}

[data-theme="light"] #theme-toggle svg.icon-sun {
    stroke: #F59E0B;
    /* Orange Sun */
    fill: #F59E0B;
}

[data-theme="dark"] #theme-toggle svg.icon-moon {
    stroke: #FCD34D;
    /* Yellow Moon */
    fill: #FCD34D;
}

/* Hide/show icons based on theme */
[data-theme="dark"] #theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] #theme-toggle .icon-moon {
    display: block;
}

[data-theme="light"] #theme-toggle .icon-sun {
    display: block;
}

[data-theme="light"] #theme-toggle .icon-moon {
    display: none;
}

/* Default state (dark mode) */
#theme-toggle .icon-sun {
    display: none;
}

#theme-toggle .icon-moon {
    display: block;
}