/* ============================================================
   СеллерЛабс — единые токены дизайн-системы сайта seller-labs.ru
   Источник истины для: / (главная), /audit/ (EXP-01), /internet-magazin/ (EXP-02).

   Порядок подключения в теме:
     1) tokens.css   ← этот файл (общий слой)
     2) main.css     ← стили конкретной темы (могут переопределять)
   Тема canal сохраняет собственный dark-блок ниже по каскаду — он
   переопределит эти же имена токенов, поэтому здесь только светлая схема.

   Правило зелёного (важно, нарушать нельзя):
   зелёный — ЦВЕТ БРЕНДА, а не значение данных.
   В данных зелёного нет вообще: цветом отмечается только отклонение
   (убыток, риск, требует проверки), «норма» — нейтральная.
   ============================================================ */

:root {
  /* ---------- поверхности ---------- */
  --paper:      #F4F4F0;   /* фон страницы, тёплый светлый */
  --surface:    #FFFFFF;   /* карточки, таблицы, формы */
  --surface-2:  #EAEDE6;   /* утопленные блоки, шапки таблиц */
  --band:       #10201A;   /* тёмная полоса (безопасность, порядок работы, подвал) */
  --band-2:     #1A2E26;   /* карточка внутри тёмной полосы */
  --band-ink:   #EAF2ED;   /* основной текст на тёмном */
  --band-ink-2: #93A099;   /* второстепенный текст на тёмном */

  /* ---------- текст ---------- */
  --ink:        #121613;
  --ink-2:      #4A524C;
  --ink-3:      #757E77;

  /* ---------- линии ---------- */
  --line:       #DCE0D8;
  --line-2:     #C3CABF;

  /* ---------- бренд: ровно один акцент ---------- */
  --accent:     #16624A;   /* графитово-зелёный из логотипа */
  --accent-2:   #0E4635;   /* hover / нажатие */
  --accent-ink: #FFFFFF;   /* текст на акценте */
  --accent-soft:#E1EDE6;   /* подложка акцента */
  --accent-line:#AFD0C0;
  --accent-on-dark: #62C79E; /* акцент на тёмной полосе */

  /* ---------- функциональные цвета ДАННЫХ ----------
     Зелёного здесь нет намеренно: он занят брендом.
     Цветом окрашивается только отклонение от нормы. */
  --data-neg:       #A8392C;  /* убыток, отрицательная маржа */
  --data-neg-soft:  #F8EAE6;
  --data-neg-line:  #E9CCC5;
  --data-neg-on-dark: #E08B7C;

  --data-edge:      #8A5A16;  /* на грани, риск */
  --data-edge-soft: #F5EDDE;
  --data-edge-line: #E0CCA5;

  --data-flag:      #3C4C7A;  /* требует проверки (например, реклама) */
  --data-flag-soft: #E7EBF5;
  --data-flag-line: #C3CCE6;

  --data-ok:        #121613;  /* норма = нейтраль, а не зелёный */
  --data-ok-soft:   #EAEDE6;
  --data-ok-line:   #C3CABF;

  /* ---------- шкала расходов для графиков ----------
     Тёплые графит → шалфей + две отдельные категории.
     Не зелёная: зелёный на графике читался бы как «хорошо». */
  --c-1: #3E4A44;  /* комиссия площадки */
  --c-2: #5C6A62;  /* логистика и возвраты */
  --c-3: #8A968E;  /* хранение и приёмка */
  --c-4: #A8724A;  /* реклама */
  --c-5: #7A6A88;  /* соинвестирование и скидки */
  --c-track: #E3E7DF; /* дорожка под баром */

  /* ---------- радиусы ---------- */
  --radius-s: 5px;
  --radius:   8px;
  --radius-l: 12px;

  /* ---------- тени ---------- */
  --shadow-s: 0 1px 2px rgba(18,22,19,.06);
  --shadow:   0 1px 2px rgba(18,22,19,.05), 0 22px 46px -30px rgba(18,22,19,.5);
  --shadow-l: 0 2px 8px rgba(18,22,19,.05), 0 32px 64px -40px rgba(18,22,19,.5);

  /* ---------- типографика ---------- */
  --font-display: Georgia, "Times New Roman", "Droid Serif", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;

  /* ---------- сетка ---------- */
  --wrap: 1280px;
  --pad: 40px;

  /* высота общей липкой шапки — от неё считается scroll-padding-top */
  --header-h: 72px;

  color-scheme: light;
}

@media (max-width: 1180px) { :root { --pad: 32px; } }
@media (max-width: 720px)  { :root { --pad: 20px; } }
@media (max-width: 400px)  { :root { --pad: 16px; } }

/* Компенсация липкой шапки для якорных переходов.
   72px шапка + 16px запаса. Меняется вместе с --header-h. */
html { scroll-padding-top: calc(var(--header-h) + 16px); }