/* ==========================================================================
   tendery — «Реестр под копирку». Токены дизайн-системы.
   Источник правил: tendery/05-design.md. Префикс переменных — --tn-.
   В файле только переменные: селекторов компонентов нет.
   Плоско: теней, свечения, размытия, полупрозрачности и цветовых переходов нет.
   Порядок подключения: tokens.css → base.css → components.css → page-*.css
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cuprum:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500;600&family=Istok+Web:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
  /* ---------- Цвет: стол и бумага ---------- */
  --tn-bg: #EEF1F4;            /* фон страницы — канцелярский серо-голубой (зерно) */
  --tn-surface: #FFFFFF;       /* лист реестра: таблица, карточка, бланк, поле ввода, меню */
  --tn-bg-2: #E1E6EC;          /* картон папки: верхняя строка шапки, строка-группа таблицы, чип под курсором */
  --tn-bg-3: #D0D8E0;          /* дорожка шкалы, заливка disabled */

  /* ---------- Цвет: чернила ---------- */
  --tn-text: #1B2430;          /* зерно, ink: текст, заголовки — 13,81:1 к фону, 15,65:1 к листу */
  --tn-text-muted: #4A5666;    /* машинописные подписи, примечания, шапка таблицы — 6,58:1 к фону, 7,46:1 к листу, 5,95:1 к картону */
  --tn-text-faint: #8791A0;    /* только disabled и прочерк пустой клетки — 2,81:1; смысловой текст им не набирать */

  /* ---------- Цвет: линии ---------- */
  --tn-line: #C8D0D9;          /* линовка: строки и графы таблицы, разделители списков */
  --tn-line-strong: #77838F;   /* граница поля, чипа, плитки логотипа, пунктир бланка — 3,41:1 к фону, 3,87:1 к листу */
  --tn-line-ink: #1B2430;      /* рамка листа, линейки раздела, граница вторичной кнопки */

  /* ---------- Цвет: акцент — синий копировальной бумаги ---------- */
  --tn-accent: #2B3A8C;        /* зерно: впечатанные данные (числа, даты), ссылки, основная кнопка, оценка — 8,88:1 к фону, 10,06:1 к листу */
  --tn-on-accent: #FFFFFF;     /* текст на акценте — 10,06:1 */
  --tn-accent-deep: #1F2A66;   /* под курсором; текст на синей подложке — 11,71:1 к фону, 10,28:1 к подложке */
  --tn-accent-press: #161E4D;  /* нажатие */
  --tn-accent-tint: #DDE2F4;   /* подложка: выбранный чип, лучшее значение в сравнении, колонка «за год» */
  --tn-accent-on-dark: #B3BEF2;/* ссылка на листе копирки — 7,31:1 */

  /* ---------- Цвет: второй акцент — ржавый штамп (только отметки редакции) ---------- */
  --tn-accent-2: #C2410C;      /* зерно: рамка и текст штампа на фоне и листе — 4,57:1 и 5,18:1; на картоне и подложках не использовать (4,13:1) */
  --tn-on-accent-2: #FFFFFF;   /* текст на залитом штампе — 5,18:1 */
  --tn-accent-2-deep: #9A3412; /* ржавый текст на картоне и подложке — 5,82:1 и 5,86:1; мелкий текст врезки */
  --tn-accent-2-tint: #F8E2D6; /* подложка врезки «Важно» */
  --tn-accent-2-on-dark: #F2A57E; /* штамп на листе копирки — 6,61:1 */

  /* ---------- Цвет: состояния (всегда вместе со словом) ---------- */
  --tn-success: #1D6A43;       /* «бесплатно», «есть» — 5,80:1 к фону, 6,57:1 к листу, 5,32:1 к подложке */
  --tn-success-tint: #DBEBE1;
  --tn-warning: #7A5200;       /* «цена по запросу», «мало данных», «проверено давно» — 6,10:1, 6,92:1, 5,68:1 */
  --tn-warning-tint: #F5E8C4;
  --tn-error: #A3123A;         /* ошибки форм — малиновый, чтобы не путать с ржавым штампом — 6,85:1, 7,76:1, 6,17:1 */
  --tn-error-tint: #F8DFE6;

  /* ---------- Цвет: лист копирки (панель сравнения, подсказка, подвал) ---------- */
  --tn-carbon: #1F2A66;
  --tn-carbon-2: #2B3A8C;      /* кнопка и строка под курсором на копирке */
  --tn-on-carbon: #EEF1F4;     /* 11,71:1 */
  --tn-on-carbon-muted: #B9C1E3; /* 7,46:1 */
  --tn-carbon-line: #4A568F;

  /* ---------- Шрифты ---------- */
  --tn-font-heading: "Cuprum", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --tn-font-body: "Istok Web", Verdana, "Segoe UI", Arial, sans-serif;
  --tn-font-mono: "IBM Plex Mono", "Courier New", Menlo, Consolas, monospace;

  --tn-fw-regular: 400;
  --tn-fw-medium: 500;         /* только IBM Plex Mono и Cuprum */
  --tn-fw-semibold: 600;       /* только IBM Plex Mono и Cuprum */
  --tn-fw-bold: 700;           /* Istok Web и Cuprum; у Istok Web есть только 400 и 700 */

  /* ---------- Размеры текста: телефон (база) ---------- */
  --tn-fs-h1: 30px;        --tn-lh-h1: 1.08;
  --tn-fs-h2: 24px;        --tn-lh-h2: 1.15;
  --tn-fs-h3: 20px;        --tn-lh-h3: 1.2;
  --tn-fs-h4: 17px;        --tn-lh-h4: 1.25;
  --tn-fs-lead: 17px;      --tn-lh-lead: 1.5;
  --tn-fs-body: 16px;      --tn-lh-body: 1.55;
  --tn-fs-prose: 16px;     --tn-lh-prose: 1.65;
  --tn-fs-ui: 15px;        --tn-lh-ui: 1.35;
  --tn-fs-input: 16px;     /* не меньше 16px на телефоне: иначе iOS увеличивает страницу при фокусе */
  --tn-fs-small: 14px;     --tn-lh-small: 1.45;
  --tn-fs-micro: 12px;     --tn-lh-micro: 1.4;
  --tn-fs-label: 12px;     --tn-lh-label: 1.3;   /* машинописная подпись поля: IBM Plex Mono 500, строчные */
  --tn-fs-th: 11px;        --tn-lh-th: 1.25;     /* шапка таблицы: IBM Plex Mono 500 */
  --tn-fs-table: 15px;     --tn-lh-table: 1.4;
  --tn-fs-num: 15px;       --tn-lh-num: 1.35;    /* число в ячейке и графе */
  --tn-fs-num-s: 12px;     /* номер записи, дата проверки, счётчик */
  --tn-fs-num-l: 20px;     /* главное число карточки */
  --tn-fs-num-xl: 34px;    /* итог калькулятора: один на экран */
  --tn-fs-stamp: 12px;     /* штамп: Cuprum 700, прописные */
  --tn-fs-stamp-l: 15px;   /* штамп в шапке страницы */
  --tn-fs-score-s: 22px;   /* оценка в строке таблицы */
  --tn-fs-score-m: 26px;   /* оценка в карточке */
  --tn-fs-score-l: 40px;   /* оценка в шапке обзора */
  --tn-fs-brand: 22px;     /* рабочее название в шапке */

  --tn-ls-heading: 0;
  --tn-ls-caps: 0.06em;        /* прописные в штампах */
  --tn-ls-mono: -0.01em;       /* моноширинные подписи */
  --tn-ws-num: -0.22em;        /* word-spacing моноширинных чисел: пробел между разрядами 0,38em вместо 0,6em */

  /* ---------- Отступы (имя = значение в px) ---------- */
  --tn-sp-2: 2px;
  --tn-sp-4: 4px;
  --tn-sp-6: 6px;
  --tn-sp-8: 8px;
  --tn-sp-12: 12px;
  --tn-sp-16: 16px;
  --tn-sp-20: 20px;
  --tn-sp-24: 24px;
  --tn-sp-32: 32px;
  --tn-sp-40: 40px;
  --tn-sp-48: 48px;
  --tn-sp-64: 64px;
  --tn-sp-80: 80px;

  /* ---------- Сетка ---------- */
  --tn-container: 1400px;  /* наружная ширина контейнера вместе с полями */
  --tn-gutter: 16px;       /* боковое поле */
  --tn-cols: 4;
  --tn-gap: 16px;          /* межколонник */
  --tn-section: 40px;      /* между блоками страницы */
  --tn-block-gap: 16px;    /* между заголовком блока и содержимым */
  --tn-measure: 68ch;      /* предел ширины текста */
  --tn-filter-w: 224px;    /* левая колонка фильтров реестра, от 1200px */

  --tn-topline-h: 28px;    /* верхняя строка шапки */
  --tn-mast-h: 56px;       /* строка знака и названия */
  --tn-nav-h: 40px;        /* строка разделов, от 1200px */
  --tn-control-h: 44px;    /* кнопка, поле, выпадающий список */
  --tn-control-h-s: 36px;
  --tn-control-h-l: 48px;
  --tn-chip-h: 40px;
  --tn-check: 20px;        /* клетка флажка */
  --tn-row-h: 72px;        /* минимальная высота строки таблицы от 768px */
  --tn-cmpbar-h: 56px;
  --tn-sticky-cta-h: 56px; /* закреплённая кнопка обзора на телефоне */

  /* ---------- Формы: радиусы и линии ---------- */
  --tn-r-0: 0;             /* листы, таблицы, карточки, панели, вкладки, флажок */
  --tn-r-1: 2px;           /* кнопки, поля, чипы, штампы, плитка логотипа, рамка оценки */
  --tn-r-round: 50%;       /* только радиокнопка */

  --tn-bw: 1px;            /* линовка, графа, поле */
  --tn-bw-rule: 2px;       /* линейка раздела, низ шапки, рамка штампа и оценки */
  --tn-bw-double: 3px;     /* двойная линейка: низ шапки таблицы, итог расчёта */
  --tn-bw-mark: 3px;       /* метка: активная вкладка, активная сортировка, врезка */
  --tn-border: 1px solid var(--tn-line);
  --tn-border-strong: 1px solid var(--tn-line-strong);
  --tn-border-ink: 1px solid var(--tn-line-ink);
  --tn-rule: 2px solid var(--tn-line-ink);
  --tn-rule-double: 3px double var(--tn-line-ink);
  --tn-border-stamp: 2px solid var(--tn-accent-2);
  --tn-border-score: 2px solid var(--tn-accent);
  --tn-border-copy: 1px solid var(--tn-accent);       /* край второго листа под копирку */
  --tn-border-nodata: 1px dashed var(--tn-warning);   /* штамп «Мало данных» */
  --tn-leader: 1px dotted var(--tn-line-strong);      /* отточие между подписью и значением в бланке */

  --tn-focus: 2px solid var(--tn-text);
  --tn-focus-on-carbon: 2px solid var(--tn-on-carbon);
  --tn-focus-offset: 2px;

  /* ---------- Фирменные элементы ---------- */
  --tn-copy-shift: 4px;    /* сдвиг второго листа вправо и вниз */
  --tn-stamp-h: 22px;      /* штамп в строке и карточке */
  --tn-stamp-h-l: 32px;    /* штамп в шапке страницы */
  --tn-stamp-tilt: -2deg;  /* поворот только у штампа L; в строках и карточках штампы стоят ровно */
  --tn-regno-w: 56px;      /* колонка «№ записи» */

  --tn-score-w-s: 48px;    --tn-score-h-s: 36px;   /* строка таблицы */
  --tn-score-w-m: 64px;    --tn-score-h-m: 52px;   /* карточка: число и «из 100» */
  --tn-score-w-l: 104px;   --tn-score-h-l: 88px;   /* шапка обзора и сравнения */

  --tn-field-min: 148px;   /* минимальная ширина графы: на 320px помещаются две */
  --tn-step-no: 28px;      /* квадрат с номером шага */

  --tn-logo-s: 32px;       /* панель сравнения, мини-список, результат калькулятора */
  --tn-logo-m: 40px;       /* строка реестра, карточка */
  --tn-logo-l: 64px;       /* шапка обзора и сравнения */
  --tn-mark: 28px;         /* знак в шапке */

  --tn-icon-s: 16px;
  --tn-icon: 20px;
  --tn-icon-l: 24px;
  --tn-icon-stroke: 1.5;
  --tn-icon-stroke-s: 2;   /* для значка 16px: линия около 1,3px */

  /* ---------- Движение и слои ---------- */
  --tn-t: 120ms;           /* только цвет, фон и граница; сдвигов и масштабирования нет */
  --tn-z-sticky: 10;
  --tn-z-cta: 30;
  --tn-z-cmpbar: 40;
  --tn-z-menu: 50;
  --tn-z-popover: 60;
}

/* ---------- 768px: планшет ---------- */
@media (min-width: 768px) {
  :root {
    --tn-fs-h1: 38px;        --tn-lh-h1: 1.06;
    --tn-fs-h2: 28px;        --tn-lh-h2: 1.12;
    --tn-fs-h3: 22px;
    --tn-fs-h4: 18px;
    --tn-fs-lead: 18px;
    --tn-fs-prose: 17px;
    --tn-fs-input: 15px;
    --tn-fs-num-xl: 40px;
    --tn-fs-stamp: 13px;
    --tn-fs-stamp-l: 16px;
    --tn-fs-score-l: 48px;
    --tn-fs-brand: 24px;

    --tn-gutter: 24px;
    --tn-cols: 8;
    --tn-gap: 20px;
    --tn-section: 52px;
    --tn-block-gap: 20px;

    --tn-topline-h: 32px;
    --tn-mast-h: 64px;
    --tn-control-h: 40px;
    --tn-control-h-s: 32px;
    --tn-chip-h: 32px;
    --tn-cmpbar-h: 64px;

    --tn-copy-shift: 6px;
    --tn-stamp-h: 24px;
    --tn-stamp-h-l: 36px;
    --tn-regno-w: 48px;
    --tn-score-w-l: 120px;   --tn-score-h-l: 100px;
    --tn-mark: 32px;
  }
}

/* ---------- 1200px: десктоп ---------- */
@media (min-width: 1200px) {
  :root {
    --tn-fs-h1: 46px;        --tn-lh-h1: 1.04;
    --tn-fs-h2: 32px;        --tn-lh-h2: 1.1;
    --tn-fs-h3: 24px;
    --tn-fs-lead: 19px;
    --tn-fs-num-xl: 48px;
    --tn-fs-brand: 26px;

    --tn-cols: 12;
    --tn-gap: 24px;
    --tn-section: 68px;
    --tn-block-gap: 24px;

    --tn-regno-w: 56px;
    --tn-mark: 36px;
  }
}