/* База дизайн-системы ARKADA: сброс, шрифты, иконки, безопасные поля экрана.
 *
 * Подключается после tokens.css и до components.css.
 * Ни одного цвета и размера мимо токенов — кроме тех, что описывают сами шрифты.
 */

/* ── Сброс ──────────────────────────────────────────────────────────────── */

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

html,
body { height: 100%; }

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }

ul[class],
ol[class] { margin: 0; padding: 0; list-style: none; }

img,
svg,
video { max-width: 100%; display: block; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; }

/* Подсветка касания в браузере телефона своя и мимо токенов — гасим,
   нажатое состояние рисуют сами компоненты. */
a,
button,
[role="button"] { -webkit-tap-highlight-color: transparent; }

/* ── Шрифт текста ───────────────────────────────────────────────────────────
 * Figtree, два подмножества из утверждённого прототипа. Кириллицы в нём нет —
 * она идёт системным шрифтом стека --ark-font, ровно как в прототипе.
 * unicode-range сообщает браузеру, какие символы брать отсюда: русский текст
 * не будет ждать загрузки этих файлов вовсе.
 */

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Шрифт иконок ───────────────────────────────────────────────────────────
 * Подмножество из 82 иконок контракта, 12,9 КБ. Оси переменного шрифта сохранены:
 * FILL 0 — контурная иконка, FILL 1 — залитая (активная вкладка таб-бара).
 */

@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/material-symbols-rounded.woff2') format('woff2');
}

/* Иконка задаётся текстом имени: <span class="ark-icon">home</span>.
   Поэтому font-display: block выше — пока шрифт не загрузился, лучше пустое место,
   чем слово «home» на экране. */
.ark-icon {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  user-select: none;
  flex: none;
}

.ark-icon--filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Страница ───────────────────────────────────────────────────────────── */

body {
  font-family: var(--ark-font);
  font-size: var(--ark-type-body);
  line-height: 1.45;
  color: var(--ark-fg);
  background: var(--ark-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Прокрутка страницы целиком не нужна: экран — шапка, содержимое, таб-бар. */
  overscroll-behavior-y: none;
}

/* Безопасные поля: вырез и жест-полоса iPhone. Без этого шапка уезжает под вырез,
   а таб-бар — под полосу жестов. Внутренние отступы задают сами компоненты. */
.ark-safe-top { padding-top: env(safe-area-inset-top, 0px); }
.ark-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.ark-safe-sides {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Время, длительности и суммы — табличными цифрами: столбцы не пляшут. */
.ark-nums { font-variant-numeric: tabular-nums; }

/* Экранная подпись только для читалки. */
.ark-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Анимации ───────────────────────────────────────────────────────────────
 * Анимируются только transform и opacity. --ark-dur (200 мс) — про переходы между
 * состояниями; у бесконечных крутилки и пульса свои длительности из прототипа:
 * 200 мс дали бы не анимацию, а мигание.
 */

@keyframes ark-spin {
  to { transform: rotate(360deg); }
}

@keyframes ark-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}