/* ============================================================
   NEVADAELECTRO — дизайн-токены
   Извлечены из Figma: файл wDiVbz8RFIR8aVDCHnKjGu,
   фреймы 77:900 (Home Page v2, 1440) и 77:1130 (Mobile v2, 375).
   Опубликованных стилей в файле нет — значения собраны из узлов.
   ============================================================ */

:root {
  /* ---------- Цвет ---------- */
  --c-primary:        #3066b9;  /* основной синий: кнопки, ссылки, акценты */
  --c-primary-dark:   #012f6c;  /* тёмный синий: hover, глубокие плашки    */
  --c-accent:         #00b6f4;  /* голубой акцент                          */
  --c-accent-light:   #7bd0ff;  /* светлый голубой                         */

  --c-ink:            #081425;  /* основной текст, тёмный фон              */
  /* Вторичный текст. В макете один тон #8585a4, но на светлой подложке он
     даёт контраст 2.98:1 при норме WCAG AA 4.5 — читается плохо. Разводим
     на два: тёмный для светлых фонов, светлый для тёмного подвала. */
  --c-muted:          #63637f;  /* вторичный текст на светлом (4.84:1)     */
  --c-muted-invert:   #8585a4;  /* вторичный текст на тёмном (5.18:1)      */

  --c-surface:        #e2ecf3;  /* светлая подложка секций                 */
  --c-surface-alt:    #c7dcea;  /* подложка второго уровня                 */
  --c-border:         #cadde7;  /* границы карточек и полей                */
  --c-white:          #ffffff;

  --c-danger:         #df1e42;  /* ошибки форм                             */

  /* Затемнение поверх фотографий в герое */
  --grad-overlay: linear-gradient(
      180deg,
      #081425 0%,
      rgba(8, 20, 37, 0.40) 50%,
      rgba(8, 20, 37, 0.00) 100%);

  /* ---------- Типографика ---------- */
  /* Основной шрифт макета — моноширинный JetBrains Mono.
     Запасные подобраны по метрике, чтобы не плыла вёрстка. */
  --font-main: 'JetBrains Mono', 'Roboto Mono', 'Courier New', monospace;

  --fw-regular: 400;
  --fw-bold:    700;
  --fw-black:   800;

  /* Размер / межстрочный / межбуквенный — desktop */
  --t-h1:       48px;  --t-h1-lh:      53px;  --t-h1-ls:     -0.96px;
  --t-h2:       32px;  --t-h2-lh:      38px;  --t-h2-ls:      0;
  --t-h3:       18px;  --t-h3-lh:      24px;  --t-h3-ls:      1.2px;
  --t-body:     16px;  --t-body-lh:    24px;  --t-body-ls:    0;
  --t-small:    14px;  --t-small-lh:   20px;  --t-small-ls:   0;
  /* Нижняя граница читаемости — 14px. В макете надзаголовки набраны 11px,
     а подписи 12px; на экране это мелко, особенно на внутренних страницах,
     где таким размером идут сотни ссылок в боковом меню. Иерархию держим
     не кеглем, а цветом, насыщенностью и разрядкой. */
  --t-caption:  14px;  --t-caption-lh: 20px;  --t-caption-ls: 0;
  --t-micro:    14px;  --t-micro-lh:   18px;  --t-micro-ls:   1.1px;
  --t-button:   15px;  --t-button-lh:  20px;  --t-button-ls:  1px;

  /* ---------- Сетка ---------- */
  --container:      1360px;  /* контентная ширина на 1440            */
  --container-narrow: 1056px; /* узкая колонка — секция FAQ           */
  --gutter:         40px;    /* боковой отступ на desktop            */

  /* ---------- Ритм отступов (шаг 8) ---------- */
  --sp-1:   8px;
  --sp-2:  16px;
  --sp-3:  24px;   /* самый частый шаг в макете */
  --sp-4:  32px;
  --sp-5:  40px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* ---------- Форма ---------- */
  /* Скруглений в макете нет — прямые углы, кроме круглых элементов. */
  --radius:       0;
  --radius-pill:  9999px;
}

/* ---------- Мобильная версия (макет 375) ---------- */
@media (max-width: 767px) {
  :root {
    --t-h1:    32px;  --t-h1-lh: 42px;  --t-h1-ls: -0.96px;
    --t-h2:    28px;  --t-h2-lh: 38px;
    --gutter:  16px;
    /* Ширину контейнера на телефонах не фиксируем: 343px из макета — это
       ширина контента ровно на 375px экране. Если задать её жёстко, на
       любом более широком телефоне и на планшете по бокам остаются
       огромные поля. Ограничение снимается в main.css. */
  }
}