/* ==========================================================================
   Виртуальные и зарубежные карты — токены дизайн-системы «Маршрут платежа»
   Префикс переменных и классов: vk. Описание системы: ../../05-design.md
   В файле только подключение шрифтов и переменные. Стилей элементов здесь нет.
   Правило системы: плоско. Градиентов, теней, размытия и свечения нет нигде.
   Пунктир маршрута и сетка карты — SVG в data-URI, а не CSS-градиенты.
   Контраст в комментариях посчитан по формуле WCAG 2.1 (октябрь 2026).
   Медиазапросы в проекте только два: min-width 768px и min-width 1200px.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@400..800&family=Victor+Mono:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;

  /* ---------- Цвет: лист карты ---------- */
  --vk-bg: #F7FAFC;              /* фон страницы — холодный белый (зерно) */
  --vk-surface: #FFFFFF;         /* поверхность: панели, таблицы, карточки, поля ввода */
  --vk-surface-2: #E9F0F5;       /* шапка таблицы, строка при наведении, плитка логотипа, нейтральные метки */

  /* ---------- Цвет: чернила ---------- */
  --vk-ink: #0B132B;             /* основной текст (зерно) — 17,54:1 на фоне, 18,38:1 на поверхности, 15,97:1 на surface-2 */
  --vk-muted: #3F4A63;           /* приглушённый текст — 8,45:1 на фоне, 8,86:1 на поверхности, 7,70:1 на surface-2 */
  --vk-quiet: #586279;           /* подписи, шапки таблиц, пустые значения — 5,83:1 / 6,11:1 / 5,31:1 */

  /* ---------- Цвет: линии ---------- */
  --vk-line: #D3DDE7;            /* разделители и рамки панелей (декоративные, 1,31:1) */
  --vk-line-strong: #76849B;     /* рамки полей, чипов, плитки логотипа — 3,61:1 на фоне, 3,79:1 на поверхности, 3,29:1 на surface-2 */
  --vk-line-ink: #0B132B;        /* жирные линии: низ шапки, верх панели, шапка таблицы, вторичная кнопка, обводка точки маршрута */

  /* ---------- Цвет: акцент — бирюза (зерно). Смысл: путь денег, «проходит», «выбрано», «дешевле» ---------- */
  --vk-accent: #00A8CC;          /* заливка основной кнопки, пунктир маршрута, заливка отметки в матрице. Как текст на светлом НЕ годится: 2,68:1 */
  --vk-accent-hover: #0096B6;    /* основная кнопка при наведении — текст ink 5,29:1 */
  --vk-accent-active: #008FAE;   /* основная кнопка при нажатии — текст ink 4,85:1 */
  --vk-on-accent: #0B132B;       /* текст на бирюзовой заливке — 6,54:1. Белый на бирюзе запрещён: 2,81:1 */
  --vk-accent-text: #006F87;     /* бирюзовый для текста и ссылок — 5,53:1 на фоне, 5,80:1 на поверхности, 5,04:1 на surface-2 и на accent-bg */
  --vk-accent-bg: #DDF3F8;       /* подложка «выбрано», «дешевле», справка — ink 15,98:1, muted 7,70:1, quiet 5,31:1 */

  /* ---------- Цвет: второй акцент — коралл (зерно). Смысл: здесь берут плату или есть риск ---------- */
  --vk-accent-2: #FF6B6B;        /* заливка точки «комиссия» на маршруте, черта блока рисков, отметка «бывают отказы». Как текст на светлом НЕ годится: 2,65:1 */
  --vk-accent-2-hover: #EE5252;  /* та же заливка при наведении — текст ink 5,22:1 */
  --vk-on-accent-2: #0B132B;     /* текст на коралловой заливке — 6,62:1. Белый на коралле запрещён: 2,78:1 */
  --vk-accent-2-text: #B4303A;   /* коралловый для текста: «дороже на…», минусы — 5,85:1 на фоне, 6,13:1 на поверхности, 5,33:1 на surface-2, 5,24:1 на accent-2-bg */
  --vk-accent-2-bg: #FFE8E6;     /* подложка блока рисков — ink 15,70:1, muted 7,57:1 */

  /* ---------- Цвет: ночная карта (тёмные панели) ---------- */
  --vk-night: #0B132B;           /* фон подвала, панели сравнения, строки «Итог за срок», подсказки */
  --vk-night-2: #141D3A;         /* вложенная плашка на тёмном, вторичная кнопка при нажатии */
  --vk-night-ink: #F7FAFC;       /* текст на тёмном — 17,54:1 (на night-2 15,82:1) */
  --vk-night-muted: #A8B4C9;     /* подписи на тёмном — 8,79:1 (на night-2 7,92:1) */
  --vk-night-accent: #00A8CC;    /* бирюза на тёмном: ссылки при наведении, пунктир — 6,54:1 */
  --vk-night-accent-2: #FF6B6B;  /* коралл на тёмном: «дороже на…» — 6,62:1 */
  --vk-night-line: #2A3554;      /* разделители на тёмном (декоративные) */
  --vk-night-line-strong: #6E7C99; /* рамки полей, кнопок и пустого слота на тёмном — 4,38:1 */

  /* ---------- Цвет: состояния ---------- */
  --vk-success: #12754C;         /* «расчёт полный», плюсы — 5,45:1 на фоне, 5,71:1 на поверхности, 4,97:1 на surface-2 */
  --vk-success-bg: #DFF2E7;      /* подложка успеха — текст success 4,90:1, ink 15,75:1 */
  --vk-warning: #7D5200;         /* текст предупреждения — 6,51:1 на фоне, 6,82:1 на поверхности */
  --vk-warning-bg: #FFF0C9;      /* подложка предупреждения — текст warning 6,03:1, ink 16,25:1 */
  --vk-warning-line: #B77A00;    /* черта предупреждения — 3,46:1 на фоне, 3,62:1 на поверхности */
  --vk-error: #B3261E;           /* текст ошибки формы — 6,24:1 на фоне, 6,54:1 на поверхности */
  --vk-error-bg: #FDE6E3;        /* подложка ошибки — текст error 5,48:1, ink 15,41:1 */
  --vk-info: #006F87;            /* текст справки (= accent-text) */
  --vk-info-bg: #DDF3F8;         /* подложка справки (= accent-bg) */
  --vk-disabled-bg: #E3E9EF;     /* выключенная кнопка: заливка */
  --vk-disabled-ink: #7B8698;    /* выключенная кнопка: текст — 3,01:1 (неактивный элемент) */
  --vk-focus: #0B132B;           /* кольцо фокуса на светлом: 2px, отступ 2px. Бирюзовое кольцо не делаем: 2,68:1 */
  --vk-focus-on-night: #F7FAFC;  /* кольцо фокуса на тёмном */

  /* ---------- Шрифты (зерно): заголовки и текст — Geologica, цифры — Victor Mono ---------- */
  --vk-font-head: "Geologica", "Segoe UI", Roboto, Arial, sans-serif;
  --vk-font-body: "Geologica", "Segoe UI", Roboto, Arial, sans-serif;
  --vk-font-mono: "Victor Mono", "Geologica", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* В Victor Mono нет знаков ₽, №, ₸, ₺, ₴ (проверено по таблице знаков шрифта). Geologica стоит вторым в стеке,
     поэтому эти знаки берутся из неё. Знак рубля дополнительно оборачивается в .vk-unit (Geologica 500).
     Галочки нет в обоих шрифтах: галочки и стрелки — только SVG-иконками. */

  /* ---------- Типографика: заголовки (Geologica) — значения для 390px ---------- */
  --vk-h1-size: 28px;       --vk-h1-lh: 1.12;  --vk-h1-weight: 700;  --vk-h1-track: -0.025em;
  --vk-h1-hero-size: 24px;  --vk-h1-hero-lh: 1.15;                   /* длинный H1 главной и страниц с инструментом */
  --vk-h2-size: 22px;       --vk-h2-lh: 1.18;  --vk-h2-weight: 700;  --vk-h2-track: -0.02em;
  --vk-h3-size: 18px;       --vk-h3-lh: 1.25;  --vk-h3-weight: 600;  --vk-h3-track: -0.01em;
  --vk-h4-size: 16px;       --vk-h4-lh: 1.3;   --vk-h4-weight: 600;  --vk-h4-track: 0;

  /* ---------- Типографика: текст (Geologica) ---------- */
  --vk-lead-size: 17px;      --vk-lead-lh: 1.5;
  --vk-text-size: 16px;      --vk-text-lh: 1.6;
  --vk-small-size: 14px;     --vk-small-lh: 1.45;
  --vk-caption-size: 12.5px; --vk-caption-lh: 1.35;   /* мельче 12,5px текста на сайте нет */
  --vk-weight-regular: 400;
  --vk-weight-medium: 500;
  --vk-weight-semibold: 600;
  --vk-weight-bold: 700;
  --vk-weight-black: 800;    /* только рабочее название в шапке */

  /* ---------- Типографика: таблица ---------- */
  --vk-th-size: 12.5px;      --vk-th-lh: 1.25;  --vk-th-weight: 600;   /* Geologica, без капса и разрядки */
  --vk-td-size: 14.5px;      --vk-td-lh: 1.35;
  --vk-td-num-size: 15px;    --vk-td-num-weight: 600;                   /* Victor Mono */

  /* ---------- Типографика: цифры (Victor Mono; тонкий шрифт — начертание не ниже 500) ---------- */
  --vk-num-size: 15px;       --vk-num-weight: 600;    /* цена, комиссия, лимит в строке */
  --vk-num-sm-size: 12.5px;  --vk-num-sm-weight: 500; /* дата проверки, формула, счётчик */
  --vk-fig-md-size: 20px;    --vk-fig-md-weight: 700; /* значение в сравнении лоб-в-лоб, «цифры раздела» */
  --vk-fig-lg-size: 28px;    --vk-fig-lg-weight: 700; /* «Итог за срок»; в компактном сравнении на первом экране — 28px на всех ширинах */
  --vk-score-size: 16px;     --vk-score-weight: 700;
  --vk-score-lg-size: 32px;
  --vk-num-track: -0.01em;

  /* ---------- Типографика: кнопки, навигация, метки ---------- */
  --vk-btn-size: 15px;       --vk-btn-weight: 600;
  --vk-btn-sm-size: 14px;
  --vk-nav-size: 14px;       --vk-nav-weight: 500;
  --vk-badge-size: 12.5px;   --vk-badge-weight: 600;
  --vk-brand-size: 17px;     --vk-brand-track: -0.02em;

  /* ---------- Сетка ---------- */
  --vk-container: 1400px;    /* предел ширины содержимого */
  --vk-gutter: 16px;         /* поля контейнера */
  --vk-cols: 4;
  --vk-gap: 16px;            /* межколонник */
  --vk-prose: 760px;         /* предел ширины текстовой колонки */

  /* ---------- Отступы (шаг 4px) ---------- */
  --vk-s-1: 2px;
  --vk-s-2: 4px;
  --vk-s-3: 8px;
  --vk-s-4: 12px;
  --vk-s-5: 16px;
  --vk-s-6: 20px;
  --vk-s-7: 24px;
  --vk-s-8: 32px;
  --vk-s-9: 40px;
  --vk-s-10: 56px;
  --vk-s-11: 72px;
  --vk-section: 40px;        /* между блоками страницы */
  --vk-panel-pad: 16px;      /* внутренние поля панели и карточки */
  --vk-cell-pad-y: 12px;     /* ячейка таблицы */
  --vk-cell-pad-x: 10px;

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

  /* ---------- Линии ---------- */
  --vk-bw: 1px;              /* разделители, рамки панелей, полей и чипов */
  --vk-bw-2: 2px;            /* низ шапки, верх панели и FAQ, шапка таблицы, обводка точки, кольцо фокуса */
  --vk-bw-3: 3px;            /* активная вкладка, левая черта врезки и «дешевле» */
  --vk-focus-ring: 2px solid var(--vk-focus);
  --vk-focus-offset: 2px;

  /* ---------- Фирменный приём: маршрут ---------- */
  --vk-route-w: 2px;         /* толщина пунктира */
  --vk-route-step: 12px;     /* штрих 6px + пробел 6px */
  --vk-node: 12px;           /* точка маршрута (с обводкой 2px ink) */
  --vk-node-sm: 8px;         /* точка в строке сравнения и в шкале критерия (обводка 2px ink) */
  --vk-mark: 18px;           /* отметка в матрице «что оплачивает» */
  /* горизонтальный пунктир: background: var(--vk-route-h) repeat-x; height: var(--vk-route-w) */
  --vk-route-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2'%3E%3Crect width='6' height='2' fill='%2300A8CC'/%3E%3C/svg%3E");
  /* вертикальный пунктир: background: var(--vk-route-v) repeat-y; width: var(--vk-route-w) */
  --vk-route-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='12'%3E%3Crect width='2' height='6' fill='%2300A8CC'/%3E%3C/svg%3E");
  /* нейтральный пунктир (несостоявшийся отрезок, пустой слот, остаток шкалы) — цвет line-strong */
  --vk-route-h-quiet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='2'%3E%3Crect width='6' height='2' fill='%2376849B'/%3E%3C/svg%3E");
  --vk-route-v-quiet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='12'%3E%3Crect width='2' height='6' fill='%2376849B'/%3E%3C/svg%3E");
  /* сетка карты (параллели и меридианы), клетка 32px: только фон первого экрана, блока маршрута и страницы 404 */
  --vk-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 .5H32M.5 0V32' stroke='%23E4ECF2'/%3E%3C/svg%3E");
  /* та же сетка для подвала */
  --vk-grid-night: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 .5H32M.5 0V32' stroke='%23141D3A'/%3E%3C/svg%3E");

  /* ---------- Размеры элементов ---------- */
  --vk-header-h: 56px;
  --vk-control-h: 44px;      /* поля, кнопки md, вкладки, чипы на телефоне */
  --vk-control-h-sm: 36px;   /* кнопки в строке таблицы, чипы на десктопе */
  --vk-control-h-lg: 52px;   /* главная кнопка в шапке обзора и в итоге сравнения */
  --vk-badge-h: 22px;
  --vk-logo-sm: 32px;
  --vk-logo-md: 44px;
  --vk-logo-lg: 64px;
  --vk-icon-sm: 16px;
  --vk-icon: 20px;
  --vk-icon-lg: 24px;
  --vk-icon-stroke: 1.5px;
  --vk-tap: 44px;            /* минимальная область нажатия */
  --vk-cmpbar-h: 64px;

  /* ---------- Слои ---------- */
  --vk-z-cmpbar: 40;
  --vk-z-header: 50;
  --vk-z-menu: 60;
  --vk-z-sheet: 70;
  --vk-z-tip: 80;

  /* ---------- Движение ---------- */
  --vk-t: 120ms ease-out;    /* цвет, рамка, фон; сдвигов и масштабирования при наведении нет */
}

/* ---------- Планшет: от 768px ---------- */
@media (min-width: 768px) {
  :root {
    --vk-h1-size: 34px;
    --vk-h1-hero-size: 30px;
    --vk-h2-size: 26px;
    --vk-h3-size: 19px;
    --vk-lead-size: 18px;
    --vk-fig-lg-size: 32px;
    --vk-gutter: 24px;
    --vk-cols: 8;
    --vk-gap: 20px;
    --vk-section: 56px;
    --vk-panel-pad: 20px;
  }
}

/* ---------- Десктоп: от 1200px ---------- */
@media (min-width: 1200px) {
  :root {
    --vk-h1-size: 40px;
    --vk-h1-hero-size: 34px;
    --vk-h2-size: 30px;
    --vk-h3-size: 21px;
    --vk-h4-size: 17px;
    --vk-caption-size: 13px;
    --vk-th-size: 13px;
    --vk-fig-md-size: 22px;
    --vk-fig-lg-size: 36px;
    --vk-gutter: 32px;
    --vk-cols: 12;
    --vk-gap: 24px;
    --vk-section: 72px;
    --vk-panel-pad: 24px;
    --vk-header-h: 64px;
  }
}