/* ============================================================
   base.css — базовые стили шаблона
   Тема: «Тёплый янтарь» (Warm Amber)
   Переменные, сброс, типографика, фон Vanta, контейнер main
   ============================================================ */

/* ---------- ПЕРЕМЕННЫЕ ---------- */
:root {
    --primary-gold: #FF8C00;
    --text-color-light: #F0E0D0;
    --text-color-white: #FFF8F0;
    --bg-dark-1: #120E0C;
    --bg-dark-2: #1E1815;
    --bg-dark-3: #2A221E;
    --bg-dark-4: #362E28;
    --opacity-10: rgba(255,220,180,0.07);
    --opacity-15: rgba(255,220,180,0.12);
    --opacity-20: rgba(255,220,180,0.18);
    --opacity-25: rgba(255,220,180,0.22);
    --opacity-30: rgba(255,220,180,0.28);
    --opacity-40: rgba(255,220,180,0.35);
    --card-border-color: rgba(255, 220, 180, 0.07);
    --card-glow-color-1: rgba(255, 140, 0, 0.06);
    --card-glow-color-2: rgba(255, 140, 0, 0.03);
    --card-inner-shadow: rgba(0, 0, 0, 0.35);
    --card-outer-shadow: rgba(0, 0, 0, 0.55);
}

/* ---------- СБРОС ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Тёмный фон на уровне документа — чтобы при переходе между страницами
   (до инициализации динамического фона Vanta) не мелькал белый фон. */
html {
    background-color: var(--bg-dark-2);
}

body {
    /* #1E1815 совпадает с backgroundColor динамического фона Vanta */
    background: var(--bg-dark-2);
    font-family: 'Inter', sans-serif;
    color: var(--text-color-white);
    min-height: 100vh;
    position: relative;
}

h1, h2, h3, h4, .navbar-brand, .footer-copy,
.page-title, .feature-card__title, .middle-service-title {
    font-family: 'Montserrat', sans-serif;
}

/* ---------- ФОН Vanta (динамический бэкграунд) ---------- */
#vanta-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ---------- КОНТЕНТ ПОВЕРХ ФОНА ---------- */
main {
    position: relative;
    z-index: 2;
    padding-top: 2rem;
}

/* Вариант страницы новостей: чуть меньший отступ + нижний */
main.container {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

@media (max-width: 768px) {
    main {
        padding-top: 1.5rem;
    }
}