/* ==========================================
   Design Tokens — all-mods.ru
   Подключается первым в <head>.
   Все компоненты ссылаются только на эти переменные.
   ========================================== */
:root {
  /* === Palette ===
     Гамма исходная: тёмно-красный акцент, тёплый серый, золотые ссылки.
     Тело сайта равно фону окна: контент не занимает всю ширину (справа
     остаётся место), а на деталках колонка ещё уже — будь у тела свой
     оттенок, его граница читалась бы как скачок ширины контента. Один
     цвет фона его прячет. Блоки отделяются светлотой вложенных слоёв
     (#2b2b2b, #404040), а не отличием тела сайта от окна. */
  --ds-bg-body:         #262626;   /* фон вокруг сайта и тело сайта */
  --ds-bg-surface:      #262626;   /* тело сайта, шапка, подвал */
  --ds-bg-raised:       #2b2b2b;   /* секции, меню (в т.ч. сайдбар) */
  /* Правая часть страницы (полоска сверху + контент) — на ступень темнее
     панели: сайдбар читается как отдельная область, а не как карточка на
     фоне. Оба элемента берут один токен, поэтому их разделяет только
     линия под полоской, а не перепад цвета. -rgb нужен там, где цвет
     подмешивается с прозрачностью (градиент-занавес .ds-show-more). */
  --ds-bg-content:      #1e1e1e;
  --ds-bg-content-rgb:  30, 30, 30;
  --ds-bg-overlay:      #404040;   /* служебные блоки: фильтры, пагинация, спойлеры */
  --ds-bg-overlay-hover: #4a4a4a;  /* они же под курсором */
  /* Карточки каталога — своя ступень светлоты, отдельная от --ds-bg-overlay.
     Общий серый #404040 делал сетку модов ровной бледной плитой: карточка
     не читалась как отдельная единица и сливалась со служебными блоками,
     залитыми тем же цветом. Поверхность карточки темнее, полоса со
     счётчиками уходит ещё на ступень вниз, и структура внутри карточки
     набирается одним перепадом светлоты — без примеси оттенка: тёплый
     подтон читался как красноватый и спорил с акцентом сайта. */
  --ds-bg-card:         #303030;   /* поверхность карточки каталога */
  --ds-bg-card-hover:   #3a3a3a;   /* она же под курсором */
  --ds-bg-card-foot:    #262626;   /* полоса со счётчиками внизу карточки */
  --ds-card-line:       #3a3a3a;   /* разделитель над счётчиками */
  --ds-card-icon:       #b0b0b0;   /* иконки счётчиков */
  --ds-text-card-meta:  #a3a3a3;   /* дата и автор в карточке */
  --ds-bg-input:        #404040;
  --ds-bg-accent:       #822227;
  --ds-bg-accent-hover: #ab171f;
  --ds-bg-success:      #228229;
  /* Уведомление-предупреждение (.ds-notice--warning): между зелёным
     успеха и красным ошибки — тёплый охристый, читаемый с белым текстом. */
  --ds-bg-warning:      #9a6415;
  /* Тёмная подложка служебных элементов (вторичные кнопки .ds-btn--secondary,
     всплывающие уведомления). Цвет нейтральный, без примеси оттенка: прежний
     #2f3336 был заметно синее прочих серых и читался как «голубоватый»
     рядом с золотом и красным акцентом сайта. */
  --ds-bg-dark:         #303030;

  /* === Text === */
  --ds-text-primary:    #c3c3c3;
  --ds-text-heading:    #e8e8e8;
  --ds-text-link:       #ffd78a;
  --ds-text-muted:      #969696;
  --ds-text-white:      #ffffff;
  --ds-text-on-accent:  #fbfbfc;

  /* === Borders === */
  --ds-border-dark:     #272727;
  --ds-border-light:    #444444;
  --ds-border-input:    #313131;

  /* === Typography === */
  --ds-font-body:       'Roboto', sans-serif;
  --ds-font-heading:    var(--ds-font-body);
  --ds-font-size-xs:    10px;
  --ds-font-size-sm:    12px;
  --ds-font-size-base:  14px;
  --ds-font-size-lg:    16px;
  --ds-font-size-xl:    18px;
  --ds-font-size-2xl:   20px;
  --ds-font-size-3xl:   25px;

  /* === Spacing (8px grid) === */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;

  /* === Sizing ===
     Оболочка (сайдбар + контент) тянется на всю ширину окна: панель
     прижата к левому краю, контент идёт сразу за ней с зазором
     --ds-space-8 и держит прежнюю ширину (--ds-content-max-width,
     1200px), а свободное место остаётся справа. Пустота не выглядит
     дыркой: фон вокруг и тело сайта одного цвета (см. палитру выше). */
  --ds-content-max-width: 1200px;
  --ds-sidebar-width:   280px;
  /* Мера статьи: одна ширина на весь контент записи — текст, заголовки,
     цитаты, картинки и блок «Скачать». На остальных страницах блок
     центрируется в колонке. Раньше мера задавалась в ch каждому элементу
     от его кегля: абзац выходил 607px, h2 — 929px, ссылки на скачивание —
     1072px, правый край не сходился, и половина колонки выглядела пустой. */
  --ds-measure-content: 736px;
  /* Колонка деталки мода: уже общей (1200px), чтобы шапка с обложкой,
     характеристики, текст и похожие записи не растягивались на всю
     колонку — длинная строка тяжело читается. Текст внутри живёт по
     своей мере (--ds-measure-content). */
  --ds-single-width:    960px;
  --ds-radius-sm:       6px;
  --ds-radius-md:       8px;
  --ds-radius-lg:       12px;

  /* === Shadows ===
     Плоский стиль: тени убраны, блоки отделяются светлотой фона.
     Токены оставлены как `none`, чтобы компоненты, которые на них
     ссылаются, не пришлось переписывать. */
  --ds-shadow-sm:       none;
  --ds-shadow-md:       none;
  --ds-shadow-card:     none;
  --ds-shadow-topline:  none;

  /* === Transitions === */
  --ds-transition:      .2s ease;
}