/* ===========================================
   Verduona Theme System
   Light mode overrides + theme toggle styles
   =========================================== */

/* Light mode variable overrides */
html.light {
    --color-bg: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #f0f0f0;
    --color-text: #111111;
    --color-text-secondary: rgba(0, 0, 0, 0.7);
    --color-text-muted: rgba(0, 0, 0, 0.5);
    --color-accent: #00a86b;
    --color-accent-hover: #00c77b;
    --color-accent-dark: #008855;
    --color-border: rgba(0, 0, 0, 0.1);
    --color-border-hover: rgba(0, 0, 0, 0.2);
}

/* Theme toggle button */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color 150ms ease-out, border-color 150ms ease-out;
}

.theme-toggle:hover {
    color: var(--color-text);
    border-color: var(--color-border-hover);
}

/* Mobile menu */
.mobile-menu {
    display: none;
}

.mobile-menu.active {
    display: flex;
}

/* Mobile touch targets — 44px minimum */
@media (max-width: 767px) {
    .nav-link,
    .mobile-menu a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Fluid typography */
h1 {
    font-size: clamp(2.25rem, 5vw + 1rem, 5rem);
}

h2 {
    font-size: clamp(1.75rem, 3vw + 0.5rem, 3.5rem);
}

/* Smooth theme transition */
html {
    transition: background-color 300ms ease-out, color 300ms ease-out;
}

body,
nav,
.product-card,
.blog-card,
footer,
section {
    transition: background-color 300ms ease-out, color 300ms ease-out, border-color 300ms ease-out;
}

/* Light mode specific adjustments */
html.light .logo-icon path {
    stroke: var(--color-accent);
}

html.light select option {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Scrollbar in light mode */
html.light ::-webkit-scrollbar-track {
    background: var(--color-bg);
}

html.light ::-webkit-scrollbar-thumb {
    background: var(--color-border-hover);
}

html.light ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Light mode text color overrides for elements using Tailwind opacity classes */
html.light .text-white\/50,
html.light .text-white\/40 {
    color: var(--color-text-muted);
}

html.light .text-white\/70 {
    color: var(--color-text-secondary);
}

/* Article body in light mode */
html.light .article-body p {
    color: var(--color-text-secondary);
}

html.light .article-body h2 {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

html.light .article-body blockquote {
    color: var(--color-text-secondary);
    background: rgba(0, 168, 107, 0.05);
}