/*
 * 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;
    --category-label-color: #111827;

    /* 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;
    --category-label-color: #FFFFFF;

    /* 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 */
/* Hide/show icons based on theme */
[data-theme="dark"] #theme-toggle .icon-sun {
    display: block;
}

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

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

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

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

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

/*
 * Inline Style Overrides
 * Para contenido con estilos inline que no puede ser modificado directamente
 * (plugins, contenido legacy, embeds de terceros)
 */

/* Recuadros de texto con estilos inline - forzar legibilidad */
div[style*="background-color: #f9f9f9"],
div[style*="border-left: 5px solid #0073e6"],
div[style*="max-width: 600px"],
div[style*="border: 2px solid #ddd"] {
    background-color: #f9f9f9 !important;
    color: #000000 !important;
}

/* Texto dentro de recuadros con estilos inline */
div[style*="background-color: #f9f9f9"] *,
div[style*="border-left: 5px solid #0073e6"] *,
div[style*="max-width: 600px"] *,
div[style*="border: 2px solid #ddd"] * {
    color: #000000 !important;
}

/* Botones sociales con fondos claros - texto siempre legible */
a[style*="background-color: #e0f7fa"],
a[style*="background-color: #e3f2fd"],
a[style*="background-color: #e8f0fe"],
a[style*="background-color: #fff0f6"] {
    color: #000000 !important;
}

/* Texto dentro de botones sociales */
a[style*="background-color: #e0f7fa"] *,
a[style*="background-color: #e3f2fd"] *,
a[style*="background-color: #e8f0fe"] *,
a[style*="background-color: #fff0f6"] * {
    color: #000000 !important;
}