/* ============================================================
   Fincer — переменные дизайн-системы. Основа всего сайта.
   Передано дизайном 20.09.2026, файл `tokens.css` итоговой передачи раздела.
   Подключается первым: всё остальное ссылается только на имена.

   Отличия от переданного файла:
     — снят раздел 18 (`--demo-*`, шесть имён): он нужен только страницам
       приёмки, в продукт они не идут;
     — сняты значения, приколотые к `.screen--mobile` и `.screen--desktop`:
       они нужны страницам приёмки, в продукте работает `@media`;
     — у рукописного `@font-face` сужен `unicode-range` до знаков, которые
       в вырезанном файле действительно есть, — причина у объявления.
   Больше ничего не менялось: значения, имена и порядок как переданы.
   ============================================================ */

/* ---------- Шрифты со своего сервера (OFL 1.1) ---------- */
@font-face{
  font-family:'Manrope';
  src:url('/fonts/manrope-var.woff2') format('woff2-variations');
  font-weight:200 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+20B4,U+20BD,U+2116,U+0400-045F,U+0490-0491,U+04B0-04B1;
}
@font-face{
  font-family:'Golos Text';
  src:url('/fonts/golos-text-var.woff2') format('woff2-variations');
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+2000-206F,U+20B4,U+20BD,U+2116,U+0400-045F,U+0490-0491,U+04B0-04B1;
}
/* Рукописное начертание: Shantell Sans, вес 300. Выбран владельцем 20.09.2026,
   Caveat отменён. Файл — вырезанное статическое начертание 300, НЕ переменное:
   ось весов нам не нужна, нужен один вес. Не предзагружается, грузится после
   первой отрисовки, до загрузки строка показывается текстовым шрифтом.

   Набор знаков уже переданного дизайном: по указанию владельца вырезаны только
   кириллица, цифры и знаки препинания — латиницы в файле нет. Поэтому и
   `unicode-range` здесь описывает ровно то, что в файле есть: объявить шире
   значило бы отдать браузеру диапазон, в котором знаков нет, и он искал бы
   их в этом файле впустую. 14 768 байт, 129 знаков. */
@font-face{
  font-family:'Shantell Sans';
  src:url('/fonts/shantell-sans-300-v1.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
  unicode-range:U+0020-0021,U+0028-0029,U+002C-002F,U+0030-003B,U+003F,U+00AB,U+00BB,U+2010-2015,U+2018-201D,U+2026,U+2116,U+0400-045F;
}

:root{

  /* ========== 1. ЦВЕТ ========== */

  /* Акцент — коралл с референса.
     ЗАЛИВКА И ГРАФИКА. Текст поверх — только --c-text-1 (5,70 : 1).
     Белый текст на этом цвете ЗАПРЕЩЁН: 3,15 : 1.
     Сам коралл текстом и ссылками быть не может: 3,15 : 1 на белом. */
  --c-accent:#F2634A;
  --c-accent-hover:#E8573C;         /* с тёмным текстом 4,99 : 1 */
  --c-accent-active:#DE5136;        /* с тёмным текстом 4,57 : 1 */

  /* Тёмный вариант акцента — НЕ основной цвет.
     Единственный оттенок акцента, на котором допустим белый текст (4,86 : 1),
     и единственный, которым можно набирать текст и ссылки (4,62 : 1 на фоне 2). */
  --c-accent-for-white-text:#CE3D28;
  --c-accent-for-white-text-hover:#B53521;
  --c-accent-for-white-text-active:#9E2D1B;

  --c-accent-disabled-bg:#F3DCD7;
  --c-accent-disabled-text:#9A7B74;
  --c-accent-bg:#FDEDE9;            /* бледная подложка; текст на ней только --c-text-1 / --c-text-2 */

  /* Второй цвет — зелёный */
  --c-second:#1F6B4A;
  --c-second-hover:#195A3E;
  --c-second-bg:#EAF3EC;

  /* Текст — три уровня + инверсный */
  --c-text-1:#1A1614;
  --c-text-2:#574E49;
  --c-text-3:#726862;
  --c-text-inverse:#FFFFFF;

  /* Фоны — три уровня */
  --c-bg-1:#FFFFFF;                 /* карточки, поля, всплывающие слои */
  --c-bg-2:#FFF8F3;                 /* фон страницы */
  --c-bg-3:#F7EDE5;                 /* блок внутри карточки, шапка таблицы */

  /* Границы */
  --c-border-1:#EFE3DA;
  --c-border-2:#E0D0C4;
  --c-border-strong:#A68D7B;         /* к фону 1 — 3,13 : 1 */
  --c-border-focus:#CE3D28;

  /* Состояния */
  --c-success:#1F7A4D;  --c-success-bg:#EAF4EE;
  --c-warning:#8F5A11;  --c-warning-bg:#FDF1DC;
  --c-error:#C8371F;    --c-error-bg:#FDECE8;
  --c-neutral:#574E49;  --c-neutral-bg:#F2EDE9;

  /* Служебные цвета кода и затемнения фото */
  --c-code-bg:#1A1614;
  --c-code-text:#F7EDE5;
  --c-scrim:rgba(26,22,20,.45);     /* минимум под текстом на фото */

  /* ========== 2. СЕМЕЙСТВА ШРИФТОВ ========== */
  --font-head:'Manrope',system-ui,'Segoe UI',Arial,sans-serif;
  --font-text:'Golos Text','Manrope',system-ui,Arial,sans-serif;
  --font-hand:'Shantell Sans','Golos Text',cursive;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  /* ========== 3. НАСЫЩЕННОСТИ ========== */
  --fw-hand:300;                /* единственный вес рукописного начертания */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;

  /* ========== 4. РАЗМЕРЫ ШРИФТА — база: телефон 375 ========== */
  --fs-h1:32px;
  --fs-h2:26px;
  --fs-h3:22px;
  --fs-h4:19px;
  --fs-h5:17px;
  --fs-body-lg:17px;
  --fs-body:15px;
  --fs-body-sm:14px;
  --fs-caption:12px;
  --fs-overline:11px;
  --fs-button:16px;
  --fs-hand:22px;

  /* ========== 5. ВЫСОТЫ СТРОК ========== */
  --lh-h1:38px;
  --lh-h2:32px;
  --lh-h3:28px;
  --lh-h4:26px;
  --lh-h5:24px;
  --lh-body-lg:26px;
  --lh-body:24px;
  --lh-body-sm:21px;
  --lh-caption:17px;
  --lh-overline:15px;
  --lh-button:20px;
  --lh-hand:26px;

  /* ========== 6. МЕЖБУКВЕННОЕ ========== */
  --ls-h1:-0.025em;
  --ls-h2:-0.02em;
  --ls-h3:-0.02em;
  --ls-h4:-0.01em;
  --ls-h5:-0.01em;
  --ls-body:0;
  --ls-overline:0.08em;

  /* ========== 7. ОТСТУПЫ — шаг 4, база 8 ========== */
  --s-2:2px;   --s-4:4px;   --s-8:8px;   --s-12:12px;
  --s-16:16px; --s-20:20px; --s-24:24px; --s-32:32px;
  --s-40:40px; --s-48:48px; --s-64:64px; --s-80:80px;
  --s-96:96px; --s-120:120px;

  /* ========== 8. СКРУГЛЕНИЯ ========== */
  --r-4:4px;   --r-8:8px;   --r-12:12px; --r-16:16px;
  --r-20:20px; --r-24:24px; --r-32:32px; --r-pill:999px;

  /* ========== 9. ТЕНИ ========== */
  --sh-1:0 1px 2px rgba(63,38,26,.06);     /* поля ввода */
  --sh-2:0 2px 8px rgba(63,38,26,.08);     /* карточка */
  --sh-3:0 8px 24px rgba(63,38,26,.10);    /* карточка при наведении */
  --sh-4:0 20px 48px rgba(63,38,26,.14);   /* всплывающие слои */
  --sh-focus:0 0 0 3px rgba(206,61,40,.28);

  /* ========== 10. ТОЛЩИНЫ ГРАНИЦ ========== */
  --bw-1:1px;      /* разделители, карточки */
  --bw-15:1.5px;   /* вторичная кнопка */
  --bw-2:2px;      /* активный таб, обводка фокуса */
  --bw-3:3px;      /* крупные декоративные рамки */

  /* ========== 11. РАЗМЕРЫ ЭЛЕМЕНТОВ УПРАВЛЕНИЯ ========== */
  --tap-min:44px;
  --field-h:48px;
  --btn-h:48px;
  /*
   * Поднято с 40 до 44 решением владельца 21.09.2026. Сорок было ниже
   * минимальной цели нажатия, и правило `.fnc-btn--sm` этим значением
   * задавало кнопку мимо пальца. В разметке передачи оно не используется
   * ни разу, но неиспользуемое правило с нарушением — ловушка для первого,
   * кто его возьмёт. Проверка — `tools/tap-check.php`.
   */
  --btn-h-sm:44px;
  --icon-sm:16px; --icon-md:20px; --icon-lg:24px;

  /* ========== 12. СЕТКА ========== */
  --page-mobile:375px;
  --page-narrow:360px;         /* самый узкий распространённый телефон: на нём проверяется перенос плашек отбора */
  --page-mobile-short:667px;   /* высота короткого телефона: на ней проверяется обрез длинных экранов */
  --page-desktop:1440px;
  --content-max:1200px;
  --measure:68ch;           /* читаемая длина строки: на окне 1920 полотно в 1160px давало 116 знаков в строке */
  --gutter:16px;            /* переопределяется на десктопе */
  --cols:12;
  --col-gap:24px;
  --block-gap:32px;         /* вертикальный ритм блоков, переопределяется */

  /* ========== 13. ТОЧКИ ПЕРЕСТРОЕНИЯ ========== */
  --bp-sm:480px;
  --bp-md:768px;
  --bp-lg:1024px;
  --bp-xl:1280px;
  --bp-xxl:1440px;

  /* ========== 14. ДВИЖЕНИЕ ========== */
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-slow:320ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);

  /* ========== 15. СЛОИ ========== */
  --z-base:0; --z-sticky:100; --z-dropdown:200; --z-modal:300; --z-toast:400;

  /* ========== 16. ПРОПОРЦИИ ФОТО ========== */
  --ar-hero:16 / 9;
  --ar-card:3 / 2;
  --ar-article:4 / 3;
  --ar-banner:21 / 9;
  --ar-portrait:1 / 1;

  /* ========== 16б. ЦВЕТА КАТЕГОРИЙ РАБОТЫ ==========
     Тонированные плитки под знаки категорий, по референсу.
     Только подложки: знак поверх всегда --c-text-1, контраст не ниже 12 : 1.
     Заливки декоративные, текста на них нет. */
  --c-cat-road:#FADCC9;        /* разъездная */
  --c-cat-store:#E4EBDD;       /* склад */
  --c-cat-people:#F6DFE4;      /* работа с людьми */
  --c-cat-desk:#DFE6F0;        /* за компьютером */
  --c-cat-delivery:#FCE9CF;    /* доставка */
  --c-cat-parttime:#EDE4F1;    /* подработка */
  --c-cat-repair:#E3ECEC;      /* ремонт и техника */

  /* ========== 17. УЗЛЫ РАЗДЕЛА ВАКАНСИЙ ========== */
  --ar-vac-banner:16 / 9;      /* баннер карточки вакансии */
  --vac-title-lines:2;         /* название вакансии обрезается по числу строк */
  --vac-where-lines:1;         /* поле «Где» — одна строка, список городов не ломает высоту */
  --vac-req-h:60px;            /* место под плашки требований: две строки, занято и когда плашек нет */
  --icon-tile:32px;            /* плитка знака категории в плашке отбора */
  --control-box:24px;          /* видимый квадрат/круг переключателя внутри цели 44px */
  --logo-box:48px;             /* логотип работодателя в карточке компании */
  --vac-grid-min:440px;        /* минимальная колонка выдачи на десктопе */
  --vac-card-max:640px;        /* предельная ширина карточки: строка не длиннее 75 знаков */
  --option-h:56px;             /* вариант ответа в опросе, выше минимума --tap-min */
  --opt-visible:6.5;           /* сколько вариантов видно до сгиба: половина последнего показывает, что список продолжается */
  /*
   * Снижено с 4,5 до 2,5 передачей от 20.09.2026: при 4,5 обрез был объявлен,
   * но не работал — кнопка «Далее» уходила за край короткого экрана на 49
   * и 73 точки. Замер дизайнера: области раздела на высоте 667 остаётся
   * 381 точка, содержимому нужно 517.
   */
  --opt-visible-short:2.5;     /* то же для короткого экрана телефона (667): обрез приходится на середину третьего варианта */
  --field-max:420px;           /* предел ширины текстового поля: на 1440 поле города не растягивается на всю колонку */
  --sugg-h:44px;               /* строка подсказки города, равна --tap-min */
  --sugg-visible:5.5;          /* сколько строк подсказки видно: половина последней говорит, что список длиннее */
  --sticky-pad-b:24px;         /* запас под прилипающей панелью, чтобы не перекрывала выдачу */

}

/* ========== Десктоп: те же имена, другие значения ========== */
@media (min-width:1024px){
  :root{
    --fs-h1:56px;      --lh-h1:60px;
    --fs-h2:40px;      --lh-h2:46px;
    --fs-h3:30px;      --lh-h3:36px;
    --fs-h4:24px;      --lh-h4:30px;
    --fs-h5:20px;      --lh-h5:26px;
    --fs-body-lg:18px; --lh-body-lg:28px;
    --fs-body:16px;    --lh-body:26px;
    --fs-body-sm:14px; --lh-body-sm:22px;
    --fs-caption:13px; --lh-caption:18px;
    --fs-overline:12px;--lh-overline:16px;
    --fs-hand:28px;    --lh-hand:32px;

    --gutter:24px;
    --block-gap:80px;
  }
}


/* ========== Пользователь просит меньше движения ========== */
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
}

/* Верх страницы раздела: обложка с кнопкой и ряд категорий.
   Передача 42 от 22.09.2026. Шесть плиток, подпись кеглем 11. */
:root {
	--fs-cat-t:11px;
	--lh-cat-t:15px;
	--page-tablet:768px;
	--ar-cover-phone:24 / 9;
	--cat-tile:44px;
	--cat-ico:48px;
	--cat-ico-img:36px;
	--cat-gap:4px;
	--cat-tile-w:90px;
	/* Объёмный значок внутри круга кнопки категории: три четверти круга.
	   Передача 47 от 24.09.2026, отбор витрины. */
	--cat-img:36px;
	/* Непрозрачность подсказки в поле: Firefox по умолчанию гасит её до 0,54,
	   и контраст падает ниже 4,5. */
	--o-solid:1;
}

/* Кнопки категорий на широком экране: доля растёт, вместе с ней круг, значок
   и кегль подписи. Значения из передачи 47 от 24.09.2026. */
@media (min-width:1024px){
	:root{
		--cat-ico:64px;
		--cat-gap:20px;
		--cat-img:48px;
		--fs-cat-t:13px;
		--lh-cat-t:18px;
	}
}