/* ============================================================
   irinasemenova.com — цветовые токены бренда
   Версия 1.5 · сентябрь 2026

   Изменения с 1.4:
   · Цвета направлений разведены по тону: ипотека — бирюза,
     страхование — синий, инвестиции — золото. У каждого направления
     три ступени одной краски вместо двух разных красок.
   · Добавлен служебный красный --risk. Вне системы направлений,
     только предупреждение о риске.
   · Основная кнопка заливается тёмной ступенью --accent-text:
     белый текст по светлому акценту не проходил по контрасту.
   · Ширина контейнера вынесена в --wrap. Была прописана в каждом
     файле отдельно и уже разошлась: 1180 на главной, 1100 на лендинге.

   ВНИМАНИЕ: BRANDBOOK-color.md пока версии 1.4 и этих изменений
   не описывает. Правки нужны в §3, §4, §9.7 и §10.

   Подключается ПЕРВЫМ файлом стилей на каждом сайте и лендинге:
     <link rel="stylesheet" href="/tokens.css">
     <link rel="stylesheet" href="/css/style.css">

   Файл одинаков во всех репозиториях. Меняется здесь —
   переносится сразу во все.
   ============================================================ */

:root {

  /* ---------- ЯДРО БРЕНДА ----------
     Одинаково на главном сайте и на всех лендингах.
     Шапка, футер, основной текст, тёмные блоки. */

  --ink:          #0B1B33;  /* главный тёмный: фон hero, шапка, футер, текст */
  --navy:         #14315C;  /* вторая тёмная ступень: границы, карточки на тёмном */
  --slate:        #3A4759;  /* абзацы на светлом: темнее steel, легче ink */
  --steel:        #5F6C82;  /* вторичный текст, подписи, моно-лейблы */
  --line:         #D8E0EC;  /* хайрлайны, разделители, границы полей */
  --paper-2:      #E7ECF3;  /* вторая светлая ступень: фон блока отзывов */
  --paper:        #F2F5F9;  /* светлая база страницы */
  --white:        #FFFFFF;  /* карточки на светлом */

  /* ---------- ТЁМНЫЕ ПОВЕРХНОСТИ ----------
     Шапка, футер и блок формы обязаны быть идентичны на всех сайтах (§2),
     поэтому их оттенки — токены. Иначе на каждом лендинге они
     перенабираются руками и расходятся через два-три лендинга. */

  --on-dark:       #E7ECF4;  /* максимальный контраст после белого */
  --on-dark-2:     #B9C4D6;  /* основной текст и пункты меню на тёмном */
  --on-dark-3:     #8FA6C4;  /* подписи, плейсхолдеры, моно-лейблы */
  --on-dark-4:     #6E7F97;  /* иконки, нижняя строка футера */

  --on-dark-fill:  rgba(255,255,255,.06);  /* поля формы, карточка «что дальше» */
  --on-dark-line:  rgba(255,255,255,.18);  /* границы этих поверхностей */
  --on-dark-soft:  rgba(255,255,255,.12);  /* внутренние разделители на тёмном */
  --on-dark-hair:  rgba(255,255,255,.08);  /* хайрлайны: низ шапки, верх футера */

  /* ---------- ФОНОВЫЕ ПРИЁМЫ ---------- */

  /* Первый экран главной, §4. Три точки, а не две: без середины
     переход к --paper ложится видимой полосой поперёк экрана. */
  --hero-1:       #E9EEF5;
  --hero-2:       #EEF1F5;

  /* Холодное свечение в правом верхнем углу первого экрана главной.
     Взято от --navy, а не от направления: главная нейтральна (§10). */
  --hero-glow:    color-mix(in srgb, var(--navy) 10%, transparent);

  /* Точечная сетка на светлых блоках */
  --dot-grid:     rgba(11,27,51,.08);

  /* ---------- АКЦЕНТЫ НАПРАВЛЕНИЙ ----------
     У каждого направления одна краска в трёх ступенях:
       --<имя>        заливки и полосы на светлом
       --<имя>-2      светлая ступень: кнопки и детали на тёмном
       --<имя>-text   тёмная ступень: текст и ссылки меньше 18px
       --<имя>-bg     светлая база блока
     Направления разводятся тоном, ступени внутри направления — светлотой. */

  /* Ипотека — «получить»: бирюза */
  --mortgage:      #0FA391;
  --mortgage-2:    #1FB39F;
  --mortgage-bg:   #E4F4F1;
  --mortgage-text: #0B7A6D;

  /* Страхование — «защитить»: активный синий, navy в тёмных блоках */
  --insure:        #2E5BFF;
  --insure-2:      #7BB3FF;
  --insure-bg:     #EAF0FF;
  --insure-text:   #1D46D6;
  --insure-dark:   #12224A;

  /* Инвестиции — «приумножить»: золото.
     Сияющее золото на белом не проходит по контрасту, поэтому заливки
     и полосы берут охру, а золото остаётся на тёмном — как на вебинаре. */
  --invest:        #A97A17;
  --invest-2:      #D6A756;  /* только на тёмном фоне, никогда на белом */
  --invest-bg:     #F5EEDF;
  --invest-text:   #8A6410;

  /* Новая профессия (рекрутинг) — «сменить»: изумруд.
     Зелёный освободился после перехода инвестиций в золото. */
  --career:        #0E7A55;
  --career-2:      #34C08A;
  --career-bg:     #F1F6F3;
  --career-dark:   #0B3D2E;

  /* Рекомендация — сервисный акцент, не продуктовое направление.
     Только реферальная страница, блок отзывов и CTA «порекомендовать». */
  --referral:      #D9502A;
  --referral-2:    #2E7D5B;
  --referral-bg:   #F6F3EE;
  --referral-text: #C4441F;

  /* ---------- СЛУЖЕБНЫЙ ЦВЕТ ----------
     Вне системы направлений. Только предупреждение о риске: отказ,
     штраф, потеря льготы, необратимое действие. Не для акцентов,
     не для кнопок, не для «важно знать».
     Пары «успех» здесь нет намеренно: положительную сторону всегда
     показывает цвет направления, и заводить под неё второй зелёный
     значит спорить с акцентом на его же территории. */
  --risk:          #C0392B;  /* полоса, иконка, текст — проходит 5,4:1 на белом */
  --risk-bg:       #FBEBE9;  /* заливка плитки и подложек */

  /* ---------- СЕМАНТИКА ----------
     Пишем в вёрстке эти имена, а не цвета напрямую. */

  --text-primary:   var(--ink);
  --text-body:      var(--slate);
  --text-secondary: var(--steel);
  --text-on-dark:   var(--on-dark-2);
  --surface-page:   var(--paper);
  --surface-card:   var(--white);
  --surface-alt:    var(--paper-2);
  --surface-dark:   var(--ink);
  --border:         var(--line);

  /* Значение по умолчанию — главный сайт нейтрален, без своего цвета.
     Единственное исключение: вторичный цвет на главной — бирюза (§9.7). */
  --accent:         var(--navy);
  --accent-soft:    var(--paper);
  --accent-text:    var(--navy);
  --accent-2:       var(--mortgage-2);

  /* Тёмный фон ВНУТРЕННИХ блоков раздела (§3).
     Шапка и футер сюда не входят — они всегда --ink, см. §2. */
  --accent-dark:    var(--ink);

  /* Заливка иконных плиток и кружков с номерами: вторичный цвет раздела
     в 12%. Пересчитывается сам, поэтому плитки не приходится
     перекрашивать на каждом лендинге. */
  --accent-2-tint:  color-mix(in srgb, var(--accent-2) 12%, transparent);

  /* ---------- ГЕОМЕТРИЯ ----------
     10px — фактическое скругление всех карточек на готовой главной:
     направления, шаги, цифры, отзывы, статьи, табло, портрет, лицензии.
     В версии 1.0 здесь стояло 12px, которых не было ни в одном месте. */

  --radius:      10px;   /* карточки, иконные плитки, контейнеры */
  --radius-sm:   8px;    /* кнопки, поля ввода */
  --radius-pill: 999px;  /* чипы, бейджи, точки */

  /* ---------- РИТМ ---------- */

  --wrap:        1180px;  /* ширина контейнера: одинакова на всех сайтах */
  --wrap-pad:    24px;    /* боковые поля контейнера */
  --section-py:  96px;    /* вертикальный отступ секции */

  /* ---------- ШРИФТЫ ----------
     Подключение в <head> ДО tokens.css:
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Onest:wght@600;700&family=Golos+Text:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
     Перед публикацией шрифты скачиваются в /fonts и подключаются через @font-face. */

  --font-display: 'Onest', 'Helvetica Neue', sans-serif;      /* H1, H2, цитаты */
  --font-text:    'Golos Text', 'Helvetica Neue', sans-serif; /* весь остальной текст */
  --font-mono:    'IBM Plex Mono', 'SF Mono', monospace;      /* служебные лейблы */

  /* ---------- ШКАЛА (десктоп) ---------- */

  --fs-h1:      48px;  --lh-h1:      1.12;
  --fs-h2:      32px;  --lh-h2:      1.2;
  --fs-h3:      22px;  --lh-h3:      1.3;
  --fs-body:    17px;  --lh-body:    1.7;
  --fs-small:   15px;  --lh-small:   1.6;
  --fs-caption: 13px;  --lh-caption: 1.4;

  /* Моно-слой набран тремя ступенями, все в пределах «до 14px» (§9.3):
     13 — лейблы и eyebrow, 12 — нумерация разделов и шагов,
     11 — подписи над цифрами и роли в отзывах. */
  --fs-mono:    13px;
  --fs-mono-sm: 12px;
  --fs-mono-xs: 11px;

  --tracking-mono: 0.08em;  /* обязательный трекинг для моно-лейблов */
}

@media (max-width: 900px) {
  :root { --section-py: 64px; }
}

@media (max-width: 768px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 24px;
    --fs-h3: 19px;
    --fs-body: 16px;
  }
}

/* ============================================================
   ТИПОГРАФИЧЕСКИЕ КЛАССЫ
   ============================================================ */

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-page);
  font-feature-settings: 'tnum' 1;  /* табличные цифры: колонки не «пляшут» */
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;   /* выравнивает длину строк в многострочном заголовке */
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }

h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}

/* Ручные переносы в заголовках (§9.3). Два парных класса:
     <br class="mob-off">   — перенос на десктопе, пропадает на узком экране
     <br class="mob-only">  — наоборот, появляется только на узком экране
   Перед <br> всегда ставится пробел, иначе слова склеятся. */
br.mob-only { display: none; }

@media (max-width: 600px) {
  br.mob-off  { display: none; }
  br.mob-only { display: inline; }
}

/* Моно-лейбл: подпись над заголовком, в карточке, дата в футере.
   Только заглавными, только с трекингом, только до 14px. */
.eyebrow,
.label-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--accent-text);
}

.quote {                       /* прямая речь Ирины */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.45;
  border-left: 3px solid var(--accent-2);
  border-radius: 0;
  padding-left: 20px;
}

.stat {                        /* крупные цифры в карточках */
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-h2);
  font-feature-settings: 'tnum' 1;
  color: var(--accent-text);
}

.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}

/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ РАЗДЕЛА
   На каждой странице ставим метку на <body>:
     <body data-section="mortgage">
   После этого всё, что свёрстано через var(--accent) и var(--accent-2),
   берёт цвета своего направления автоматически.
   Метку можно ставить и на отдельный блок — так на главной покрашены
   карточки направлений.
   ============================================================ */

[data-section="mortgage"] {
  --accent:      var(--mortgage);
  --accent-soft: var(--mortgage-bg);
  --accent-text: var(--mortgage-text);
  --accent-2:    var(--mortgage-2);
  --accent-dark: var(--ink);
}

[data-section="insure"] {
  --accent:      var(--insure);
  --accent-soft: var(--insure-bg);
  --accent-text: var(--insure-text);
  --accent-2:    var(--insure-2);
  --accent-dark: var(--insure-dark);
}

[data-section="invest"] {
  --accent:      var(--invest);
  --accent-soft: var(--invest-bg);
  --accent-text: var(--invest-text);
  --accent-2:    var(--invest-2);
  --accent-dark: var(--ink);
}

[data-section="career"] {
  --accent:      var(--career);
  --accent-soft: var(--career-bg);
  --accent-text: var(--career-dark);
  --accent-2:    var(--career-2);
  --accent-dark: var(--career-dark);
}

[data-section="referral"] {
  --accent:      var(--referral);
  --accent-soft: var(--referral-bg);
  --accent-text: var(--referral-text);
  --accent-2:    var(--referral-2);
  --accent-dark: var(--ink);
}

/* ============================================================
   БАЗОВЫЕ КОМПОНЕНТЫ
   Одинаковы на всех сайтах. Цвет подставляется автоматически
   в зависимости от data-section.
   ============================================================ */

/* Заливка берётся из тёмной ступени, а не из --accent: на светлом фоне
   белый текст по бирюзе даёт 3,1:1 и по золоту 3,8:1 — оба не проходят.
   Тёмная ступень даёт 5,2:1 у ипотеки, 7,3:1 у страхования, 5,4:1
   у инвестиций. На главной обе ступени равны --navy, так что там
   ничего не меняется. */
.btn-primary {
  background: var(--accent-text);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 16px 28px;
  font-size: 16px;
  cursor: pointer;
}

.btn-secondary {
  background: transparent;
  color: var(--accent-text);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 15px 27px;
  font-size: 16px;
  cursor: pointer;
}

/* Кнопка-ссылка: без inline-block вертикальные отступы не работают
   и длинный текст вылезает за пределы заливки. */
a.btn-primary,
a.btn-secondary {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
}

/* На тёмном фоне основная кнопка становится белой: акцентный цвет
   раздела на Ink даёт слабый контраст, а на нейтральной главной
   он не используется вообще (§4). */
.section-dark .btn-primary {
  background: var(--white);
  color: var(--ink);
}

.section-dark .btn-secondary {
  color: var(--white);
  border-color: var(--white);
}

/* МОНО-СЛОЙ. Нумерация раздела: 01 · Направления ──────────── */
.sec-num {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.sec-num .n { color: var(--accent-text); font-weight: 500; }
.sec-num .rule { flex: 1; height: 1px; background: var(--border); }

/* Та же строка на тёмной секции */
.section-dark .sec-num { color: var(--on-dark-3); }
.section-dark .sec-num .n { color: var(--white); }
.section-dark .sec-num .rule { background: var(--on-dark-line); }

/* Подпись над крупной цифрой */
.stat-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 10px;
}

/* Карточка направления: акцент — полосой поверх верхней границы */
.card-direction {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.card-direction::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}

.card-direction:hover {
  background: var(--accent-soft);
}

/* Тёмная секция. Шапка, футер и блок формы — на всех сайтах одинаковы. */
.section-dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}

/* Тёмный блок ВНУТРИ раздела: у страхования и рекрутинга свой оттенок,
   у остальных совпадает с --ink. Шапку и футер этим классом не красим. */
.section-dark--section {
  background: var(--accent-dark);
  color: var(--text-on-dark);
}

/* Видимый фокус с клавиатуры. Обводка снаружи элемента, поэтому
   не сдвигает вёрстку и работает и на светлом, и на тёмном. */
:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}