/* Karmaspec design tokens.
 *
 * Значения — из второго хендоффа (`Karmaspec Landing.dc.html`, август 2026). Первая версия
 * витрины была тёмно-серой с волосяными линиями и радиусом в два пикселя; эта — тёмно-синяя,
 * округлая и жирная. Менялся не «стиль», а язык: там страница читалась как прайс-лист, здесь
 * как магазин.
 *
 * Правило прежнее и единственное: hex не появляется нигде, кроме этого файла, а новый цвет
 * входит ПАРОЙ — тёмный и светлый. Светлая тема не инверсия: панели поднимаются белым и более
 * заметной границей, а акцент темнеет, чтобы белый текст на нём читался. */

:root{
  /* поверхности */
  --bg:#101825;
  --surface:#1B2637;
  --surface-2:#222F42;
  --surface-3:#2B3A50;

  /* линии — только границы, теней у панелей нет */
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.18);
  --line-hover:rgba(255,69,0,.5);

  /* текст */
  --text:#F3F7FB;
  --text-2:#A6B7CA;
  --text-3:#8496AC;

  /* единственный акцент */
  --accent:#FF4500;
  --accent-ink:#160600;
  --accent-dim:rgba(255,69,0,.14);

  /* семантика — только статус, никогда украшение */
  --pos:#43D194;
  --warn:#F5C542;
  --neg:#F2635C;

  /* подложки статусных пилюль: тот же цвет, разведённый до фона */
  --pos-dim:rgba(67,209,148,.15);
  --warn-dim:rgba(245,197,66,.16);
  --neg-dim:rgba(242,99,92,.16);

  /* радиусы: плитка, карточка, пилюля */
  --r-1:12px;
  --r-2:20px;
  --r-pill:999px;

  /* шрифт один на всё. Моноширинного в этом макете нет вовсе — цифры держит
     font-variant-numeric, а не второе семейство. Переменная оставлена, чтобы
     старые ссылки на неё не разъехались. */
  --sans:'Nunito','Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --mono:var(--sans);

  --fs-hero:clamp(30px,4.4vw,52px);
  --fs-section:20px;
  --fs-body:15px;
  --fs-spec:13px;
  --fs-meta:12px;
  --fs-label:12px;
  --ls-tight:-.02em;

  /* шаг 4px */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-14:56px;

  --dur:150ms;
  --ease:cubic-bezier(.2,.7,.2,1);

  --z-header:100;
  --z-sticky:90;
  --z-tray:95;
  --z-backdrop:200;
  --z-modal:210;

  --header-h:60px;      /* меряется в рантайме, это запасное значение */
  --shell-max:1400px;
  --card-min:272px;     /* даёт 4/3/2/1 колонки без единого медиазапроса */
}

[data-theme="light"]{
  --bg:#F4F7FA;
  --surface:#FFFFFF;
  --surface-2:#EEF3F8;
  --surface-3:#E1E9F2;

  --line:rgba(16,24,37,.11);
  --line-strong:rgba(16,24,37,.22);
  --line-hover:rgba(176,48,0,.5);

  --text:#101825;
  --text-2:#46586D;
  --text-3:#54667C;

  --accent:#B03000;
  --accent-ink:#FFFFFF;
  --accent-dim:rgba(176,48,0,.10);

  --pos:#0A7350;
  --warn:#7A5600;
  --neg:#B02A24;

  --pos-dim:rgba(10,115,80,.12);
  --warn-dim:rgba(122,86,0,.13);
  --neg-dim:rgba(176,42,36,.11);
}

@media (prefers-reduced-motion:reduce){
  :root{ --dur:0ms; }
}