@import url('../vendor/fonts/fonts.css');

/* ============================================================
   Дизайн-токены. Три режима: light (по умолчанию), dark (авто по
   системной теме), и явный выбор через [data-theme] на <html>.
   ============================================================ */

:root {
    --bg: #f7f6fb;
    --surface: #ffffff;
    --surface-2: #f1eefc;
    --surface-3: #ede9fb;
    --border: #e3e0ee;
    --border-strong: #cfc9e6;

    --text: #1c1826;
    --text-muted: #6b6478;
    --text-faint: #948da3;

    --accent: #7c5cfc;
    --accent-hover: #6d4cf0;
    --accent-active: #5d3ce0;
    --accent-contrast: #ffffff;
    --accent-soft: #ede7ff;
    --accent-soft-strong: #ddd2ff;

    --danger: #dc4a4a;
    --danger-hover: #c23a3a;
    --danger-soft: #fdeaea;

    --success: #159873;
    --success-hover: #0f7e5f;
    --success-soft: #e3f7ef;

    --warning: #c9790a;
    --warning-hover: #a86308;
    --warning-soft: #fbf0dc;

    --shadow: rgba(30, 20, 60, 0.08);
    --shadow-strong: rgba(30, 20, 60, 0.16);
    --overlay: rgba(28, 24, 38, 0.45);

    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-display: 'Manrope', 'Inter', sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0a0a12;
        --surface: #14141f;
        --surface-2: #1c1c2c;
        --surface-3: #242438;
        --border: rgba(255, 255, 255, 0.09);
        --border-strong: rgba(255, 255, 255, 0.18);

        --text: #f0f0f5;
        --text-muted: #a5a5b8;
        --text-faint: #6b6b7d;

        --accent: #8b5cf6;
        --accent-hover: #a78bfa;
        --accent-active: #7c3aed;
        --accent-contrast: #ffffff;
        --accent-soft: rgba(139, 92, 246, 0.16);
        --accent-soft-strong: rgba(139, 92, 246, 0.28);

        --danger: #f87171;
        --danger-hover: #fca5a5;
        --danger-soft: rgba(248, 113, 113, 0.14);

        --success: #34d399;
        --success-hover: #6ee7b7;
        --success-soft: rgba(52, 211, 153, 0.14);

        --warning: #fbbf24;
        --warning-hover: #fcd34d;
        --warning-soft: rgba(251, 191, 36, 0.14);

        --shadow: rgba(0, 0, 0, 0.35);
        --shadow-strong: rgba(0, 0, 0, 0.55);
        --overlay: rgba(5, 5, 10, 0.6);
    }
}

:root[data-theme="dark"] {
    --bg: #0a0a12;
    --surface: #14141f;
    --surface-2: #1c1c2c;
    --surface-3: #242438;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);

    --text: #f0f0f5;
    --text-muted: #a5a5b8;
    --text-faint: #6b6b7d;

    --accent: #8b5cf6;
    --accent-hover: #a78bfa;
    --accent-active: #7c3aed;
    --accent-contrast: #ffffff;
    --accent-soft: rgba(139, 92, 246, 0.16);
    --accent-soft-strong: rgba(139, 92, 246, 0.28);

    --danger: #f87171;
    --danger-hover: #fca5a5;
    --danger-soft: rgba(248, 113, 113, 0.14);

    --success: #34d399;
    --success-hover: #6ee7b7;
    --success-soft: rgba(52, 211, 153, 0.14);

    --warning: #fbbf24;
    --warning-hover: #fcd34d;
    --warning-soft: rgba(251, 191, 36, 0.14);

    --shadow: rgba(0, 0, 0, 0.35);
    --shadow-strong: rgba(0, 0, 0, 0.55);
    --overlay: rgba(5, 5, 10, 0.6);
}

html {
    background: var(--bg);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}

.lms {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
}

.lms h1, .lms h2, .lms h3, .lms h4, .lms h5, .lms h6 {
    font-family: var(--font-display);
}

.lms-left {
    background: var(--surface);
}

.lms-header {
    background: var(--bg);
}

/* ============================================================
   Переключатель темы
   ============================================================ */

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.theme-switch__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background-color 0.15s, color 0.15s;
}

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

.theme-switch__btn.is-active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 3px var(--shadow);
}