/* ==========================================================================
   Пополнение Steam и игровых кошельков — токены дизайн-системы «Пиксельный магазин»
   Префикс переменных и классов: sg. Описание системы: ../../05-design.md
   В файле только подключение шрифтов и переменные. Стилей элементов здесь нет.
   Правило системы: плоско и угловато. Плавных переходов цвета, размытия, свечения
   и мягких теней нет нигде; скруглений нет — их заменяет «срезанный пиксель» в углах
   рамки (рисуется в components.css жёсткими смещениями без размытия, см. 05-design.md, 6.1).
   Все размеры кратны 2px — это один «пиксель» системы.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Scada:ital,wght@0,400;0,700;1,400&family=Ubuntu+Mono:wght@400;700&display=swap");

:root {
  color-scheme: dark;

  /* ---------- Цвет: фон и поверхности ---------- */
  --sg-bg: #12141C;              /* фон страницы (зерно) */
  --sg-surface: #1B1E2A;         /* поверхность: карточка, панель фильтров, строка при наведении, врезка */
  --sg-surface-2: #252938;       /* вторая поверхность: шапка таблицы, подсказка, панель сравнения, выключенная кнопка */
  --sg-sunken: #0B0C12;          /* «углубление»: ячейка инвентаря, поле ввода, дорожка шкалы, подвал */

  /* ---------- Цвет: текст ---------- */
  --sg-ink: #E6E6E6;             /* основной текст (зерно) — 14,73:1 на фоне, 13,29:1 на поверхности, 11,58:1 на второй, 15,64:1 в углублении */
  --sg-muted: #B0B4C3;           /* приглушённый текст — 8,89:1 на фоне, 8,03:1 на поверхности, 6,99:1 на второй, 9,45:1 в углублении */
  --sg-quiet: #9297AB;           /* подписи параметров, даты, «—» — 6,33:1 на фоне, 5,72:1 на поверхности, 4,98:1 на второй, 6,73:1 в углублении */

  /* ---------- Цвет: линии ---------- */
  --sg-line: #2E3344;            /* разделители строк и секций (декоративные) — 1,46:1 на фоне */
  --sg-frame: #434A63;           /* пиксельная рамка панели и карточки в покое (декоративная) — 2,10:1 на фоне */
  --sg-line-strong: #6E7594;     /* рамка поля, чипа, флажка, ячейки — 4,06:1 на фоне, 3,66:1 на поверхности, 3,19:1 на второй, 4,31:1 в углублении */

  /* ---------- Цвет: акцент — кислотный лайм (действие и итоговая сумма) ---------- */
  --sg-accent: #B4F000;          /* зерно. Как текст и графика: 13,48:1 на фоне, 12,17:1 на поверхности, 10,60:1 на второй */
  --sg-on-accent: #12141C;       /* текст на лайме — 13,48:1. Белый на лайме даёт 1,36:1 и запрещён */
  --sg-accent-hover: #CBFF3D;    /* заливка основной кнопки при наведении; тёмный текст — 15,68:1 */
  --sg-accent-shade: #7FA800;    /* нижняя «грань» основной кнопки (4px) и нажатое состояние; тёмный текст — 6,57:1 */
  --sg-accent-dim: #222B0C;      /* подложка выбранного чипа, строки «дешевле всех»; основной текст — 11,86:1, лайм — 10,86:1 */

  /* ---------- Цвет: второй акцент — розовый (сравнение, акции, выбор) ---------- */
  --sg-accent-2: #FF4D8D;        /* зерно. Как текст и графика: 5,86:1 на фоне, 5,29:1 на поверхности, 4,61:1 на второй */
  --sg-on-accent-2: #12141C;     /* текст на розовом — 5,86:1. Белый на розовом даёт 3,14:1 и запрещён */
  --sg-accent-2-hover: #FF75A6;  /* заливка розовой кнопки при наведении; тёмный текст — 7,31:1 */
  --sg-accent-2-shade: #B8285F;  /* нижняя «грань» розовой кнопки (4px), текста на ней нет */
  --sg-accent-2-dim: #331522;    /* подложка строки, выбранной для сравнения, и бейджа «акция»; основной текст — 13,24:1, розовый — 5,27:1 */

  /* ---------- Цвет: состояния (всегда со значком и словом) ---------- */
  --sg-success: #4FD98B;         /* плюсы, «зачисляют сразу», «условие подтверждено» — 10,18:1 на фоне, 9,19:1 на поверхности */
  --sg-success-dim: #10281B;     /* подложка бейджа; текст успеха — 8,67:1 */
  --sg-warning: #FFC83D;         /* «комиссию не называет», «сумма вне лимита», средняя ступень шкалы — 11,89:1 на фоне, 10,73:1 на поверхности */
  --sg-warning-dim: #2E2508;     /* подложка; текст предупреждения — 9,81:1 */
  --sg-error: #FF6B5E;           /* ошибка поля, минусы, верхняя ступень шкалы — 6,58:1 на фоне, 5,94:1 на поверхности, 5,17:1 на второй */
  --sg-error-dim: #331512;       /* подложка; текст ошибки — 5,98:1 */

  --sg-disabled-bg: #252938;     /* выключенная кнопка: заливка */
  --sg-disabled-ink: #9297AB;    /* выключенная кнопка: текст — 4,98:1 */
  --sg-focus: #FFFFFF;           /* кольцо фокуса: 2px, отступ 4px (за пределами пиксельной рамки) */
  --sg-link: #B4F000;            /* ссылка в тексте: лайм с подчёркиванием 2px */
  --sg-link-hover: #E6E6E6;      /* при наведении текст светлеет, подчёркивание остаётся лаймовым */
  --sg-selection-bg: #B4F000;
  --sg-selection-ink: #12141C;

  /* ---------- Цвет: шкала комиссии («полоска здоровья») ---------- */
  --sg-hp-low: #B4F000;          /* до 5 % включительно */
  --sg-hp-mid: #FFC83D;          /* больше 5 и до 10 % */
  --sg-hp-high: #FF6B5E;         /* больше 10 % */
  --sg-hp-off: #2E3344;          /* пустое деление */
  --sg-hp-track: #0B0C12;        /* дорожка */

  /* ---------- Цвет: участники сравнения (всегда рядом с названием) ---------- */
  --sg-vs-a: #B4F000;
  --sg-vs-b: #FF4D8D;
  --sg-vs-c: #E6E6E6;

  /* ---------- Цвет: плитка логотипа ---------- */
  --sg-logo-plate: #E6E6E6;      /* светлая подложка: значки сайтов рассчитаны на светлый фон */
  --sg-logo-ink: #12141C;        /* буква — 14,73:1 */

  /* ---------- Шрифты ---------- */
  --sg-font-pixel: "Press Start 2P", "Ubuntu Mono", ui-monospace, monospace;   /* только короткие заголовки, номера, оценка */
  --sg-font-body: "Scada", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sg-font-mono: "Ubuntu Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* цифры; знака ₽ в шрифте нет — его набирать --sg-font-body */

  --sg-weight-regular: 400;
  --sg-weight-bold: 700;         /* у Scada и Ubuntu Mono только 400 и 700; у Press Start 2P — только 400 */

  /* ---------- Типографика: пиксельные заголовки (Press Start 2P 400) ----------
     Разрешённые кегли: 12, 16, 20, 24, 32px. Не длиннее 28 знаков, не больше двух строк. */
  --sg-pixel-xs: 12px;   --sg-pixel-xs-lh: 20px;   /* надзаголовок, заголовок колонки подвала, номер места, подпись ячейки */
  --sg-pixel-s: 16px;    --sg-pixel-s-lh: 24px;    /* заголовок блока до 1200px, оценка в строке */
  --sg-pixel-m: 20px;    --sg-pixel-m-lh: 28px;    /* заголовок блока от 1200px */
  --sg-pixel-l: 24px;    --sg-pixel-l-lh: 32px;    /* оценка в шапке обзора до 768px */
  --sg-pixel-xl: 32px;   --sg-pixel-xl-lh: 40px;   /* оценка в шапке обзора от 768px, «404» */
  --sg-pixel-track: 0;

  /* ---------- Типографика: заголовки (Scada 700) — значения для 390px; от 768 и 1200px см. ниже ---------- */
  --sg-h1-size: 26px;   --sg-h1-lh: 30px;
  --sg-h2-size: 22px;   --sg-h2-lh: 28px;
  --sg-h3-size: 19px;   --sg-h3-lh: 24px;
  --sg-h4-size: 17px;   --sg-h4-lh: 22px;
  --sg-h1-size-md: 32px;  --sg-h1-lh-md: 36px;
  --sg-h2-size-md: 24px;  --sg-h2-lh-md: 30px;
  --sg-h3-size-md: 20px;  --sg-h3-lh-md: 26px;
  --sg-h1-size-lg: 38px;  --sg-h1-lh-lg: 42px;
  --sg-h1-size-home-lg: 34px;  --sg-h1-lh-home-lg: 38px;   /* H1 главной от 1200px: встаёт в одну строку, первый экран ниже не сползает */
  --sg-h2-size-lg: 28px;  --sg-h2-lh-lg: 34px;
  --sg-h3-size-lg: 22px;  --sg-h3-lh-lg: 28px;
  --sg-h4-size-lg: 18px;  --sg-h4-lh-lg: 24px;
  --sg-head-track: -0.01em;

  /* ---------- Типографика: текст (Scada) ---------- */
  --sg-lead-size: 17px;   --sg-lead-lh: 26px;      /* от 1200px — 18px / 28px */
  --sg-lead-size-lg: 18px;  --sg-lead-lh-lg: 28px;
  --sg-text-size: 16px;   --sg-text-lh: 25px;
  --sg-ui-size: 15px;     --sg-ui-lh: 20px;        /* кнопки, поля, меню, чипы, вкладки */
  --sg-small-size: 14px;  --sg-small-lh: 20px;
  --sg-micro-size: 13px;  --sg-micro-lh: 18px;     /* подписи параметров, раскрытие, сноски; мельче 13px Scada не ставится, кроме бейджа */
  --sg-badge-size: 12px;  --sg-badge-lh: 20px;     /* только бейдж, 700 */

  /* ---------- Типографика: таблица ---------- */
  --sg-table-size: 15px;  --sg-table-lh: 20px;
  --sg-th-size: 13px;     --sg-th-lh: 16px;        /* 700, --sg-muted, без прописных */

  /* ---------- Типографика: цифры (Ubuntu Mono 700; у шрифта мелкое очко, поэтому кегль на 2px больше текста рядом) ---------- */
  --sg-num-s: 15px;       --sg-num-s-lh: 18px;     /* дата проверки, вес критерия, счётчик в чипе */
  --sg-num-m: 17px;       --sg-num-m-lh: 20px;     /* комиссия, лимиты, срок в таблице и карточке */
  --sg-num-l: 20px;       --sg-num-l-lh: 24px;     /* «К оплате» в строке */
  --sg-num-xl: 28px;      --sg-num-xl-lh: 32px;    /* поле суммы калькулятора, цифры полосы фактов */
  --sg-num-2xl: 40px;     --sg-num-2xl-lh: 44px;   /* итог в обзоре «сколько заплачу здесь», сравнение */
  --sg-num-unit: 0.8em;   /* знак ₽ рядом с цифрой: Scada 700 */

  /* ---------- Сетка ---------- */
  --sg-container: 1400px; /* наибольшая ширина контейнера вместе с полями */
  --sg-gutter: 16px;      /* поля контейнера: 16 → 24 (768) → 32 (1200) */
  --sg-gutter-md: 24px;
  --sg-gutter-lg: 32px;
  --sg-cols: 4;           /* 4 → 8 → 12 */
  --sg-gap: 12px;         /* между колонками: 12 → 16 → 24 */
  --sg-gap-md: 16px;
  --sg-gap-lg: 24px;
  --sg-section-gap: 40px; /* между секциями: 40 → 56 → 72 */
  --sg-section-gap-md: 56px;
  --sg-section-gap-lg: 72px;
  --sg-prose: 760px;      /* наибольшая ширина колонки длинного текста */

  /* ---------- Отступы: шкала, имя = значение в пикселях ---------- */
  --sg-space-2: 2px;
  --sg-space-4: 4px;
  --sg-space-8: 8px;
  --sg-space-12: 12px;
  --sg-space-16: 16px;
  --sg-space-20: 20px;
  --sg-space-24: 24px;
  --sg-space-32: 32px;
  --sg-space-40: 40px;
  --sg-space-48: 48px;
  --sg-space-56: 56px;
  --sg-space-64: 64px;
  --sg-space-72: 72px;
  --sg-space-80: 80px;
  --sg-pad: 16px;         /* поле карточки, панели, врезки: 16 → 20 (768) → 24 (1200) */
  --sg-pad-md: 20px;
  --sg-pad-lg: 24px;
  --sg-cell-pad-x: 12px;  /* поля ячейки таблицы */
  --sg-cell-pad-y: 12px;

  /* ---------- Формы ---------- */
  --sg-radius: 0;         /* всё без скруглений; угол «срезает» пиксельная рамка */
  --sg-px: 2px;           /* один «пиксель» системы: толщина линий и рамок */
  --sg-px-l: 4px;         /* жирный «пиксель»: рамка калькулятора, верх панели сравнения, грань кнопки, метка слева у врезки */

  /* ---------- Линии ---------- */
  --sg-line-w: 2px;
  --sg-border: 2px solid var(--sg-line);                 /* разделитель строк, секций, пунктов FAQ */
  --sg-border-strong: 2px solid var(--sg-line-strong);   /* прямая рамка там, где пиксельная не ставится (ячейка таблицы в тексте) */
  --sg-frame-w: 2px;      /* толщина пиксельной рамки по умолчанию; калькулятор и окно — 4px */
  --sg-frame-w-l: 4px;
  --sg-focus-w: 2px;
  --sg-focus-offset: 4px; /* у блоков с рамкой 4px — 6px */

  /* ---------- Высоты ---------- */
  --sg-header-h: 56px;    /* от 1200px — 64px */
  --sg-header-h-lg: 64px;
  --sg-control-h: 48px;   /* кнопка, поле, список на странице и в карточке */
  --sg-control-h-s: 36px; /* кнопка и чип в строке таблицы от 1200px; на мобильном чип — 40px */
  --sg-control-h-chip: 40px;
  --sg-control-h-l: 56px; /* поле суммы и главное действие обзора */
  --sg-bar-h: 56px;       /* закреплённые полосы: «Найдено N», панель сравнения */
  --sg-btn-edge: 4px;     /* нижняя грань основной кнопки */
  --sg-press: 2px;        /* сдвиг кнопки вниз при нажатии */

  /* ---------- Шкала комиссии ---------- */
  --sg-hp-seg-w: 8px;     /* деление в строке и карточке */
  --sg-hp-seg-h: 8px;
  --sg-hp-gap: 2px;
  --sg-hp-pad: 2px;       /* поле дорожки; вместе с рамкой 2px шкала занимает 106 × 16px */
  --sg-hp-seg-w-l: 12px;  /* крупная шкала в обзоре и сравнении: 146 × 20px */
  --sg-hp-seg-h-l: 12px;
  --sg-hp-count: 10;      /* делений; одно деление = 2 % */
  --sg-bar-h-s: 8px;      /* сплошная шкала критерия в разборе оценки */

  /* ---------- Плитка логотипа (квадрат) ---------- */
  --sg-logo-xs: 24px;     /* панель сравнения, чип, строка «по теме» */
  --sg-logo-s: 32px;      /* короткие списки, результат калькулятора в обзоре */
  --sg-logo-m: 40px;      /* строка рейтинга, карточка */
  --sg-logo-l: 48px;      /* карточка каталога от 768px */
  --sg-logo-xl: 64px;     /* шапка обзора, сравнение */

  /* ---------- Оценка ---------- */
  --sg-score-w: 56px;     --sg-score-h: 40px;     /* плитка оценки в строке */
  --sg-score-w-l: 112px;  --sg-score-h-l: 72px;   /* плитка оценки в шапке обзора */

  /* ---------- Ячейка инвентаря ---------- */
  --sg-slot-h: 28px;      /* ячейка-подпись в строке таблицы */
  --sg-slot-h-l: 96px;    /* ячейка способа оплаты на главной и в разделе */
  --sg-slot-min: 148px;   /* наименьшая ширина крупной ячейки */

  /* ---------- Иконки (пиксельный контур в сетке 16 × 16, линия 2 единицы) ---------- */
  --sg-icon-s: 16px;      /* в кнопках, чипах, таблице, тексте */
  --sg-icon-l: 32px;      /* в ячейках, блоке доверия, памятке */
  --sg-icon-line: 2;      /* толщина контура в единицах сетки */

  /* ---------- Служебные знаки (встроенный SVG для фона полей) ---------- */
  --sg-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23E6E6E6' d='M2 5h2v2H2zM4 7h2v2H4zM6 9h4v2H6zM10 7h2v2h-2zM12 5h2v2h-2z'/%3E%3C/svg%3E");
  --sg-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%2312141C' d='M2 8h2v2H2zM4 10h2v2H4zM6 12h2v2H6zM8 10h2v2H8zM10 8h2v2h-2zM12 6h2v2h-2z'/%3E%3C/svg%3E");
  --sg-edge-teeth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8' shape-rendering='crispEdges'%3E%3Cpath fill='%230B0C12' d='M0 0h8v8H0z'/%3E%3C/svg%3E");   /* зубчатая кромка над подвалом: repeat-x, высота 8px */

  /* ---------- Слои ---------- */
  --sg-z-sticky: 20;      /* закреплённая шапка таблицы (от 1200px) и полоса «Найдено N» (до 1200px) */
  --sg-z-tip: 25;         /* подсказка, разбор оценки по нажатию */
  --sg-z-bar: 30;         /* панель сравнения */
  --sg-z-drawer: 40;      /* панель фильтров на мобильном */
  --sg-z-menu: 50;        /* мобильное меню — выше всего */

  /* ---------- Движение ---------- */
  --sg-motion: 0s;        /* плавных переходов нет: состояние меняется сразу, кнопка «нажимается» сдвигом на 2px */
}