/* === THEMES.CSS ===
   assets/css/themes.css
   НАЗНАЧЕНИЕ: 3 эстетики (bloom/nature/minimal) x 2 режима (dark/light) = 6 комбинаций
   Палитра: теплая, мамская, органическая
   СВЯЗИ: main.css (:root = bloom-dark дефолт), index.php (FOUC prevention)
   РАЗМЕР: ~250 строк */

/* ============================================
   BLOOM LIGHT
   Розово-кремовые оттенки, розово-лавандовый accent
   ============================================ */
html.theme-bloom.light-theme {
    --bg-primary: hsl(340, 40%, 97%);
    --bg-secondary: hsl(340, 30%, 100%);
    --bg-tertiary: hsl(340, 25%, 94%);
    --card-bg: hsl(0, 0%, 100%);
    --border-color: hsl(340, 20%, 88%);
    --border-color-light: hsl(340, 15%, 92%);
    --hover-bg: hsl(340, 15%, 95%);
    --bg-input: hsl(340, 20%, 97%);
    --text-primary: hsl(340, 15%, 15%);
    --text-secondary: hsl(340, 8%, 40%);
    --text-muted: hsl(340, 5%, 60%);
    --color-primary: hsl(340, 60%, 55%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ============================================
   NATURE DARK
   Зелено-коричневый, естественный, землистый
   ============================================ */
html.theme-nature {
    --bg-primary: hsl(150, 6%, 5%);
    --bg-secondary: hsl(150, 5%, 10%);
    --bg-tertiary: hsl(150, 4%, 16%);
    --card-bg: hsl(150, 5%, 12%);
    --border-color: hsl(150, 6%, 22%);
    --border-color-light: hsl(150, 4%, 15%);
    --hover-bg: hsl(150, 5%, 16%);
    --bg-input: hsl(150, 5%, 7%);
    --color-primary: hsl(155, 75%, 45%);
    --color-secondary: hsl(30, 70%, 58%);
    --color-info: hsl(200, 65%, 55%);
    --color-primary-bg: hsla(155, 75%, 45%, 0.18);
    --gradient-primary: linear-gradient(135deg, hsl(155,75%,45%), hsl(30,70%,58%));
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* ============================================
   NATURE LIGHT
   ============================================ */
html.theme-nature.light-theme {
    --bg-primary: hsl(140, 25%, 96%);
    --bg-secondary: hsl(140, 18%, 92%);
    --bg-tertiary: hsl(140, 15%, 88%);
    --card-bg: hsl(0, 0%, 100%);
    --border-color: hsl(140, 12%, 82%);
    --border-color-light: hsl(140, 10%, 88%);
    --hover-bg: hsl(140, 14%, 91%);
    --bg-input: hsl(140, 18%, 97%);
    --text-primary: hsl(150, 15%, 12%);
    --text-secondary: hsl(150, 8%, 35%);
    --text-muted: hsl(150, 5%, 55%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ============================================
   MINIMAL DARK
   Персиковый/коралловый, теплый
   ============================================ */
html.theme-minimal {
    --bg-primary: hsl(25, 6%, 5%);
    --bg-secondary: hsl(25, 5%, 10%);
    --bg-tertiary: hsl(25, 4%, 16%);
    --card-bg: hsl(25, 5%, 12%);
    --border-color: hsl(25, 6%, 22%);
    --border-color-light: hsl(25, 4%, 15%);
    --hover-bg: hsl(25, 5%, 16%);
    --bg-input: hsl(25, 5%, 7%);
    --color-primary: hsl(15, 90%, 62%);
    --color-secondary: hsl(35, 75%, 58%);
    --color-info: hsl(200, 60%, 55%);
    --color-primary-bg: hsla(15, 90%, 62%, 0.18);
    --gradient-primary: linear-gradient(135deg, hsl(15,90%,62%), hsl(35,75%,58%));
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
}

/* ============================================
   MINIMAL LIGHT
   Персиково-кремовый
   ============================================ */
html.theme-minimal.light-theme {
    --bg-primary: hsl(30, 35%, 97%);
    --bg-secondary: hsl(30, 25%, 100%);
    --bg-tertiary: hsl(30, 20%, 94%);
    --card-bg: hsl(0, 0%, 100%);
    --border-color: hsl(25, 15%, 88%);
    --border-color-light: hsl(25, 12%, 92%);
    --hover-bg: hsl(25, 12%, 95%);
    --bg-input: hsl(30, 20%, 97%);
    --text-primary: hsl(25, 15%, 15%);
    --text-secondary: hsl(25, 8%, 40%);
    --text-muted: hsl(25, 5%, 55%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ============================================
   GENERIC LIGHT-THEME FALLBACK
   ============================================ */
html.light-theme {
    --bg-primary: hsl(340, 40%, 97%);
    --bg-secondary: hsl(340, 30%, 100%);
    --bg-tertiary: hsl(340, 25%, 94%);
    --card-bg: hsl(0, 0%, 100%);
    --border-color: hsl(340, 20%, 88%);
    --border-color-light: hsl(340, 15%, 92%);
    --hover-bg: hsl(340, 15%, 95%);
    --bg-input: hsl(340, 20%, 97%);
    --text-primary: hsl(340, 15%, 15%);
    --text-secondary: hsl(340, 8%, 40%);
    --text-muted: hsl(340, 5%, 60%);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* ============================================
   ПЕРЕКЛЮЧАТЕЛЬ ЭСТЕТИКИ (Theme Switcher)
   ============================================ */
.zk-theme-switcher {
    display: flex;
    gap: 2px;
    margin-right: 8px;
}

.zk-theme-chip {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
    font-family: inherit;
}

.zk-theme-chip:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.zk-theme-chip.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}