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

/* ============================================
   COSMIC LIGHT
   Лавандовые оттенки, розово-красный accent
   ============================================ */
html.theme-cosmic.light-theme {
    --bg-primary: #f0eef5;
    --bg-secondary: #e5e1f0;
    --bg-tertiary: #d8d3e8;
    --card-bg: #ffffff;
    --border-color: rgba(0, 0, 0, 0.1);
    --border-color-light: rgba(0, 0, 0, 0.05);
    --hover-bg: #ebe8f2;
    --bg-input: #f5f3fa;
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a5a;
    --text-muted: #8a8a9a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* ============================================
   TERMINAL DARK
   Холодный индиго, зеленый accent, острые углы
   ============================================ */
html.theme-terminal {
    --bg-primary: hsl(220, 15%, 6%);
    --bg-secondary: hsl(220, 14%, 9%);
    --bg-tertiary: hsl(220, 12%, 14%);
    --card-bg: hsl(220, 12%, 11%);
    --border-color: hsl(220, 10%, 18%);
    --border-color-light: hsl(220, 10%, 13%);
    --hover-bg: hsl(220, 12%, 14%);
    --bg-input: hsl(220, 12%, 8%);
    --color-primary: #10b981;
    --color-secondary: #34d399;
    --color-info: #3b82f6;
    --color-primary-bg: hsla(160, 60%, 45%, 0.15);
    --gradient-primary: linear-gradient(135deg, #10b981, #34d399);
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
}

/* ============================================
   TERMINAL LIGHT
   ============================================ */
html.theme-terminal.light-theme {
    --bg-primary: hsl(220, 15%, 96%);
    --bg-secondary: hsl(220, 12%, 93%);
    --bg-tertiary: hsl(220, 10%, 88%);
    --card-bg: #ffffff;
    --border-color: hsl(220, 10%, 80%);
    --border-color-light: hsl(220, 10%, 88%);
    --hover-bg: hsl(220, 12%, 91%);
    --bg-input: hsl(220, 12%, 95%);
    --text-primary: hsl(220, 15%, 10%);
    --text-secondary: hsl(220, 8%, 35%);
    --text-muted: hsl(220, 5%, 55%);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.09);
}

/* ============================================
   CORPORATE DARK
   Индиго, синий accent, шрифт Inter
   ============================================ */
html.theme-corporate {
    --bg-primary: hsl(220, 13%, 8%);
    --bg-secondary: hsl(220, 13%, 11%);
    --bg-tertiary: hsl(220, 13%, 15%);
    --card-bg: hsl(220, 13%, 10%);
    --border-color: hsl(220, 10%, 18%);
    --border-color-light: hsl(220, 10%, 13%);
    --hover-bg: hsl(220, 13%, 13%);
    --bg-input: hsl(220, 13%, 7%);
    --color-primary: #3b82f6;
    --color-secondary: #6366f1;
    --color-info: #60a5fa;
    --color-primary-bg: hsla(217, 91%, 60%, 0.15);
    --gradient-primary: linear-gradient(135deg, #3b82f6, #6366f1);
    --font-sans: 'Inter', system-ui, sans-serif;
}

/* ============================================
   CORPORATE LIGHT
   ============================================ */
html.theme-corporate.light-theme {
    --bg-primary: hsl(220, 20%, 97%);
    --bg-secondary: hsl(220, 15%, 94%);
    --bg-tertiary: hsl(220, 12%, 90%);
    --card-bg: #ffffff;
    --border-color: hsl(220, 15%, 82%);
    --border-color-light: hsl(220, 15%, 90%);
    --hover-bg: hsl(220, 15%, 92%);
    --bg-input: hsl(220, 15%, 96%);
    --text-primary: hsl(220, 20%, 12%);
    --text-secondary: hsl(220, 10%, 35%);
    --text-muted: hsl(220, 8%, 55%);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* ============================================
   GENERIC LIGHT-THEME FALLBACK
   Если нет theme-X класса, но есть light-theme
   ============================================ */
html.light-theme {
    --bg-primary: #f0eef5;
    --bg-secondary: #e5e1f0;
    --bg-tertiary: #d8d3e8;
    --card-bg: #ffffff;
    --border-color: rgba(0, 0, 0, 0.1);
    --border-color-light: rgba(0, 0, 0, 0.05);
    --hover-bg: #ebe8f2;
    --bg-input: #f5f3fa;
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a5a;
    --text-muted: #8a8a9a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px 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);
}