/*
  Токены NormNet — единственный источник значений.

  Правило: ни в одном другом файле не должно быть «сырых» цветов, размеров
  шрифта и отступов. Только переменные отсюда. Иначе тема расползается,
  как это было, когда палитра лежала копией в каждой странице.

  Значения — из docs/design-system.md, те же, что в мини-аппе Telegram.
*/

:root{
  /* --- Поверхности. Чем больше номер, тем «выше» слой в тёмной теме --- */
  --ink-0:#000000; --ink-1:#05070A; --ink-2:#0F1115; --ink-3:#16191D; --ink-4:#212327;

  /* --- Сталь и серебро: ось 214°, снята с логотипа --- */
  --steel-1:#3A414A; --steel-2:#656A72; --steel-3:#8C939B;
  --silver-1:#ABB6C4; --silver-2:#C6D4E7;
  --rim:#EFF4FB; --text:#FFFFFF;

  /* --- Смысловые --- */
  --ok:#3ECF8E; --alert:#E5484D; --warn:#F5A524;

  /* --- Линии и тени --- */
  --line:rgba(239,244,251,.08);
  --edge:inset 0 1px 0 rgba(239,244,251,.10);
  --ring:inset 0 0 0 1px var(--line);
  --e1:0 1px 2px rgba(0,0,0,.5);
  --e2:0 8px 24px rgba(0,0,0,.55);
  --e3:0 16px 48px rgba(0,0,0,.65);
  --glass:rgba(15,17,21,.72);

  /* --- Движение --- */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --fast:.18s; --norm:.28s; --slow:.44s;

  /* --- Отступы: шаг 4, других значений не бывает --- */
  --s2:2px;  --s4:4px;  --s8:8px;   --s12:12px; --s16:16px;
  --s20:20px; --s24:24px; --s32:32px; --s40:40px; --s56:56px;
  --s72:72px; --s96:96px;

  /* --- Радиусы. Вложенный меньше внешнего минимум на 4 --- */
  --r-chip:8px; --r-field:12px; --r-btn:14px; --r-card:16px; --r-sheet:20px;
  --r-round:999px;

  /* --- Полотно. Расстояние между секциями: 128 давало пустые провалы. --- */
  --band:clamp(56px, 6vw, 96px);
  --pad:clamp(20px, 5vw, 32px);
  --w-narrow:460px;   /* кабинет: одна колонка под большой палец */
  --w-text:640px;     /* читаемая строка */
  --w-wide:1120px;    /* витрина */

  /* --- Шрифт: системный. На плохой сети он появляется сразу,
         а внешний домен у части операторов недоступен --- */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,
         Helvetica,Arial,sans-serif;
}

/*
  Светлая тема — не инверсия: --rim и --ink-1 меняются местами. Благодаря
  этому текст на залитой кнопке читается в обеих темах одним правилом
  color:var(--ink-1), без отдельных переопределений.
*/
:root.light{
  --ink-0:#FFFFFF; --ink-1:#FFFFFF; --ink-2:#F7F8FA; --ink-3:#F2F4F7; --ink-4:#E4E7EC;
  --steel-1:#CBD1DA; --steel-2:#8C939B; --steel-3:#656A72;
  --silver-1:#4A515A; --silver-2:#2A3038;
  --rim:#0F1115; --text:#05070A;
  --line:rgba(5,7,10,.10);
  --edge:inset 0 1px 0 rgba(255,255,255,.9);
  --e1:0 1px 2px rgba(5,7,10,.08);
  --e2:0 8px 24px rgba(5,7,10,.12);
  --e3:0 16px 48px rgba(5,7,10,.16);
  --glass:rgba(255,255,255,.78);
}
@media (prefers-color-scheme: light){
  :root:not(.dark){
    --ink-0:#FFFFFF; --ink-1:#FFFFFF; --ink-2:#F7F8FA; --ink-3:#F2F4F7; --ink-4:#E4E7EC;
    --steel-1:#CBD1DA; --steel-2:#8C939B; --steel-3:#656A72;
    --silver-1:#4A515A; --silver-2:#2A3038;
    --rim:#0F1115; --text:#05070A;
    --line:rgba(5,7,10,.10);
    --edge:inset 0 1px 0 rgba(255,255,255,.9);
    --e1:0 1px 2px rgba(5,7,10,.08);
    --e2:0 8px 24px rgba(5,7,10,.12);
    --e3:0 16px 48px rgba(5,7,10,.16);
    --glass:rgba(255,255,255,.78);
  }
}