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

@import url("https://fonts.googleapis.com/css2?family=PT+Mono&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Prata&display=swap");

:root {
  /* ---------- Цвет: бумага ---------- */
  --st-bg: #F2F6F8;            /* фон страницы — холодная бумага (зерно) */
  --st-surface: #FFFFFF;       /* лист: бланк калькулятора, карточка, поле ввода, раскрытая строка, выпадающий список */
  --st-bg-2: #E6EDF1;          /* строка, чип и пункт меню под курсором */
  --st-bg-3: #D8E2E8;          /* дорожка шкалы, заливка disabled, полоса подзаголовка группы; красный текст здесь запрещён (4,47:1) */

  /* ---------- Цвет: текст ---------- */
  --st-text: #102A43;          /* зерно, ink: текст, заголовки, цифры — 13,47:1 к фону, 14,64:1 к листу */
  --st-text-muted: #486581;    /* подписи, примечания, шапка таблицы, прочерк «—» — 5,59:1 к фону, 6,08:1 к листу, 4,62:1 к --st-bg-3 */
  --st-text-faint: #8FA3B1;    /* только disabled — 2,40:1; для смыслового текста не использовать */

  /* ---------- Цвет: линии ---------- */
  --st-line: #C8D5DD;          /* волосная линия: строки таблицы, разделители, рамка карточки списка */
  --st-line-strong: #6F8797;   /* граница поля, чипа, плитки логотипа, пунктир пустого штампа — 3,46:1 к фону, 3,76:1 к листу */
  --st-line-ink: #102A43;      /* линейка раздела, шапка таблицы, граница вторичной кнопки */

  /* ---------- Цвет: акцент — красный штамп (штамп надёжности и основная кнопка) ---------- */
  --st-accent: #C8102E;        /* зерно — 5,41:1 к фону, 5,88:1 к листу */
  --st-on-accent: #FFFFFF;     /* текст на акценте — 5,88:1 */
  --st-accent-deep: #A30D25;   /* кнопка под курсором — белый на нём 7,95:1 */
  --st-accent-press: #840A1E;  /* нажатие — 10,28:1 */
  --st-accent-tint: #FBE6E9;   /* подложка крупного штампа в блоке «Штамп надёжности»; текст на ней — --st-accent-deep (6,66:1) или --st-text */
  --st-accent-on-dark: #FF94A1;/* штамп и знак на тёмном — 6,97:1 */

  /* ---------- Цвет: второй акцент — петроль (ссылки, выбранное, гильош, шкалы) ---------- */
  --st-accent-2: #0F4C5C;      /* зерно — 8,74:1 к фону, 9,51:1 к листу */
  --st-on-accent-2: #F2F6F8;   /* текст на петроле — 8,74:1 */
  --st-accent-2-deep: #0A3742; /* под курсором — 11,79:1 */
  --st-accent-2-tint: #DDEBEE; /* подложка выбранной строки, врезки «Коротко», лучшего значения в сравнении — петроль на ней 7,78:1 */
  --st-accent-2-on-dark: #8FD0DC; /* ссылка на тёмном — 8,52:1 */

  /* ---------- Цвет: состояния (всегда вместе со словом) ---------- */
  --st-success: #1B6B43;       /* «оформляется онлайн», «есть» — 5,98:1 к фону */
  --st-success-tint: #DDEEE4;  /* 5,39:1 */
  --st-warning: #8A5200;       /* «ориентир», «данные старше полугода» — 5,87:1 */
  --st-warning-tint: #FBEBCB;  /* 5,43:1 */
  --st-error: #A93608;         /* ошибки форм — сурик, теплее штампа; 6,00:1 */
  --st-error-tint: #FBE3D6;    /* 5,30:1 */

  /* ---------- Цвет: тёмная поверхность (подвал, панель сравнения, подсказка) ---------- */
  --st-dark: #102A43;
  --st-on-dark: #F2F6F8;       /* 13,47:1 */
  --st-on-dark-muted: #B4C4CF; /* 8,18:1 */
  --st-dark-line: #3A536B;

  /* ---------- Шрифты ---------- */
  --st-font-heading: "Prata", "PT Sans", Georgia, serif;   /* PT Sans вторым: в Prata нет ₽, № и многоточия */
  --st-font-body: "PT Sans", "Helvetica Neue", Arial, sans-serif;
  --st-font-mono: "PT Mono", Menlo, Consolas, "Courier New", monospace;

  --st-fw-regular: 400;        /* Prata и PT Mono — только 400, полужирное не синтезировать */
  --st-fw-bold: 700;           /* только PT Sans */

  /* ---------- Размеры текста: телефон (база) ---------- */
  --st-fs-h1: 26px;        --st-lh-h1: 1.18;
  --st-fs-h2: 22px;        --st-lh-h2: 1.22;
  --st-fs-h3: 18px;        --st-lh-h3: 1.3;
  --st-fs-h4: 16px;        --st-lh-h4: 1.35;
  --st-fs-lead: 17px;      --st-lh-lead: 1.5;
  --st-fs-body: 16px;      --st-lh-body: 1.55;
  --st-fs-prose: 16px;     --st-lh-prose: 1.65;
  --st-fs-ui: 15px;        --st-lh-ui: 1.35;
  --st-fs-input: 16px;     /* не меньше 16px: иначе iOS увеличивает страницу при фокусе */
  --st-fs-small: 14px;     --st-lh-small: 1.45;
  --st-fs-micro: 12px;     --st-lh-micro: 1.35;
  --st-fs-th: 12px;        --st-lh-th: 1.3;
  --st-fs-table: 15px;     --st-lh-table: 1.4;
  --st-fs-num: 15px;       /* моноширинное значение в строке */
  --st-fs-num-s: 12px;     /* номер в реестре, дата, строка-номер */
  --st-fs-num-l: 20px;     /* ключевое число карточки */
  --st-fs-score-row: 24px; /* оценка в строке */
  --st-fs-score-card: 32px;/* оценка в карточке тройки */
  --st-fs-score-xl: 40px;  /* оценка в паспорте компании */
  --st-fs-total: 28px;     --st-lh-total: 1.15;  /* диапазон калькулятора */
  --st-fs-stamp: 17px;     /* значение рейтинга в штампе */
  --st-fs-stamp-l: 28px;   /* крупный штамп */
  --st-fs-stamp-cap: 11px; /* строка в штампе, прописные */
  --st-fs-brand: 20px;

  --st-ls-heading: 0;
  --st-ls-caps: 0.06em;        /* прописные подписи, шапка таблицы */
  --st-ls-serial: 0.08em;      /* строка-номер */
  --st-ls-total: -0.02em;      /* крупные моноширинные цифры */
  --st-ws-num: -0.25em;        /* word-spacing моноширинных чисел: пробел между разрядами уже */

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

  /* ---------- Сетка ---------- */
  --st-container: 1400px;  /* наружная ширина контейнера вместе с полями */
  --st-gutter: 16px;       /* боковое поле */
  --st-cols: 4;
  --st-gap: 16px;          /* межколонник */
  --st-section: 40px;      /* между блоками страницы */
  --st-block-gap: 16px;    /* между шапкой блока и содержимым */
  --st-pad: 16px;          /* внутреннее поле карточки и бланка */
  --st-measure: 72ch;      /* предел ширины текста */

  --st-topline-h: 28px;    /* строка «Данные проверены» */
  --st-bar-h: 56px;        /* строка названия */
  --st-nav-h: 44px;        /* строка разделов, от 1200px */
  --st-control-h: 44px;    /* кнопка, поле, выпадающий список */
  --st-control-h-s: 36px;
  --st-control-h-l: 48px;
  --st-chip-h: 40px;
  --st-row-h: 88px;        /* минимальная высота строки таблицы */
  --st-cmpbar-h: 56px;
  --st-logo: 48px;         /* плитка логотипа в строке */
  --st-logo-s: 40px;
  --st-logo-xs: 28px;
  --st-logo-l: 64px;
  --st-ico: 20px;
  --st-ico-l: 24px;
  --st-ico-s: 16px;

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

  --st-bw: 1px;            /* строка, поле, карточка */
  --st-bw-rule: 2px;       /* линейка раздела, шапка таблицы, итог бланка */
  --st-bw-mark: 3px;       /* метка: активная вкладка, врезка, активная сортировка */
  --st-bw-stamp: 2px;      /* рамка штампа */
  --st-bw-stamp-l: 3px;    /* рамка крупного штампа */
  --st-border: 1px solid var(--st-line);
  --st-border-strong: 1px solid var(--st-line-strong);
  --st-border-ink: 1px solid var(--st-line-ink);
  --st-rule: 2px solid var(--st-line-ink);
  --st-dots: 1px dotted var(--st-line-strong);   /* отточие в строках бланка */

  --st-focus: 2px solid var(--st-text);          /* :focus-visible; на тёмном — var(--st-on-dark) */
  --st-focus-offset: 2px;

  /* ---------- Фирменный приём ---------- */
  --st-guil-w: 8px;        /* толщина рамки-гильоша; от 768px — 12px */
  --st-stamp-rot: -3deg;   /* наклон штампа */
  --st-stamp-rot-l: -5deg; /* наклон крупного штампа */

  /* рамка-гильош: border-image, картинка 36×36, срез 12 */
  --st-guil-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='36' height='36' viewBox='0 0 36 36' fill='none' stroke='%230F4C5C'%3E%3Cdefs%3E%3Cg id='e'%3E%3Cpath stroke-width='1' d='M0 .5h12M0 11.5h12'/%3E%3Cpath stroke-width='.7' d='M0 6q3-7 6 0t6 0M0 6q3 7 6 0t6 0M-3 6q3-7 6 0t6 0t6 0M-3 6q3 7 6 0t6 0t6 0'/%3E%3C/g%3E%3Cg id='c'%3E%3Cpath stroke-width='1' d='M12 .5H.5V12M12 11.5h-.5v.5'/%3E%3Ccircle cx='6' cy='6' r='3.4' stroke-width='.8'/%3E%3Cpath stroke-width='.7' d='M6 1.6v8.8M1.6 6h8.8M2.9 2.9l6.2 6.2M9.1 2.9L2.9 9.1'/%3E%3C/g%3E%3C/defs%3E%3Csvg width='12' height='12'%3E%3Cuse xlink:href='%23c'/%3E%3C/svg%3E%3Csvg x='12' width='12' height='12'%3E%3Cuse xlink:href='%23e'/%3E%3C/svg%3E%3Csvg x='24' width='12' height='12'%3E%3Cuse xlink:href='%23c' transform='rotate(90 6 6)'/%3E%3C/svg%3E%3Csvg y='12' width='12' height='12'%3E%3Cuse xlink:href='%23e' transform='rotate(90 6 6)'/%3E%3C/svg%3E%3Csvg x='24' y='12' width='12' height='12'%3E%3Cuse xlink:href='%23e' transform='rotate(90 6 6)'/%3E%3C/svg%3E%3Csvg y='24' width='12' height='12'%3E%3Cuse xlink:href='%23c' transform='rotate(270 6 6)'/%3E%3C/svg%3E%3Csvg x='12' y='24' width='12' height='12'%3E%3Cuse xlink:href='%23e'/%3E%3C/svg%3E%3Csvg x='24' y='24' width='12' height='12'%3E%3Cuse xlink:href='%23c' transform='rotate(180 6 6)'/%3E%3C/svg%3E%3C/svg%3E");
  /* лента-гильош: плитка 12×12, repeat-x */
  --st-guil-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%230F4C5C'%3E%3Cpath stroke-width='1' d='M0 .5h12M0 11.5h12'/%3E%3Cpath stroke-width='.7' d='M0 6q3-7 6 0t6 0M0 6q3 7 6 0t6 0M-3 6q3-7 6 0t6 0t6 0M-3 6q3 7 6 0t6 0t6 0'/%3E%3C/svg%3E");
  /* бумага с водяной сеткой: плитка 48×24, линии #E1EAEF по фону #F2F6F8 (контраст 1,11:1 — только фактура) */
  --st-paper-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24' fill='none' stroke='%23E1EAEF' stroke-width='1'%3E%3Cpath d='M0 12q12-22 24 0t24 0M0 12q12 22 24 0t24 0M-12 12q12-22 24 0t24 0t24 0M-12 12q12 22 24 0t24 0t24 0'/%3E%3C/svg%3E");

  /* ---------- Слои и движение ---------- */
  --st-z-sticky: 10;       /* шапка таблицы */
  --st-z-cmpbar: 40;       /* панель сравнения */
  --st-z-menu: 60;         /* мобильное меню — выше панели сравнения */
  --st-z-tip: 70;
  --st-t: 120ms linear;    /* цвет фона и рамки под курсором; больше ничего не анимируется */
}

@media (min-width: 768px) {
  :root {
    --st-fs-h1: 34px;      --st-lh-h1: 1.15;
    --st-fs-h2: 26px;      --st-lh-h2: 1.2;
    --st-fs-h3: 20px;
    --st-fs-h4: 17px;
    --st-fs-lead: 18px;
    --st-fs-prose: 17px;
    --st-fs-total: 30px;
    --st-fs-score-xl: 48px;
    --st-fs-brand: 22px;

    --st-gutter: 24px;
    --st-cols: 8;
    --st-section: 48px;
    --st-block-gap: 20px;
    --st-pad: 20px;
    --st-guil-w: 12px;
  }
}

@media (min-width: 1200px) {
  :root {
    --st-fs-h1: 40px;      --st-lh-h1: 1.12;
    --st-fs-h2: 30px;      --st-lh-h2: 1.18;
    --st-fs-h3: 22px;
    --st-fs-total: 32px;

    --st-gutter: 32px;
    --st-cols: 12;
    --st-gap: 24px;
    --st-section: 64px;
    --st-block-gap: 24px;
    --st-pad: 24px;
    --st-chip-h: 36px;
  }
}