/* === THEMES.CSS ===
   assets/css/themes.css
   НАЗНАЧЕНИЕ: 3 эстетики (cosmic/terminal/corporate) x 2 режима (dark/light) = 6 комбинаций
   СВЯЗИ: main.css (:root = cosmic-dark дефолт), index.php (FOUC prevention)
   ОБНОВЛЕНО: 2026-03-25 - Миграция HSL/hex/rgba -> OKLCH
   РАЗМЕР: ~180 строк */

/* ============================================
   COSMIC LIGHT
   Лавандовые оттенки, розово-красный accent
   ============================================ */
html.theme-cosmic.light-theme {
    --bg-primary: oklch(93% 0.02 280);
    --bg-secondary: oklch(89% 0.02 280);
    --bg-tertiary: oklch(83% 0.03 280);
    --card-bg: oklch(100% 0 0);
    --border-color: oklch(0% 0 0 / 0.12);
    --border-color-light: oklch(0% 0 0 / 0.06);
    --hover-bg: oklch(92% 0.02 280);
    --bg-input: oklch(96% 0.01 280);
    --text-primary: oklch(14% 0.02 260);
    --text-secondary: oklch(32% 0.02 260);
    --text-muted: oklch(55% 0.01 260);
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08);
    --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.1);
    --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.12);
}

/* ============================================
   TERMINAL DARK
   Холодный индиго, зеленый accent, острые углы
   Увеличен контраст: bg 4% -> card 12% -> tertiary 18%
   ============================================ */
html.theme-terminal {
    --bg-primary: oklch(6% 0.02 250);
    --bg-secondary: oklch(10% 0.02 250);
    --bg-tertiary: oklch(20% 0.02 250);
    --card-bg: oklch(14% 0.02 250);
    --border-color: oklch(25% 0.01 250);
    --border-color-light: oklch(17% 0.01 250);
    --hover-bg: oklch(19% 0.02 250);
    --bg-input: oklch(8% 0.02 250);
    --color-primary: oklch(70% 0.18 160);
    --color-secondary: oklch(78% 0.16 165);
    --color-info: oklch(62% 0.20 260);
    --color-primary-bg: oklch(70% 0.18 160 / 0.15);
    --gradient-primary: linear-gradient(135deg, oklch(70% 0.18 160), oklch(78% 0.16 165));
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.4);
    --shadow-md: 0 4px 8px -1px oklch(0% 0 0 / 0.4);
    --shadow-lg: 0 10px 20px -3px oklch(0% 0 0 / 0.5);
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
}

/* ============================================
   TERMINAL LIGHT
   ============================================ */
html.theme-terminal.light-theme {
    --bg-primary: oklch(95% 0.01 250);
    --bg-secondary: oklch(92% 0.01 250);
    --bg-tertiary: oklch(86% 0.01 250);
    --card-bg: oklch(100% 0 0);
    --border-color: oklch(78% 0.01 250);
    --border-color-light: oklch(87% 0.01 250);
    --hover-bg: oklch(90% 0.01 250);
    --bg-input: oklch(96% 0.01 250);
    --text-primary: oklch(12% 0.02 250);
    --text-secondary: oklch(35% 0.01 250);
    --text-muted: oklch(52% 0.01 250);
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08);
    --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.1);
    --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.12);
}

/* ============================================
   CORPORATE DARK
   Индиго, синий accent, шрифт Inter
   Увеличен контраст: bg 5% -> card 12% -> tertiary 18%
   ============================================ */
html.theme-corporate {
    --bg-primary: oklch(7% 0.02 250);
    --bg-secondary: oklch(11% 0.02 250);
    --bg-tertiary: oklch(20% 0.02 250);
    --card-bg: oklch(14% 0.02 250);
    --border-color: oklch(25% 0.01 250);
    --border-color-light: oklch(17% 0.01 250);
    --hover-bg: oklch(18% 0.02 250);
    --bg-input: oklch(8% 0.02 250);
    --color-primary: oklch(62% 0.22 260);
    --color-secondary: oklch(58% 0.24 280);
    --color-info: oklch(70% 0.15 260);
    --color-primary-bg: oklch(62% 0.22 260 / 0.15);
    --gradient-primary: linear-gradient(135deg, oklch(62% 0.22 260), oklch(58% 0.24 280));
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.4);
    --shadow-md: 0 4px 8px -1px oklch(0% 0 0 / 0.4);
    --shadow-lg: 0 10px 20px -3px oklch(0% 0 0 / 0.5);
    --font-sans: 'Inter', system-ui, sans-serif;
}

/* ============================================
   CORPORATE LIGHT
   ============================================ */
html.theme-corporate.light-theme {
    --bg-primary: oklch(95% 0.01 250);
    --bg-secondary: oklch(92% 0.01 250);
    --bg-tertiary: oklch(86% 0.01 250);
    --card-bg: oklch(100% 0 0);
    --border-color: oklch(80% 0.01 250);
    --border-color-light: oklch(88% 0.01 250);
    --hover-bg: oklch(90% 0.01 250);
    --bg-input: oklch(97% 0.005 250);
    --text-primary: oklch(14% 0.02 250);
    --text-secondary: oklch(35% 0.01 250);
    --text-muted: oklch(52% 0.01 250);
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08);
    --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.1);
    --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.12);
}

/* ============================================
   GENERIC LIGHT-THEME FALLBACK
   Если нет theme-X класса, но есть light-theme
   ============================================ */
html.light-theme {
    --bg-primary: oklch(93% 0.02 280);
    --bg-secondary: oklch(89% 0.02 280);
    --bg-tertiary: oklch(83% 0.03 280);
    --card-bg: oklch(100% 0 0);
    --border-color: oklch(0% 0 0 / 0.12);
    --border-color-light: oklch(0% 0 0 / 0.06);
    --hover-bg: oklch(92% 0.02 280);
    --bg-input: oklch(96% 0.01 280);
    --text-primary: oklch(14% 0.02 260);
    --text-secondary: oklch(32% 0.02 260);
    --text-muted: oklch(55% 0.01 260);
    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.08);
    --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.1);
    --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.12);
}

/* ============================================
   ПЕРЕКЛЮЧАТЕЛЬ ЭСТЕТИКИ (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: oklch(100% 0 0);
    border-color: var(--color-primary);
}