/* IT-технологии — токены дизайн-системы «Таблица сервисов»: костяная бумага, чёрная линия, сигнальный оранжевый и цвета групп задач.
   Описание и правила: ../../05-design.md; что изменено на приёмке (обычный рейтинг-список первым экраном, карта сервисов ниже,
   логотипы и метки групп вместо двухбуквенных символов) — ../../06-review.md. Префикс переменных и классов — ns.
   В файле только подключение шрифтов и переменные. Теней, переходов цвета и скруглений в системе нет. */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700&family=Commissioner:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── 1. Цвет: бумага и чёрный ─────────────────────────────────────────── */
  --ns-bg: #F4F1EA;            /* фон страницы: костяная бумага (зерно) */
  --ns-surface: #FCFAF5;       /* поверхность: таблица, карточка, поле ввода, подбор */
  --ns-sunken: #EAE5DA;        /* утопленная: шапка таблицы, раскрытая строка, промпт, строка под курсором */
  --ns-ink: #141414;           /* текст, линии, инверсные плашки (зерно) */
  --ns-muted: #5F5A51;         /* приглушённый текст: подписи, даты, пояснения */
  --ns-line: #141414;          /* линия 1px: граница плитки, поля, блока */
  --ns-line-soft: #CEC7B8;     /* мягкая линия: разделитель строк внутри блока, не граница контрола */

  /* ── 2. Цвет: акценты ─────────────────────────────────────────────────── */
  --ns-accent: #FF4F00;        /* сигнальный оранжевый (зерно): только действие. Текстом на бумаге не пишется */
  --ns-on-accent: #141414;     /* текст и значок на оранжевом */
  --ns-accent2: #2A9D8F;       /* второй акцент (зерно): положительное значение в данных, заливка бейджа «лимит» */
  --ns-on-accent2: #141414;    /* текст на втором акценте */
  --ns-accent2-ink: #1A6B61;   /* тот же тон для текста и значков на бумаге */
  --ns-accent2-soft: #D3EAE5;  /* мягкая заливка: лучшая ячейка сравнения, бейдж «бонус» */

  /* ── 3. Цвет: состояния (только текст, значок и линия, не заливка) ────── */
  --ns-ok: #1A6B61;            /* успех: «скопировано», «добавлено»; совпадает с --ns-accent2-ink */
  --ns-warn: #8A5A00;          /* предупреждение: «мало данных», «цена не названа» */
  --ns-err: #B0173A;           /* ошибка: поле формы, сбой загрузки */

  /* ── 4. Цвет: тёмная плашка (подвал, заголовок подбора, выбранный чип) ── */
  --ns-dark: #141414;
  --ns-on-dark: #F4F1EA;
  --ns-muted-on-dark: #B4AEA2;
  --ns-line-on-dark: #4A4741;

  /* ── 5. Цвет: группы задач. Имя переменной = слаг раздела ─────────────── */
  --ns-g-agregatory: #9CD2FD;    /* Агрегаторы — голубой */
  --ns-g-ii-assistenty: #F2DC44; /* Ассистенты и тексты — жёлтый */
  --ns-g-kartinki: #FFAEC8;      /* Картинки и дизайн — розовый */
  --ns-g-video-i-zvuk: #C09FFC;  /* Видео и звук — сиреневый */
  --ns-g-marketplejsy: #C3E49A;  /* Маркетплейсы — зелёный */
  --ns-g-kod: #8CA3B1;           /* Код и API — стальной */
  --ns-g-biznes: #CBA066;        /* Бизнес и документы — крафт */
  --ns-g: var(--ns-surface);     /* цвет группы текущего элемента; переопределяет класс .ns-g--<слаг> */

  /* ── 6. Шрифты ────────────────────────────────────────────────────────── */
  --ns-font-head: 'Unbounded', 'Arial Black', Arial, sans-serif;                 /* заголовки, крупные числа: место и оценка */
  --ns-font-body: 'Commissioner', 'Segoe UI', Roboto, Arial, sans-serif;         /* текст, интерфейс */
  --ns-font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;/* цифры, даты, подписи таблицы */

  --ns-fw-regular: 400;
  --ns-fw-medium: 500;
  --ns-fw-semibold: 600;
  --ns-fw-bold: 700;

  /* размер / интерлиньяж; телефон */
  --ns-fs-h1: 1.375rem;   --ns-lh-h1: 1.27;   /* 22 / 28 */
  --ns-fs-h2: 1.1875rem;  --ns-lh-h2: 1.32;   /* 19 / 25 */
  --ns-fs-h3: 1rem;       --ns-lh-h3: 1.375;  /* 16 / 22 */
  --ns-fs-h4: 1rem;       --ns-lh-h4: 1.375;  /* 16 / 22, Commissioner 700 */
  --ns-fs-lead: 1.0625rem;--ns-lh-lead: 1.53; /* 17 / 26 */
  --ns-fs-body: 1rem;     --ns-lh-body: 1.56; /* 16 / 25 */
  --ns-fs-small: 0.875rem;--ns-lh-small: 1.43;/* 14 / 20 */
  --ns-fs-xs: 0.75rem;    --ns-lh-xs: 1.33;   /* 12 / 16 */
  --ns-fs-table: 0.875rem;--ns-lh-table: 1.43;/* 14 / 20 */
  --ns-fs-num: 0.875rem;                      /* 14: цифра в таблице, JetBrains Mono 500 */
  --ns-fs-num-lg: 1rem;                       /* 16: оценка в строке; Unbounded 600 */
  --ns-fs-num-xl: 1.75rem;                    /* 28: оценка в карточке; Unbounded 600 */
  --ns-fs-score: 2.5rem;                      /* 40: итог в блоке оценки; Unbounded 600 */
  --ns-fs-over: 0.6875rem;                    /* 11: надпись-ярлык, JetBrains Mono 500, прописные */
  --ns-ls-head: -0.01em;
  --ns-ls-over: 0.06em;
  --ns-measure: 46rem;                        /* 736px: наибольшая ширина колонки текста */

  /* ── 7. Отступы: шаг 4px ──────────────────────────────────────────────── */
  --ns-s-1: 4px;
  --ns-s-2: 8px;
  --ns-s-3: 12px;
  --ns-s-4: 16px;
  --ns-s-5: 24px;
  --ns-s-6: 32px;
  --ns-s-7: 48px;
  --ns-s-8: 64px;
  --ns-s-9: 96px;

  /* ── 8. Сетка ─────────────────────────────────────────────────────────── */
  --ns-container: 1400px;      /* наибольшая ширина контейнера вместе с полями */
  --ns-gutter: 16px;           /* поле контейнера слева и справа */
  --ns-gap: 16px;              /* расстояние между колонками сетки */
  --ns-cols: 4;                /* число колонок сетки */
  --ns-section: 40px;          /* расстояние между блоками страницы */
  --ns-header-h: 56px;         /* высота закреплённой строки шапки */
  --ns-groupbar-h: 40px;       /* строка групп под шапкой, только от 1200px */
  --ns-rail-w: 392px;          /* правая колонка от 1200px: подбор на главной, карточка действия на странице сервиса, оглавление статьи */
  --ns-sheet-w: 360px;         /* наибольшая ширина выдвижной панели меню и фильтров */

  /* ── 9. Плитка карты сервисов, табличка места ─────────────────────────── */
  --ns-el-gap: 4px;            /* зазор между плитками карты */
  --ns-el-min: 104px;          /* наименьшая ширина плитки: от 356px в ряд встаёт три, уже — две */
  --ns-el-h: 72px;             /* наименьшая высота плитки */
  --ns-el-pad: 6px;            /* внутреннее поле плитки */
  --ns-el-fs-name: 13px;       /* полное название сервиса */
  --ns-el-fs-data: 11px;       /* место и цена входа; строка 14px */
  --ns-plate: 132px;           /* табличка места: шапка карточки сервиса и сравнения */
  --ns-plate-fs: 56px;         /* номер на табличке */

  /* ── 10. Контролы, значки, логотипы ───────────────────────────────────── */
  --ns-ctl-h: 44px;            /* кнопка, поле, выпадающий список */
  --ns-ctl-h-sm: 40px;         /* чип, малая кнопка */
  --ns-ctl-pad: 16px;
  --ns-tap: 44px;              /* наименьшая область нажатия на телефоне */
  --ns-ico: 16px;              /* значок в строке текста, кнопке, чипе */
  --ns-ico-lg: 20px;           /* значок в шапке и заголовке блока */
  --ns-ico-sw: 1.5;            /* толщина линии значка при viewBox 24 */
  --ns-fav: 20px;              /* малая плитка логотипа в строке текста */
  --ns-fav-m: 28px;            /* плитка логотипа в строках списков: аналоги, обложка статьи, панель сравнения */
  --ns-fav-l: 40px;            /* логотип сервиса в рамке цвета группы: строка рейтинга, «Коротко», вердикт, сравнение, карточка действия */

  /* ── 11. Формы: радиусы и линии ───────────────────────────────────────── */
  --ns-radius: 0;              /* скруглений нет нигде */
  --ns-bw: 1px;                /* линия плитки, поля, блока */
  --ns-bw-2: 2px;              /* рамка инструмента: шапка, подбор, верх таблицы, панель сравнения */
  --ns-bw-4: 4px;              /* маркер: активная вкладка, цитата */
  --ns-border: var(--ns-bw) solid var(--ns-line);
  --ns-border-2: var(--ns-bw-2) solid var(--ns-line);
  --ns-border-soft: var(--ns-bw) solid var(--ns-line-soft);
  --ns-focus-w: 3px;           /* рамка фокуса: outline 3px цвета --ns-ink, на тёмном — --ns-accent */
  --ns-focus-offset: 2px;

  /* ── 12. Движение и слои ──────────────────────────────────────────────── */
  --ns-dur: 120ms;             /* меняются только цвет фона, текста и рамки */
  --ns-ease: linear;
  --ns-z-bar: 80;              /* нижняя панель сравнения и кнопка «На сайт» на телефоне */
  --ns-z-header: 100;
  --ns-z-sheet: 200;           /* выдвижные панели меню и фильтров */
}

@media (min-width: 768px) {
  :root {
    --ns-fs-h1: 1.75rem;    --ns-lh-h1: 1.21;   /* 28 / 34 */
    --ns-fs-h2: 1.375rem;   --ns-lh-h2: 1.27;   /* 22 / 28 */
    --ns-fs-h3: 1.0625rem;  --ns-lh-h3: 1.41;   /* 17 / 24 */
    --ns-fs-lead: 1.125rem; --ns-lh-lead: 1.56; /* 18 / 28 */
    --ns-fs-num-xl: 2rem;                       /* 32 */
    --ns-fs-score: 3rem;                        /* 48 */

    --ns-gutter: 24px;
    --ns-gap: 16px;
    --ns-cols: 8;
    --ns-section: 56px;

    --ns-el-min: 120px;
    --ns-el-h: 76px;
    --ns-el-pad: 8px;
    --ns-plate: 168px;
    --ns-plate-fs: 72px;
  }
}

@media (min-width: 1200px) {
  :root {
    --ns-fs-h1: 2rem;       --ns-lh-h1: 1.19;   /* 32 / 38 */
    --ns-fs-h2: 1.5rem;     --ns-lh-h2: 1.25;   /* 24 / 30 */
    --ns-fs-h3: 1.125rem;   --ns-lh-h3: 1.33;   /* 18 / 24 */

    --ns-gutter: 32px;
    --ns-gap: 24px;
    --ns-cols: 12;
    --ns-section: 72px;

    --ns-ctl-h: 40px;
    --ns-ctl-h-sm: 32px;
  }
}