@import url('fonts/fonts.css') layer(base);
/* Старые классы экранов (.btn*, .chip, .card, .row …) — слой legacy, уходят с шагом 6. */
@import url('legacy.css') layer(legacy);
@layer base {

/* PostPilot — Base styles */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font: var(--type-body);
  letter-spacing: 0;
  min-height: 100vh;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* <select> — единственный контрол, который до этого рисовала ОС: серый
   системный шеврон рядом с нашими полями читался как чужой элемент на
   странице. Гасим appearance и ставим свой шеврон из токена (--chevron
   меняется вместе с темой). Классы селектов обязаны задавать фон через
   background-color, а не через шорткат background: шорткат обнуляет
   background-image и стрелка исчезает. */
select {
  appearance: none;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-glow); color: var(--ink); }

/* Единое кольцо фокуса на все интерактивные элементы.
   До этого фокус был объявлен точечно у пяти-шести классов, остальные кнопки
   и плитки при обходе с клавиатуры не подсвечивались вовсе. outline-offset
   выносит кольцо НАРУЖУ элемента: поэтому оно видно и на кнопке, залитой тем
   же акцентом, и на тёмной плитке «выбрано». Правило намеренно широкое и
   стоит РАНЬШЕ экранных стилей, чтобы частные :focus-visible могли его
   переопределить, а не наоборот. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.mono {
  font: var(--type-caption);
  font-family: var(--font-mono);
}

.kbd {
  font: var(--type-caption);
  font-family: var(--font-mono);
  padding: 0 var(--u-1);
  background: var(--surface-2);
  border: 1px solid var(--line-card);
  border-bottom-width: 2px;
  border-radius: var(--r-xs);
  color: var(--ink-2);
}

/* ═══ Роли текста — единственные разрешённые (спека части D, «Система»).
   Экран не задаёт font-size/font-weight сам: берёт роль. ═══ */
.t-display  { font: var(--type-display);  letter-spacing: var(--type-display-ls); color: var(--ink); }
.t-number   { font: var(--type-number);   letter-spacing: var(--type-number-ls); color: var(--ink); font-variant-numeric: tabular-nums; }
.t-title    { font: var(--type-title);    color: var(--ink); }
.t-subtitle { font: var(--type-subtitle); color: var(--ink); }
.t-body     { font: var(--type-body);     color: var(--ink); }
.t-small    { font: var(--type-small);    color: var(--ink-2); }
.t-caption  { font: var(--type-caption);  color: var(--ink-3); }
.t-eyebrow  {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-ls);
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-display, .t-number, .t-title, .t-subtitle { margin: 0; text-wrap: balance; }

/* tabular */
.tnum { font-variant-numeric: tabular-nums; }

/* Переход между вкладками: браузерный кроссфейд старого и нового экрана
   (View Transitions API, запускается в app.jsx при навигации). Дефолтные
   ~250мс ощутимо тянутся — ужимаем; навигацию нельзя замедлять. В браузерах
   без поддержки этих псевдоэлементов нет — подмена мгновенная. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .18s;
}

/* Reduced-motion safety */
@media (prefers-reduced-motion: reduce) {
  .page-anim,
  .page-anim *,
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important; /* stylelint-disable-line declaration-no-important -- доступность: без движения, сильнее любых слоёв */
  }
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-5);
  border-radius: var(--r-pill);
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

} /* @layer base */