/* ==========================================================================
   YUSR APP — Design tokens

   Источник: Figma K5BDJ5bnFtMFeJ5ssr0vCO (YUSR APPLICATION), страница MCP.
   Значения сверены через get_variable_defs на нодах Home (5179:44566)
   и Merchant-page (5179:44107).

   Кит приложения стоит на ТЕХ ЖЕ семантических токенах, что и сайт, с теми
   же значениями. Отличия ровно два:
     1. режим один — мобильный. Брейкпоинтов нет, базовая ширина 375.
     2. добавлен `h4` 18/28, которого в ките сайта нет.
   ========================================================================== */

/* Boldonse — локальный файл, никакого CDN. Раньше здесь был @import с
   fonts.googleapis.com: из файла, открытого по file://, такой запрос может
   блокироваться, и Boldonse молча подменялся на Arial Black.
   Файл от дизайна: Boldonse Regular, 428 глифа, units/em 1000, вес 400. */
@font-face {
  font-family: 'Boldonse';
  src: url('assets/fonts/Boldonse.woff2') format('woff2'),
       url('assets/fonts/Boldonse.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Sans подключается <link>-ом в HTML. Если он не доедет, подстановка
   на system-ui визуально безобидна — в отличие от дисплейного шрифта. */

:root {
  /* ---------- Fonts ---------- */
  --font-display: 'Boldonse', 'Arial Black', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;

  /* Boldonse — одно начертание. В Figma стиль подписан SemiBold,
     фактический вес 400. Не подставлять 600. */
  --weight-display: 400;
  --weight-medium: 500;
  --weight-regular: 400;

  /* ---------- Type ----------
     Подтверждено на экранах: h1 32 (SCAN THE QR), h2 28 (лимит, название
     мерчанта), h3 24 (заголовок шторки), h4 18 (сумма в виджете, заголовки
     секций), b1 18, b2 16, caption 14. */
  --size-h1: 32px;      --lh-h1: 52px;
  --size-h2: 28px;      --lh-h2: 44px;
  --size-h3: 24px;      --lh-h3: 40px;
  --size-h4: 18px;      --lh-h4: 28px;
  --size-b1: 18px;      --lh-b1: 26px;
  --size-b2: 16px;      --lh-b2: 24px;
  --size-p1: 18px;      --lh-p1: 26px;
  --size-p2: 16px;      --lh-p2: 24px;
  --size-caption: 14px; --lh-caption: 18px;

  /* ---------- Text ---------- */
  --text-neutral-primary: #0c0f12;
  --text-neutral-secondary: #898e93;
  --text-neutral-tertiary: #c8cbce;
  --text-brand-primary: #3a5610;
  --text-negative-primary: #dc2626;
  --text-absolute-black: #0c0f12;
  --text-absolute-white: #ffffff;

  /* ---------- Icon ---------- */
  --icon-neutral-primary: #0c0f12;
  --icon-neutral-secondary: #898e93;
  --icon-neutral-tertiary: #c8cbce;
  --icon-brand-primary: #3a5610;
  --icon-warning-primary: #f6982c;   /* звезда рейтинга */
  --icon-critical-primary: #dc2626;
  --icon-absolute-white: #ffffff;

  /* ---------- Surface ----------
     Нейтральные — прозрачный чёрный, а не серый hex. */
  --surface-brand-primary: #c5dd3e;
  --surface-brand-secondary: #c5dd3eb2;
  --surface-brand-tertiary: #c5dd3e33;
  --surface-neutral-primary: #0c0f121a;
  --surface-neutral-secondary: #0c0f1208;
  --surface-critical-primary: #dc262633;
  --surface-absolute-black: #0c0f12;
  --surface-absolute-white: #ffffff;

  /* ---------- Bg / Stroke ---------- */
  --bg-primary: #ffffff;
  --bg-secondary: #f3f5f7;
  --stroke-neutral-tertiary: #0c0f120a;
  --stroke-brand-primary: #c5dd3e;

  /* ---------- Spacing ---------- */
  --spacing-0: 0px;   --spacing-4: 4px;   --spacing-6: 6px;
  --spacing-8: 8px;   --spacing-10: 10px; --spacing-12: 12px;
  --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px;
  --spacing-32: 32px; --spacing-48: 48px; --spacing-64: 64px;

  /* ---------- Radius ---------- */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ---------- Icon sizes ---------- */
  --icon-xs: 16px;
  --icon-s: 24px;
  --icon-m: 28px;
  --icon-l: 32px;

  /* ---------- Layout ----------
     Экран 375, боковое поле 16, контейнер 343. */
  --screen-w: 375px;
  --page-pad: 16px;
  --container: 343px;
  --bottombar-h: 90px;
  --notch-h: 59px;
}