/* ==========================================================================
   THEME.CSS — ДИЗАЙН-ТОКЕНЫ
   ==========================================================================
   ЕДИНСТВЕННОЕ место, где настраивается вся тема сайта.
   Для LLM: меняйте значения ниже — весь сайт обновится автоматически.

   СТРУКТУРА:
     1. Цветовая палитра
     2. Типографика
     3. Отступы и сетка
     4. Радиусы и тени
     5. Переопределение Bootstrap
     6. Градиенты и эффекты
     7. Пользовательские компоненты (модерн/технологичный стиль)
   ========================================================================== */

/* ==========================================================================
   1. ЦВЕТОВАЯ ПАЛИТРА
   ========================================================================== */
:root {
    /* Основные цвета бренда */
    --color-primary:        #6366f1;   /* Индиго — основной акцент */
    --color-primary-dark:   #4f46e5;
    --color-primary-light:  #818cf8;
    --color-secondary:      #06b6d4;   /* Циан — вторичный акцент */
    --color-accent:         #f43f5e;   /* Розовый — редкий яркий акцент */
    --color-accent-2:       #8b5cf6;   /* Фиолетовый — дополнительный градиент */

    /* Фоны */
    --color-bg:             #f8fafc;   /* Светло-серый фон страницы */
    --color-bg-alt:         #eef2f7;   /* Альтернативный фон секций */
    --color-bg-dark:        #0f172a;   /* Тёмный фон (шапка, футер, hero) */
    --color-bg-dark-2:      #1e293b;   /* Тёмный фон карточек на тёмном */
    --color-surface:        #ffffff;   /* Фон карточек */

    /* Текст */
    --color-text:           #1e293b;   /* Основной текст */
    --color-text-muted:     #64748b;   /* Приглушённый текст */
    --color-text-light:     #f1f5f9;   /* Светлый текст на тёмном фоне */
    --color-text-light-muted: #94a3b8; /* Приглушённый светлый текст */

    /* Границы */
    --color-border:         #e2e8f0;   /* Обычная граница */
    --color-border-strong:  #cbd5e1;   /* Акцентная граница */

    /* Состояния */
    --color-success:        #10b981;
    --color-warning:        #f59e0b;
    --color-danger:         #ef4444;
    --color-info:           #3b82f6;
}

/* ==========================================================================
   2. ТИПОГРАФИКА
   ========================================================================== */
:root {
    /* Основной шрифт — современный гротеск с кириллицей */
    --font-family-base: 'Inter', 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* Шрифт для заголовков — более выразительный */
    --font-family-display: 'Unbounded', 'Inter', 'Segoe UI', sans-serif;

    /* Моноширинный — для технических элементов (теги, коды) */
    --font-family-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    /* Размеры текста */
    --font-size-xs:     0.75rem;   /* 12px */
    --font-size-sm:     0.875rem;  /* 14px */
    --font-size-base:   1rem;      /* 16px */
    --font-size-lg:     1.125rem;  /* 18px */
    --font-size-xl:     1.25rem;   /* 20px */
    --font-size-2xl:    1.5rem;    /* 24px */
    --font-size-3xl:    1.875rem;  /* 30px */
    --font-size-4xl:    2.25rem;   /* 36px */
    --font-size-5xl:    3rem;      /* 48px */

    /* Межстрочные интервалы */
    --line-height-tight:    1.2;
    --line-height-base:     1.6;
    --line-height-relaxed:  1.8;

    /* Толщины шрифта */
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-black:    800;
}

/* ==========================================================================
   3. ОТСТУПЫ И СЕТКА
   ========================================================================== */
:root {
    --spacing-1:  0.25rem;  /* 4px  */
    --spacing-2:  0.5rem;   /* 8px  */
    --spacing-3:  0.75rem;  /* 12px */
    --spacing-4:  1rem;     /* 16px */
    --spacing-5:  1.5rem;   /* 24px */
    --spacing-6:  2rem;     /* 32px */
    --spacing-7:  3rem;     /* 48px */
    --spacing-8:  4rem;     /* 64px */
    --spacing-9:  6rem;     /* 96px */

    /* Максимальная ширина контейнера */
    --container-max-width:     1280px;
    --container-max-width-narrow: 860px;
}

/* ==========================================================================
   4. РАДИУСЫ И ТЕНИ
   ========================================================================== */
:root {
    --radius-sm:    0.375rem;  /* 6px  */
    --radius-md:    0.75rem;   /* 12px */
    --radius-lg:    1.25rem;   /* 20px */
    --radius-xl:    1.75rem;   /* 28px */
    --radius-full:  9999px;

    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.08), 0 4px 6px rgba(15, 23, 42, 0.05);
    --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.10), 0 10px 10px rgba(15, 23, 42, 0.05);

    /* Тень с цветом акцента — для креативных элементов */
    --shadow-glow-primary:  0 0 20px rgba(99, 102, 241, 0.25);
    --shadow-glow-secondary: 0 0 20px rgba(6, 182, 212, 0.25);
}

/* ==========================================================================
   5. ПЕРЕОПРЕДЕЛЕНИЕ BOOTSTRAP
   ========================================================================== */
:root {
    /* Bootstrap primary (кнопки, ссылки, активные состояния) */
    --bs-primary:              var(--color-primary);
    --bs-primary-rgb:          99, 102, 241;
    --bs-secondary:            var(--color-secondary);
    --bs-secondary-rgb:        6, 182, 212;
    --bs-success:              var(--color-success);
    --bs-danger:               var(--color-danger);
    --bs-warning:              var(--color-warning);
    --bs-info:                 var(--color-info);

    /* Bootstrap body */
    --bs-body-bg:              var(--color-bg);
    --bs-body-color:           var(--color-text);
    --bs-body-font-family:     var(--font-family-base);
    --bs-body-font-size:       var(--font-size-base);
    --bs-body-font-weight:     var(--font-weight-normal);
    --bs-body-line-height:     var(--line-height-base);

    /* Bootstrap headings */
    --bs-heading-color:        var(--color-text);
    --bs-heading-font-weight:  var(--font-weight-bold);

    /* Bootstrap radius */
    --bs-border-radius:        var(--radius-md);
    --bs-border-radius-sm:     var(--radius-sm);
    --bs-border-radius-lg:     var(--radius-lg);

    /* Bootstrap link */
    --bs-link-color:           var(--color-primary);
    --bs-link-hover-color:     var(--color-primary-dark);

    /* Bootstrap nav */
    --bs-nav-link-color:       var(--color-text-muted);
    --bs-nav-link-hover-color: var(--color-primary);

    /* Bootstrap focus */
    --bs-focus-ring-color:     rgba(99, 102, 241, 0.25);
}

/* ==========================================================================
   6. ГРАДИЕНТЫ И ЭФФЕКТЫ
   ========================================================================== */
:root {
    /* Главный градиент бренда — для hero, заголовков, кнопок */
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);

    /* Дополнительный градиент — для акцентных карточек */
    --gradient-accent: linear-gradient(135deg, #f43f5e 0%, #8b5cf6 100%);

    /* Тёмный градиент — для фонов секций */
    --gradient-dark: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);

    /* Градиент для текста (креативные заголовки) */
    --gradient-text: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
    --gradient-text-accent: linear-gradient(135deg, #f43f5e 0%, #8b5cf6 100%);

    /* Скругление для «жидких» форм */
    --radius-fluid: 45% 55% 60% 40% / 40% 45% 55% 60%;

    /* Блюр для glassmorphism */
    --glass-blur: 16px;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   7. ПОЛЬЗОВАТЕЛЬСКИЕ КОМПОНЕНТЫ (МОДЕРН / ТЕХНОЛОГИЧНЫЙ СТИЛЬ)
   ========================================================================== */

/* --- Заголовки с градиентом --- */
.h-display {
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-black);
    letter-spacing: -0.02em;
    line-height: var(--line-height-tight);
    color: var(--color-bg-dark);
}

.h-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.h-gradient-accent {
    background: var(--gradient-text-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* --- Тёмная секция (hero, футер) --- */
.section-dark {
    background: var(--gradient-dark);
    color: var(--color-text-light);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
    color: var(--color-text-light);
}

/* --- Glass-карточка (стеклянный эффект на тёмном фоне) --- */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
}

/* --- Градиентная рамка-карточка --- */
.card-gradient-border {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--spacing-5);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.card-gradient-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: var(--gradient-primary);
    z-index: -1;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.card-gradient-border:hover::before {
    opacity: 1;
}

/* --- Кнопка с градиентом --- */
.btn-gradient {
    background: var(--gradient-primary);
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: var(--color-text-light);
    border: none;
    border-radius: var(--radius-full);
    padding: 0.65rem 1.75rem;
    font-weight: var(--font-weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    transition: background-position 0.4s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-gradient:hover,
.btn-gradient:focus {
    color: #ffffff;
    background-position: 100% 0%;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-primary);
}

/* --- Кнопка "контурная на тёмном" --- */
.btn-outline-glass {
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--color-text-light);
    border-radius: var(--radius-full);
    padding: 0.65rem 1.75rem;
    font-weight: var(--font-weight-medium);
    backdrop-filter: blur(4px);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-outline-glass:hover,
.btn-outline-glass:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transform: translateY(-2px);
}

/* --- Быстрая "точка-ссылка" (список источников) --- */
a.dot {
    font-size: var(--font-size-sm);
    text-decoration: none;
    border-bottom: 1px dashed var(--color-border-strong);
    color: inherit;
    transition: color 0.2s ease, border-color 0.2s ease;
}

a.dot:hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* --- Чипы-теги --- */
.chip {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    transition: all 0.2s ease;
    text-decoration: none;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.chip:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    text-decoration: none;
}

/* --- Прогресс-бары и индикаторы --- */
.indicator-bar {
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--gradient-primary);
}

/* --- Тёмная карточка книги --- */
.card-dark {
    background: var(--color-bg-dark-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-dark:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg), var(--shadow-glow-primary);
    border-color: rgba(99, 102, 241, 0.4);
}

.card-dark .card-body {
    color: var(--color-text-light);
}

.card-dark .card-title a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.card-dark .card-title a:hover {
    color: var(--color-primary-light);
}

.card-dark .card-text {
    color: var(--color-text-light-muted);
}

/* --- Светлая карточка книги --- */
.card-light {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-light:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-light);
}

/* --- Градиентная шапка карточки --- */
.card-header-gradient {
    background: var(--gradient-primary);
    color: #ffffff;
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* --- Ссылка-стрелка ("подробнее") --- */
.link-arrow {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: gap 0.2s ease;
}

.link-arrow::after {
    content: '→';
    transition: transform 0.2s ease;
}

.link-arrow:hover {
    color: var(--color-primary-dark);
    text-decoration: none;
    gap: var(--spacing-3);
}

/* --- Хлебные крошки: модерн --- */
.breadcrumb-modern {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    align-items: center;
}

.breadcrumb-modern .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
}

.breadcrumb-modern .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    color: var(--color-border-strong);
    padding: 0;
}

.breadcrumb-modern .breadcrumb-item a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-modern .breadcrumb-item a:hover {
    color: var(--color-primary);
}

.breadcrumb-modern .breadcrumb-item.active {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

/* --- Шапка сайта: стеклянная, плавающая --- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
    box-shadow: var(--shadow-md);
}

.site-header .navbar {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}

.site-header .nav-link {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    padding: 0.5rem 1.25rem;
    transition: color 0.2s ease, background 0.2s ease;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--color-primary);
    background: rgba(99, 102, 241, 0.08);
}

/* Бренд-логотип с градиентом */
.brand-logo {
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xl);
    letter-spacing: -0.02em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-decoration: none;
}

.brand-logo:hover {
    text-decoration: none;
    opacity: 0.9;
}

/* --- Шапка: лого + название --- */
.brand-header {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    text-decoration: none;
}

.brand-logo-img {
    display: inline-block;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-name {
    font-family: var(--font-family-display);
    font-weight: var(--font-weight-black);
    font-size: var(--font-size-xl);
    letter-spacing: -0.02em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1;
}

/* --- Футер: тёмный, стеклянный --- */
.site-footer {
    background: var(--gradient-dark);
    color: var(--color-text-light-muted);
    padding: var(--spacing-7) 0 var(--spacing-5);
}

.site-footer a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--color-primary-light);
}

/* --- Секция-герой с градиентным фоном --- */
.hero-modern {
    position: relative;
    background: var(--gradient-dark);
    color: var(--color-text-light);
    padding: var(--spacing-8) 0;
    overflow: hidden;
}

/* Декоративные "световые пятна" */
.hero-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, transparent 60%);
    pointer-events: none;
}

.hero-modern::after {
    content: '';
    position: absolute;
    bottom: -60%;
    left: -10%;
    width: 50%;
    height: 200%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.25) 0%, transparent 60%);
    pointer-events: none;
}

/* --- Сетка-воронка для "технологичности" (фоновый паттерн) --- */
.bg-grid-pattern {
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* --- Анимация появления --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease both;
}

/* --- Скелетон загрузки (стиль модерн) --- */
.skeleton-img,
.skeleton-text {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes skeletonPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Таблица (технологичный стиль) --- */
.table-modern {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.table-modern th {
    background: var(--color-bg-alt);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 2px solid var(--color-border);
}

.table-modern td {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.table-modern tr:last-child td {
    border-bottom: none;
}

/* --- Разделитель-градиент --- */
.divider-gradient {
    height: 4px;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-full);
    margin: var(--spacing-6) 0;
    opacity: 0.8;
}

/* --- Пагинация модерн --- */
.pagination-modern .page-link {
    border-radius: var(--radius-md);
    margin: 0 var(--spacing-1);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    padding: 0.5rem 0.9rem;
    transition: all 0.2s ease;
}

.pagination-modern .page-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.pagination-modern .page-item.active .page-link {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #ffffff;
}

/* --- Страница ошибки --- */
.error-code {
    font-size: 6rem;
    line-height: 1;
    color: var(--color-primary-light);
}

@media (max-width: 767.98px) {
    .error-code {
        font-size: 4rem;
    }
}

.error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-danger);
}

.error-message {
    padding: var(--spacing-4) var(--spacing-5);
    background: var(--color-bg-alt);
    border-left: 4px solid var(--color-danger);
    border-radius: var(--radius-md);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
    word-break: break-word;
}

/* --- Медиа-запросы: адаптивность --- */
@media (max-width: 767.98px) {
    :root {
        --font-size-4xl: 1.75rem;
        --font-size-5xl: 2.25rem;
        --spacing-8: 3rem;
        --spacing-9: 4rem;
    }

    .hero-modern {
        padding: var(--spacing-6) 0;
    }
}