@layer utilities {
    .neon-text {
        text-shadow: 0 0 10px rgb(16 185 129),
                     0 0 20px rgb(16 185 129);
    }

    .article-card {
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .article-card:hover {
        transform: translateY(-8px);
    }

    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ====================== ПЕРЕМЕННЫЕ ====================== */
:root {
    --bg: #0a0a0a;
    --card-bg: #111111;
    --text: #e0e0e0;
    --text-muted: #a3a3a3;
    --accent: #10b981;
    --border: #27272a;
    --menu-text: #e0e0e0;
}

.light {
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --text: #1f2937;
    --menu-text: #e0e0e0;
    --text-muted: #64748b;
    --accent: #10b981;
    --border: #e5e7eb;
    --tag-bg: #e0f2fe;
    --tag-text: #0e7490;
}

/* Применяем переменные с приоритетом */
body {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}

/* Карточки */
.article-card {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
}

/* Hover */
.article-card:hover {
    box-shadow: 0 20px 25px -5px rgb(16 185 129 / 0.1),
                0 8px 10px -6px rgb(16 185 129 / 0.1) !important;
}

/* Neon */
.dark .neon-text {
    text-shadow: 0 0 10px rgb(16 185 129),
                 0 0 20px rgb(16 185 129);
}

/* Светлая тема — заголовки */
.light .prose h2,
.light h2 {
    color: #1f3731 !important;
}

/* Дополнительно для светлой темы */
.light .article-card:hover {
    box-shadow: 0 20px 25px -5px rgb(16 185 129 / 0.15),
                0 8px 10px -6px rgb(16 185 129 / 0.1) !important;
}

/* Мобильная шапка */
@media (max-width: 768px) {
    nav .text-2xl {
        font-size: 1.35rem;
    }
}

/* Мобильное меню */
#mobile-menu {
    background-color: var(--bg) !important;
    border-color: var(--border) !important;
}

/* Теги */
.tag, .article-tag {
    background-color: var(--tag-bg) !important;
    color: var(--tag-text) !important;
    border: 1px solid var(--border) !important;
}

/* Table of Contents */
.toc {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
}
.toc a {
    color: var(--text) !important;
}

/* Блоки кода <pre><code> */
pre, code, .prose pre {
    background-color: var(--card-bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

/* Заголовки */
/* h1, h2, h3, h4, .prose h1, .prose h2, .prose h3 {
    color: var(--text) !important;
} */

/* ==================== МЕНЮ В ШАПКЕ ==================== */

/* Desktop Menu - Light theme */
.light .hidden.md\\:flex.items-center.gap-8 a {
    color: #cfd8e3 !important;
}

.light .hidden.md\\:flex.items-center.gap-8 a:hover {
    color: #10b981 !important;
}

/* Mobile Menu Button - Light theme */
.light #mobile-menu-btn {
    color: #dde7f4 !important;
}

/* Mobile Menu itself - Light theme */
.light #mobile-menu {
    background-color: #ffffff !important;
    border-color: #e5e7eb !important;
    color: #1f2937 !important;
}

.light #mobile-menu a {
    color: #1f2937 !important;
}

.light #mobile-menu a:hover {
    color: #10b981 !important;
}

/* ====================== ТЕГИ (неоновый стиль) ====================== */
.tag {
    background-color: var(--tag-bg);
    color: var(--tag-text);
    border: 1px solid var(--tag-border);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.15);
    transition: all 0.3s ease;
}

.tag:hover {
    background-color: var(--tag-hover-bg);
    color: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

/* ====================== ТЁМНАЯ ТЕМА — НЕОН ====================== */
.dark .tag {
    --tag-bg: #1a1a1a;
    --tag-text: #34d399;
    --tag-border: #27272a;
    --tag-hover-bg: #10b981;
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

/* ====================== СВЕТЛАЯ ТЕМА ====================== */
.light .tag {
    --tag-bg: #f1f5f9;
    --tag-text: #166534;
    --tag-border: #cbd5e1;
    --tag-hover-bg: #10b981;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}