/**
 * Light/Dark Mode - Global theme colors
 * Use these variables in CSS or element design: var(--site-bg), var(--site-text), etc.
 */

/* Light mode (default) */
:root,
html.color-mode-light,
body.color-mode-light {
    --site-bg: #ffffff;
    --site-bg-alt: #f8fafc;
    --site-text: #1e293b;
    --site-text-muted: #64748b;
    --site-border: #e2e8f0;
    --site-primary: #2563eb;
    --site-primary-hover: #1d4ed8;
    --site-accent: #0ea5e9;
}

/* Dark mode */
html.color-mode-dark,
body.color-mode-dark {
    --site-bg: #0f172a;
    --site-bg-alt: #1e293b;
    --site-text: #f1f5f9;
    --site-text-muted: #94a3b8;
    --site-border: #334155;
    --site-primary: #3b82f6;
    --site-primary-hover: #60a5fa;
    --site-accent: #38bdf8;
}

/* Legacy variable mapping (for backward compatibility) */
html.color-mode-dark,
body.color-mode-dark {
    --bde-background-color: var(--site-bg);
    --bde-body-text-color: var(--site-text);
    --bde-headings-color: var(--site-text);
    --bde-brand-primary-color: var(--site-primary);
    --bde-form-field-border-color: var(--site-border);
}

/* Mode switcher shortcode styles */
.bde-theme-mode-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--site-border);
    background: var(--site-bg-alt);
}

.bde-theme-mode-switcher button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--site-text);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.bde-theme-mode-switcher button:hover {
    background: var(--site-border);
}

.bde-theme-mode-switcher button.active {
    background: var(--site-primary);
    color: #fff;
}

.bde-theme-mode-switcher svg {
    width: 18px;
    height: 18px;
}