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

@import url("https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Literata:ital,opsz,wght@0,7..72,400..700;1,7..72,400..700&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  /* ---------- Цвет: бумага ---------- */
  --bh-bg: #F4ECD8;            /* фон страницы — сепия, лист амбарной книги (зерно) */
  --bh-surface: #FCF8EC;       /* вкладной лист: калькулятор, поля ввода, раскрытая строка, меню, строка под курсором */
  --bh-bg-2: #EADFC4;          /* плотная бумага: шапка таблицы, колонтитул, неактивная закладка, чип под курсором */
  --bh-bg-3: #DCCFB0;          /* картон: пустая клетка шкалы, заливка disabled */

  /* ---------- Цвет: чернила ---------- */
  --bh-text: #3B2F2F;          /* основной текст, заголовки, цифры (зерно, ink) — 10,92:1 к бумаге, 12,11:1 к вкладному листу */
  --bh-text-muted: #665647;    /* подписи граф, примечания, прочерк — 5,97:1 к бумаге, 5,31:1 к плотной, 4,55:1 к картону */
  --bh-text-faint: #9C8D76;    /* только неактивные стрелки сортировки и разделитель крошек — 2,75:1; текст им не набирать */

  /* ---------- Цвет: линии ---------- */
  --bh-line: #D5C6A1;          /* линовка: строки таблиц и списков (декоративная, 1,44:1) */
  --bh-line-strong: #93805F;   /* граница поля, чипа, плитки логотипа, клетки — 3,25:1 к бумаге, 3,60:1 к вкладному листу */
  --bh-line-ink: #3B2F2F;      /* рамка листа, линейка шапки таблицы, перекладина счёта, вторичная кнопка */
  --bh-margin: #B5391F;        /* красная линия полей — только линия, не текст; 5,00:1 к бумаге */

  /* ---------- Цвет: акцент — сургуч ---------- */
  --bh-accent: #8C2F1B;        /* зерно: основная кнопка, ссылка, клетка оценки, активная сортировка — 7,03:1 к бумаге */
  --bh-on-accent: #FFF9EA;     /* текст на акценте — 7,88:1 */
  --bh-accent-deep: #6F2414;   /* под курсором; ссылка на розовой подложке — 9,20:1 к бумаге, 7,92:1 к подложке */
  --bh-accent-press: #551A0D;  /* нажатие — текст на нём 12,98:1 */
  --bh-accent-tint: #F0D8C8;   /* подложка: выбранный чип, выбранная строка сравнения — текст 9,40:1 */
  --bh-accent-on-dark: #F0A893;/* ссылка на тёмном — 6,57:1 */

  /* ---------- Цвет: второй акцент — зелёная строка «Итого» ---------- */
  --bh-accent-2: #2E7D32;      /* зерно: только заливка строки «Итого» и её линия; текстом на бумаге не набирать (4,35:1) */
  --bh-on-accent-2: #FFFDF4;   /* текст в строке «Итого» — 5,03:1 */
  --bh-accent-2-deep: #1F5C24; /* зелёный текст и значки на бумаге — 6,82:1; на вкладном листе 7,56:1 */
  --bh-accent-2-tint: #DCE7C8; /* подложка: лучшее значение в сравнении, «Итого» в тексте статьи — текст 9,98:1 */
  --bh-accent-2-on-dark: #9AD19C; /* 7,33:1 */

  /* ---------- Цвет: состояния (всегда вместе со словом) ---------- */
  --bh-success: #1F5C24;       /* «Да», «есть», «бесплатно» — 6,82:1 */
  --bh-success-tint: #DCE7C8;
  --bh-warning: #7A4E00;       /* «мало данных», «цена по запросу», «проверено давно» — 6,11:1; на подложке 5,37:1 */
  --bh-warning-tint: #F2DDA4;
  --bh-error: #A1123F;         /* ошибки форм — малиновый, холоднее сургуча — 6,67:1; на подложке 6,06:1 */
  --bh-error-tint: #F6DCDD;

  /* ---------- Цвет: переплёт (панель сравнения, подсказка, подвал) ---------- */
  --bh-dark: #3B2F2F;
  --bh-dark-2: #4E4040;        /* кнопка на переплёте под курсором */
  --bh-on-dark: #F4ECD8;       /* 10,92:1 */
  --bh-on-dark-muted: #CDBFA3; /* 7,09:1 */
  --bh-dark-line: #6A5A55;     /* линовка на переплёте (декоративная) */

  /* ---------- Шрифты ---------- */
  --bh-font-heading: "Old Standard TT", "Times New Roman", Georgia, serif;
  --bh-font-body: "Literata", Georgia, "Times New Roman", serif;
  /* Literata стоит второй: в Anonymous Pro нет знака рубля, браузер возьмёт его из Literata */
  --bh-font-mono: "Anonymous Pro", "Literata", "Courier New", Menlo, monospace;

  --bh-fw-regular: 400;
  --bh-fw-medium: 500;         /* только Literata */
  --bh-fw-semibold: 600;       /* только Literata */
  --bh-fw-bold: 700;           /* Old Standard TT и Anonymous Pro — только 400 и 700 */
  --bh-num: lining-nums tabular-nums;   /* font-variant-numeric для любых чисел в Literata */

  /* ---------- Размеры текста: телефон (база) ---------- */
  --bh-fs-h1: 28px;        --bh-lh-h1: 32px;
  --bh-fs-h2: 23px;        --bh-lh-h2: 28px;
  --bh-fs-h3: 20px;        --bh-lh-h3: 26px;
  --bh-fs-h4: 18px;        --bh-lh-h4: 24px;
  --bh-fs-lead: 17px;      --bh-lh-lead: 26px;
  --bh-fs-body: 16px;      --bh-lh-body: 26px;
  --bh-fs-prose: 16px;     --bh-lh-prose: 27px;
  --bh-fs-ui: 15px;        --bh-lh-ui: 20px;     /* кнопки, чипы, пункты меню */
  --bh-fs-input: 16px;     /* не меньше 16px на телефоне: иначе iOS увеличивает страницу при фокусе */
  --bh-fs-small: 14px;     --bh-lh-small: 20px;
  --bh-fs-micro: 13px;     --bh-lh-micro: 18px;
  --bh-fs-label: 13px;     --bh-lh-label: 16px;  /* подпись графы, шапка таблицы: Anonymous Pro 700, прописные */
  --bh-fs-table: 15px;     --bh-lh-table: 20px;
  --bh-fs-num: 17px;       --bh-lh-num: 20px;    /* число в ячейке: Anonymous Pro на 2px крупнее соседнего текста */
  --bh-fs-num-s: 14px;     --bh-lh-num-s: 18px;  /* дата, счётчик, номер строки */
  --bh-fs-num-l: 22px;     --bh-lh-num-l: 26px;  /* цена в карточке и шапке обзора */
  --bh-fs-num-xl: 32px;    --bh-lh-num-xl: 36px; /* итог калькулятора: один на экран */
  --bh-fs-quote: 20px;     --bh-lh-quote: 28px;  /* Old Standard TT, курсив */
  --bh-fs-brand: 22px;     /* рабочее название в шапке */

  --bh-ls-heading: -0.005em;
  --bh-ls-caps: 0.06em;        /* прописные подписи граф и бейджи */
  --bh-ws-num: -0.22em;        /* word-spacing моноширинных чисел: пробел между разрядами 0,33em вместо 0,55em */

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

  /* ---------- Сетка ---------- */
  --bh-container: 1400px;  /* наружная ширина контейнера вместе с боковыми полями */
  --bh-gutter: 16px;       /* боковое поле */
  --bh-cols: 4;
  --bh-gap: 16px;          /* межколонник */
  --bh-section: 40px;      /* между блоками страницы */
  --bh-block-gap: 16px;    /* между заголовком блока и содержимым */
  --bh-measure: 68ch;      /* предел ширины текста */
  --bh-aside-w: clamp(320px, 26vw, 380px);  /* калькулятор на первом экране от 1200px: 320px на 1200, 374px на 1440 */

  --bh-folio-h: 28px;      /* колонтитул: верхняя строка шапки */
  --bh-mast-h: 56px;       /* строка знака и названия */
  --bh-nav-h: 44px;        /* строка разделов, от 1200px */
  --bh-control-h: 44px;    /* кнопка, поле, выпадающий список */
  --bh-control-h-s: 36px;
  --bh-control-h-l: 48px;
  --bh-control-h-xs: 28px; /* только кнопки в строке ведомости от 768px */
  --bh-chip-h: 40px;
  --bh-tab-h: 44px;
  --bh-row-h: 72px;        /* минимальная высота строки ведомости от 768px */
  --bh-line-h: 40px;       /* минимальная высота строки-графы: параметр карточки, строка дебета и кредита */
  --bh-cmpbar-h: 56px;

  /* ---------- Формы: радиусы и линии ---------- */
  --bh-r-0: 0;             /* таблица, карточка, лист калькулятора, панели, клетка оценки, строка «Итого» */
  --bh-r-1: 2px;           /* кнопки, поля, чипы, бейджи, плитка логотипа, верхние углы закладок */
  --bh-r-round: 50%;       /* только радиокнопка */

  --bh-bw: 1px;            /* линовка, графа, поле */
  --bh-bw-rule: 2px;       /* линейка под шапкой таблицы, перекладина счёта, рамка клетки оценки */
  --bh-bw-double: 3px;     /* двойная линия: поля, низ шапки сайта, верх строки «Итого» в тексте */
  --bh-bw-mark: 3px;       /* метка активной закладки и активной сортировки */
  --bh-border: 1px solid var(--bh-line);
  --bh-border-strong: 1px solid var(--bh-line-strong);
  --bh-border-ink: 1px solid var(--bh-line-ink);
  --bh-rule: 2px solid var(--bh-line-ink);
  --bh-rule-double: 3px double var(--bh-line-ink);
  --bh-margin-line: 3px double var(--bh-margin);   /* красная линия полей: две линии по 1px с просветом 1px */
  --bh-border-score: 2px solid var(--bh-accent);
  --bh-border-dashed: 1px dashed var(--bh-line-strong);  /* «не применяется», пустая клетка, место под сервис в сравнении */

  --bh-focus: 2px solid var(--bh-text);
  --bh-focus-on-dark: 2px solid var(--bh-on-dark);
  --bh-focus-offset: 2px;

  /* ---------- Фирменные элементы ---------- */
  --bh-margin-w: 28px;     /* ширина поля слева от линии: номер строки, знак «плюс» или «минус» */
  --bh-margin-gap: 12px;   /* от линии полей до содержимого */

  --bh-score-s-w: 44px;    --bh-score-s-h: 28px;   /* клетка оценки в строке ведомости */
  --bh-score-m-w: 56px;    --bh-score-m-h: 36px;   /* карточка, тройка, шапка сравнения */
  --bh-score-l-w: 96px;    --bh-score-l-h: 72px;   /* шапка обзора и блок оценки: одна на страницу */
  --bh-score-fs-s: 16px;
  --bh-score-fs-m: 20px;
  --bh-score-fs-l: 40px;
  --bh-cell: 12px;         /* клетка шкалы критерия: пять в ряд */
  --bh-cell-gap: 2px;

  --bh-total-pad: 12px 16px;  /* поля строки «Итого» */
  --bh-box-pad: 16px;         /* поля внутри рамки: калькулятор, карточка, врезка */

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

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

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

/* ---------- 768px: планшет ---------- */
@media (min-width: 768px) {
  :root {
    --bh-fs-h1: 34px;        --bh-lh-h1: 38px;
    --bh-fs-h2: 27px;        --bh-lh-h2: 32px;
    --bh-fs-h3: 22px;        --bh-lh-h3: 28px;
    --bh-fs-lead: 18px;      --bh-lh-lead: 28px;
    --bh-fs-prose: 17px;     --bh-lh-prose: 29px;
    --bh-fs-input: 15px;
    --bh-fs-num-xl: 40px;    --bh-lh-num-xl: 44px;
    --bh-fs-quote: 22px;     --bh-lh-quote: 30px;
    --bh-fs-brand: 24px;

    --bh-gutter: 24px;
    --bh-cols: 8;
    --bh-gap: 20px;
    --bh-section: 48px;
    --bh-block-gap: 20px;

    --bh-folio-h: 32px;
    --bh-mast-h: 64px;
    --bh-control-h: 40px;
    --bh-control-h-s: 32px;
    --bh-chip-h: 32px;
    --bh-tab-h: 40px;
    --bh-cmpbar-h: 64px;

    --bh-margin-w: 40px;
    --bh-margin-gap: 16px;
    --bh-box-pad: 20px;
    --bh-total-pad: 12px 20px;
    --bh-mark: 32px;
  }
}

/* ---------- 1200px: десктоп ---------- */
@media (min-width: 1200px) {
  :root {
    --bh-fs-h1: 40px;        --bh-lh-h1: 44px;
    --bh-fs-h2: 31px;        --bh-lh-h2: 36px;
    --bh-fs-h3: 24px;        --bh-lh-h3: 30px;
    --bh-fs-h4: 19px;        --bh-lh-h4: 26px;
    --bh-fs-lead: 19px;      --bh-lh-lead: 30px;
    --bh-fs-num-xl: 48px;    --bh-lh-num-xl: 52px;
    --bh-fs-quote: 24px;     --bh-lh-quote: 32px;
    --bh-fs-brand: 26px;

    --bh-gutter: 32px;
    --bh-cols: 12;
    --bh-gap: 24px;
    --bh-section: 64px;
    --bh-block-gap: 24px;

    --bh-box-pad: 24px;
    --bh-mark: 36px;
  }
}