/* База нового фронта: сброс, фон-страницы, типографика, сетка страницы. Использует tokens.css. */
@import "./tokens.css";

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Страница тёмная, поэтому текст ПО УМОЛЧАНИЮ светлый. Светлые блоки карточки возвращают себе
   тёмный текст сами (см. components.css, «светлые поверхности на тёмной странице»). */
body {
  font-family: var(--f-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-on-dark);
  /* Отдельными свойствами, а НЕ шорткодом background: цвет в шорткоде допустим только в последнем
     слое, и «background: <цвет> <два градиента>» браузер отбрасывает целиком.
     Оба слоя живут только в ВЕРХНЕЙ полосе документа, ниже остаётся ровный --c-bg-base. Высоты
     равны радиусам самих градиентов (см. --bg-*-h в tokens.css), поэтому на нижней кромке слоя
     цвет уже ровно чёрный и стыка не видно ни при какой длине страницы.
     attachment намеренно не fixed — иначе светлое пятно ехало бы за экраном и каждый заголовок
     позиции попадал бы на синеву. */
  background-color: var(--c-bg-base);
  background-image: var(--bg-glow), var(--bg-base-grad);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, 0 0;
  background-size: 100% var(--bg-glow-h), 100% var(--bg-base-h);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

.page { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 80px 80px; }

.page-title {
  font-family: var(--f-head);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-flat);
  letter-spacing: -0.8px;
  color: var(--c-on-dark);
  margin: 24px 0;
}

a { color: inherit; text-decoration: none; }
/* Формы шрифт НЕ наследуют — им его задаёт браузер (у textarea это вообще моноширинный). Из-за
   этого поле ввода чата рисовалось системным шрифтом с чужими межбуквенными просветами и заметно
   выбивалось из панели (ревью 23.07 «проработать инпут ввода»). */
button, input, select, textarea { font-family: inherit; }

/* По умолчанию — приглушённый НА ТЁМНОМ (страница тёмная). Внутри светлых блоков переопределяется. */
.muted { color: var(--c-on-dark-2); }
.mono { font-variant-numeric: tabular-nums; }