/* ==========================================================================
   Переменные дизайна
   Единственное место, где заданы цвета, размеры и тени. Всё остальное
   ссылается сюда — поменять фирменный цвет можно в одной строке.
   Значения взяты из прежней темы, чтобы вид не поехал.
   ========================================================================== */

:root {
  /* ── Цвета ───────────────────────────────────────────────────────────── */
  --c-navy:        #132C4F;   /* основной тёмный: шапки, кнопки, заголовки */
  --c-cream:       #EFDABB;   /* акцент: кнопки на тёмном, подсветка */
  --c-accent:      #1F4E79;   /* синий средней светлоты: ссылки, иконки */
  --c-white:       #ffffff;
  --c-bg-light:    #F8F6F2;   /* фон светлых секций */
  --c-bg-panel:    #f3f5f8;   /* фон панелей и заглушек */
  --c-text:        #1A1A1A;
  --c-text-muted:  #6b7280;
  --c-text-soft:   #4b5563;
  --c-border:      #E5E5E5;
  --c-navy-deep:   #0b1f38;   /* нижняя точка тёмных градиентов */
  --c-red:         #C62828;   /* ошибки, срочные метки */
  --c-green:       #2E7D32;   /* успех, «сейчас открыто» */
  --c-green-on-dark: #6ee7a8; /* «сейчас открыто» на тёмном фоне */
  --c-star:        #f0a500;   /* звёзды в отзывах */

  /* Мелкие оттенки интерфейса: подложки меток, точки, разделители */
  --c-tint-blue:   #eef2f7;   /* фон нейтральной метки */
  --c-tint-red:    #fdecec;   /* фон срочной метки */
  --c-tint-green:  #e8f5e9;   /* фон успеха */
  --c-dot:         #c9d2dd;   /* неактивная точка карусели */
  --c-sep:         #b6bcc6;   /* разделитель в крошках */

  /* Тёмный фон первого экрана и баннеров — задан один раз */
  --grad-navy: linear-gradient(160deg, var(--c-navy) 0%, var(--c-navy-deep) 100%);

  /* Затемнение поверх фотографии в панелях «жильё / коммерция».
     По диагонали и с просветом в середине — чтобы кухня за текстом
     читалась, а текст оставался контрастным. */
  --grad-panel: linear-gradient(135deg,
                  rgba(19, 44, 79, .88) 0%,
                  rgba(19, 44, 79, .58) 50%,
                  rgba(31, 78, 121, .82) 100%);

  /* Тёмно-синий с прозрачностью — для наложений на герое */
  --c-on-dark-70:  rgba(255,255,255,.70);
  --c-on-dark-45:  rgba(255,255,255,.45);
  --c-on-dark-12:  rgba(255,255,255,.12);

  /* ── Шрифты ──────────────────────────────────────────────────────────── */
  /* Заголовки — Montserrat: тот же геометрический гротеск, что в логотипе.
     Текст — Inter: рисовался под экран, у него крупный «глаз» и открытые
     формы, поэтому мелкий шрифт читается без напряжения. Прежняя Lora —
     антиква с засечками, книжная: на журнал ложится, на сервисный сайт нет. */
  --f-head: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Шкала кегля. Названия по назначению, а не по числу:
     переименовывать «14px» в «15px» по всему проекту — то ещё удовольствие. */
  --fs-micro:  11px;   /* надписи над заголовками, юр. мелочь */
  --fs-small:  13px;   /* подписи, пункты меню */
  --fs-base:   15px;   /* основной текст интерфейса */
  --fs-body:   17px;   /* текст статей */
  --fs-lead:   19px;
  --fs-h3:     22px;
  --fs-h2:     clamp(26px, 3vw, 38px);
  --fs-h1:     clamp(30px, 4vw, 46px);
  --fs-hero:   clamp(36px, 4vw, 52px);

  --lh-tight: 1.15;
  --lh-normal: 1.55;
  --lh-loose: 1.8;

  /* ── Отступы ─────────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 90px;

  --gutter: var(--sp-6);         /* боковые поля страницы */
  --section-y: 58px;             /* вертикальные отступы секций */
  --wrap: 1280px;                /* предельная ширина контента */
  --wrap-narrow: 980px;
  --measure: 72ch;               /* комфортная длина строки */

  /* ── Скругления ──────────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 100px;

  /* ── Тени ────────────────────────────────────────────────────────────── */
  --sh-card:  0 4px 20px rgba(19, 44, 79, .08);
  --sh-lift:  0 8px 30px rgba(19, 44, 79, .14);
  --sh-cream: 0 8px 30px rgba(239, 218, 187, .40);
  --sh-menu:  0 12px 32px rgba(19, 44, 79, .13);

  /* ── Движение ────────────────────────────────────────────────────────── */
  --t-fast: .15s ease;
  --t-base: .2s ease;
  --t-slow: .42s cubic-bezier(.22, .9, .3, 1);

  /* ── Первый экран ────────────────────────────────────────────────────── */
  --header-h:  81px;    /* 80px строка + 1px граница */
  --hero-max: 700px;    /* потолок «шапка + герой» на больших мониторах */
  --hero-min: 560px;    /* столько занимает сам контент */

  --z-header: 100;
  --z-dropdown: 200;
  --z-float: 300;
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --section-y: 48px;
  }
}

/* Кому анимации мешают — отключаем везде разом, а не в каждом файле. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0s;
    --t-base: 0s;
    --t-slow: 0s;
  }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}