/*
 * Основа: переменные, сброс, типографика.
 *
 * Цвета взяты из прежней темы, чтобы сайт остался узнаваемым,
 * но приведены к системе: у каждого значения есть роль, а не просто оттенок.
 */

/*
 * Шрифты — этап 104.
 *
 * До этого их не было вовсе. Имена стояли в переменных, функция
 * предзагрузки искала `nunito-regular.woff2`, а папки `assets/fonts`
 * не существовало ни локально, ни на площадке, и `@font-face` не было
 * ни в одном из двенадцати файлов стилей. Посетитель видел Segoe UI
 * вместо Nunito и Georgia вместо Roboto Slab — то есть весь набор
 * кеглей и межстрочных, выверенный по замерам, считался не по тем буквам.
 *
 * Прежняя тема тянула оба семейства с Google Fonts строкой `@import`
 * в первой строке своего файла стилей. При переходе на новую тему это
 * потерялось. Возвращаем к себе, а не на чужой домен: сторонний запрос
 * в начале загрузки задерживает первую отрисовку и отдаёт посетителей
 * туда, где мы за них не отвечаем.
 *
 * Файлов четыре, а не двенадцать: оба семейства переменные, и один файл
 * закрывает весь диапазон насыщенности — сайту нужны 400, 600, 700 и 800.
 * Деление на кириллицу и латиницу оставлено как у Google: латиница
 * нужна всегда — в ней цифры, — а кириллица только на страницах
 * с русским текстом, то есть на всех наших, но браузер решает это сам
 * по `unicode-range`, и лишнего не качает.
 *
 * `font-display: swap` — текст показывается сразу запасным шрифтом
 * и подменяется, когда файл придёт. Иначе первые полсекунды страница
 * стоит пустой.
 */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/roboto-slab-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/roboto-slab-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Цвета */
  /*
   * Цвета взяты с логотипа — решение владельца 06.09.
   *
   * В знаке их три: графит #433F47, зелёный #2AA419 и оранжевый #FE6A00.
   * На сайте они и должны работать: графит — текст, зелёный — числа,
   * оранжевый — действие.
   *
   * Текст переведён с #262626 на графит логотипа: контраст 10,29 —
   * мягче прежних 15,13 и родной знаку.
   *
   * Приглушённый серый уведён в тот же оттенок, чтобы подписи не выглядели
   * чужими рядом с основным текстом: контраст 5,19.
   */
  --color-text: #433F47;
  --color-text-muted: #6a6570;
  /*
   * Светло-серый поднят с #949494 до #767676 на этапе 54, а 06.09
   * сведён с приглушённым в один цвет.
   *
   * Два серых, различавшихся на одиннадцать единиц, стояли в одной роли:
   * подписи, счётчики, даты, мелкие пометки. На глаз они не отличались,
   * а по сверке разделов выглядели разнобоем — на одной странице подпись
   * #6b6b6b, на соседней #767676. Оставлен один, тот что темнее:
   * контраст 5,33 вместо 4,54.
   *
   * Имя не удалено: им набрано полсотни мест, и переименование ради
   * переименования только запутало бы историю правок.
   */
  --color-text-light: var(--color-text-muted);
  /*
   * Акцент живёт в двух ролях, и это два разных цвета — этап 59.
   *
   * Этап 54 держал один тон на все роли и записал это решением: «разделять
   * их значило бы поддерживать два почти одинаковых цвета». Спецификация
   * от 05.09 это решение пересматривает. Причина простая: заливка стала
   * светлой. На персиковом #fdb287 белая подпись даёт 1,77, а сам персик
   * как текст на белом — те же 1,77. Одним цветом обе роли больше
   * не закрываются.
   *
   * ЗАЛИВКА — только --color-accent и его состояния: кнопка, отмеченный
   * флажок, активная страница списка. Подпись на ней набирается
   * --color-on-accent, почти чёрным: 9,08. Белого текста на акценте
   * не бывает ни в одном состоянии.
   *
   * Заливка на ступень темнее спецификации — решение владельца от 05.09:
   * светлота 79 вместо 82,5, вся лестница состояний сдвинута вниз следом.
   * Тёмная подпись от этого не пострадала (было 10,26, стало 9,08),
   * а сама кнопка перестала теряться на белом: 1,99 против 1,77.
   *
   * ТЕКСТ, ЛИНИИ, РАМКИ, ФОКУС — только --color-accent-ink. Тот же оттенок
   * (hue 50,6), светлота 52 вместо 82,5: 5,80 на белом, 5,32 на сером,
   * 5,16 на подложке карточки. Спецификация задавала 56 %, но там краска
   * давала на подложке 4,40 при норме 4,5 — опустил на ступень.
   *
   * Менять акцент — менять обе краски, сохраняя разницу светлоты около
   * тридцати пунктов, иначе связь кнопки и числа пропадает.
   */
  --color-accent: #f0a77d;
  --color-accent-hover: #e39d74;
  --color-accent-pressed: #d6936b;
  --color-on-accent: #13161c;
  /*
   * Бледная заливка акцентом — 14.09, для главных тегов в облаке.
   *
   * Это те же #f0a77d, разведённые белым до пятнадцати процентов.
   * Сплошной акцент занят выбранным тегом, и выделять им же невыбранный
   * значило бы говорить двумя разными вещами одним цветом.
   */
  --color-accent-soft: #fdf2ec;
  /*
   * Текстовая краска углублена ещё на ступень — 05.09, по замечанию
   * владельца: прежние #c25400 и #a84900 на глаз почти не различались,
   * и казалось, что текст остался от старого оранжевого. Разница
   * по цветовым составляющим была 28 единиц, стала 39.
   *
   * Светлота 50 при заливке 79 даёт разрыв в 29 пунктов — ровно тот,
   * что спецификация просит держать между двумя ролями акцента.
   */
  --color-accent-ink: #9d4700;
  --color-accent-ink-hover: #843a00;
  /*
   * Прежнее имя оставлено ссылкой на тёмную краску: им пользовались
   * как «акцентом при наведении», и в этой роли теперь именно текстовый тон.
   * Новый код пишет --color-accent-ink-hover, старое имя не удалено, чтобы
   * не оставить без цвета то, что могло не попасть в проход этапа 59.
   */
  --color-accent-dark: var(--color-accent-ink-hover);
  --color-success: #2aa419;

  /*
   * Зелёный для чисел — 06.09. Зелёный логотипа #2AA419 как текст
   * даёт на белом 3,27 при норме 4,5: он для заливки, не для строки.
   * Взят тот же оттенок глубже — светлота 48 вместо 63: 6,14 на белом,
   * 5,64 на сером, 5,20 на наведённой подложке.
   *
   * Им набраны все числа: ставка, сумма, доход, число выгоды в баннере.
   * Оранжевый остался действию — кнопке и ссылке.
   */
  --color-number: #157123;
  --color-danger: #c63535;


  /*
   * Гамма иллюстраций — этап 60.
   *
   * Пять красок на весь набор из десяти файлов. Внутри SVG зашитых цветов
   * нет, только ссылки на эти переменные, поэтому смена акцента
   * перекрашивает набор целиком — это пункт 10 приёмки спецификации.
   *
   * Главный объём предмета ссылается прямо на акцент, а не повторяет его
   * значение: два одинаковых цвета в разных местах разошлись бы при первой
   * же правке. Тёмная копия всегда снизу — свет на всём наборе один, сверху.
   */
  --ill-light: #fed9be;              /* oklch(91% 0.055 58) — освещённые плоскости */
  --ill-base: var(--color-accent);   /* главный объём предмета */
  --ill-deep: #d17242;               /* oklch(65% 0.135 46) — толщина */
  --ill-n: #d3d8e0;                  /* oklch(88% 0.012 258) — второстепенные предметы */
  --ill-ns: #acb2ba;                 /* oklch(76% 0.014 258) — их толщина */

  --color-bg: #ffffff;
  --color-bg-soft: #f5f5f5;
  /*
   * Та же подложка под курсором — этап 61. Спецификация просит менять
   * при наведении только фон и ничего больше: ни сдвига, ни тени.
   */
  --color-bg-hover: #ececec;
  --color-bg-accent: #fff8f2;
  --color-bg-success: #f4f9f4;
  --color-border: #e6e6e6;
  --color-border-strong: #d0d0d0;
  /* Тонкая линия внутри карточек — заметно светлее обычной рамки */
  --color-border-soft: #f0f0f0;
  --color-border-accent: #ffd9bd;
  --color-border-success: #cfe6cf;

  /* Типографика */
  --font-main: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Заголовки сайта берут шрифт из `tokens.css` — решение владельца
     от 18.09.2026. Здесь стояло `"Roboto Slab", Georgia, serif`, но файлов
     этого шрифта на сайте нет, и заголовки рисовались системным Georgia.
     Своего объявления больше нет: имя `--font-head` объявлено в токенах
     и указывает на Manrope, файл которого лежит в `/fonts/`. Это чинит
     давний дефект, а не меняет работающее. */

  --size-base: 17px;
  --size-small: 15px;
  --size-tiny: 13px;
  --line-base: 1.65;

  /* Размеры */
  --wrap: 1200px;
  --gap: 24px;
  --radius: 10px;
  --radius-small: 8px;

  /* Тени */
  --shadow: 0 2px 12px rgba(0, 0, 0, .06);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, .1);
}

/* Сброс */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

img,
picture,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* Документ */
html {
  scroll-behavior: smooth;
  /* Отступ, чтобы заголовок не прятался под шапкой при переходе по якорю */
  scroll-padding-top: 90px;
}

body {
  font-family: var(--font-main);
  font-size: var(--size-base);
  line-height: var(--line-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* Заголовки */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
}

h1 {
  font-size: 34px;
  margin-bottom: 20px;
}

h2 {
  font-size: 27px;
  margin: 36px 0 16px;
}

h3 {
  font-size: 21px;
  margin: 28px 0 12px;
}

h4 {
  font-size: 18px;
  margin: 22px 0 10px;
}

p {
  margin-bottom: 16px;
}

a {
  color: var(--color-accent-ink);
  text-decoration: none;
  transition: color .15s ease;
}

a:hover {
  color: var(--color-accent-ink-hover);
}

strong, b {
  font-weight: 700;
}

/* Служебное */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 18px;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.skip-link:focus {
  left: 0;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*
 * Видимая рамка фокуса — нужна для доступа с клавиатуры.
 * Тёмная краска, а не заливка: светлый персик на белом даёт 1,77
 * и обводку было бы не видно.
 */
:focus-visible {
  outline: 2px solid var(--color-accent-ink);
  outline-offset: 2px;
}

/*
 * Поля ввода на телефоне — кегль 16, не меньше.
 *
 * Safari на iOS увеличивает страницу при фокусе на поле с кеглем меньше
 * шестнадцати: человек нажимает на список фильтров, экран уезжает в зум,
 * и возвращать масштаб приходится руками. До этапа 54 так вели себя
 * фильтры витрины и вакансий — кегль 15.
 *
 * Правило общее, а не по классам: под него попадают и поля чужих форм —
 * подписки и обратной связи.
 */
@media (max-width: 640px) {
  select,
  textarea,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="tel"],
  input[type="number"] {
    font-size: 16px;
  }
}

@media (max-width: 782px) {
  :root {
    --size-base: 16px;
    --gap: 16px;
  }

  h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  h3 { font-size: 19px; }
}

/* Уважаем настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}