/* Токены дизайна «Узнать товар»: цвета, шрифт, размеры, отступы, скругления, движение. Только переменные — никаких правил для элементов.
   Идея: ценник магазина техники. Графит и жёлтая «метка» (цвет ценника); камера всегда тёмная, как видоискатель.
   Темы: светлая (по умолчанию), тёмная по настройке системы, и принудительные <html data-theme="light|dark"> (выбор человека в настройках).
   Тёмные значения записаны ДВАЖДЫ (по настройке системы и принудительно) — tools/tokens_smoke_test.js следит, чтобы они не разошлись,
   и проверяет контраст каждой пары «текст на фоне» по стандарту WCAG AA в обеих темах. Менять цвета — только вместе с этим тестом.
   Внешних шрифтов и адресов нет: магазин может быть без интернета. Страницы пока подключают app.css; tokens.css подключается при редизайне. */

:root {
  /* ---- цвета, светлая тема (смысловые имена; палитра: графит, бумага, ценник, метка, кобальт, рубин) ---- */
  --bg: #F3F4F6;            /* бумага */
  --surface: #FFFFFF;       /* ценник: карточки, поля */
  --qr-paper: #FFFFFF;      /* под QR-кодом всегда белое, в любой теме: иначе камера телефона его не прочтёт */
  --surface-2: #EAECEF;     /* вторичные заливки: чипы, строки таблиц */
  --ink: #171B21;           /* графит: основной текст */
  --ink-muted: #59636F;     /* второстепенный текст */
  --line: #DDE1E6;          /* разделители (не граница поля) */
  --line-strong: #808A96;   /* граница полей ввода и контролов (≥ 3:1 и на бумаге, и на ценнике) */
  --action: #FFC81E;        /* метка: основная кнопка */
  --on-action: #171B21;     /* текст на метке */
  --action-edge: #171B21;   /* рамка основной кнопки: без неё жёлтое на белом сливается */
  --link: #1D4ED8;          /* кобальт: ссылки */
  --focus: #1D4ED8;         /* кольцо фокуса */
  --danger: #C4262E;        /* рубин: ошибки */
  --danger-soft: #FBE7E8;
  --ok: #17693D;
  --ok-soft: #E1F2E8;
  --notice-soft: #FFF3C4;   /* подсказки и «не уверен» */
  --stage: #171B21;         /* видоискатель камеры: тёмный в любой теме */
  --on-stage: #FFFFFF;
  --mark: #FFC81E;          /* рамка-метка «поймал товар» */

  /* ---- шрифт: системный (родной вид на каждом устройстве, ноль байт, работает офлайн) ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --fs-xs: 0.75rem;         /* 12 */
  --fs-s: 0.875rem;         /* 14 */
  --fs-m: 1rem;             /* 16 */
  --fs-l: 1.125rem;         /* 18 */
  --fs-xl: 1.375rem;        /* 22 */
  --fs-2xl: 1.75rem;        /* 28 */
  --fs-display: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);   /* название модели на ценнике */
  --lh-tight: 1.15;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- сетка 4 px, скругления по значимости (не одно на всё) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --r-s: 6px;               /* поля, чипы */
  --r-m: 10px;              /* кнопки, карточки списков */
  --r-tag: 4px;             /* сам ценник: почти прямой угол */
  --r-l: 20px;              /* нижняя панель на телефоне */
  --r-pill: 999px;
  --hit: 44px;              /* минимальный размер нажимаемого места */

  /* ---- тени: только у ценника и нижней панели ---- */
  --shadow-tag: 0 1px 0 rgba(23, 27, 33, 0.05), 0 10px 28px rgba(23, 27, 33, 0.14);
  --shadow-sheet: 0 -8px 32px rgba(23, 27, 33, 0.18);

  /* ---- движение: отвечает на действие человека; единственное «само по себе» — фиксация рамки на товаре ---- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- раскладка и слои ---- */
  --rail-w: 92px;           /* боковая колонка на ноутбуке */
  --tag-w: 26rem;           /* ширина ценника на ноутбуке */
  --sheet-max: 36rem;       /* ширина нижней панели на планшете */
  --z-nav: 20;
  --z-sheet: 30;
  --z-toast: 40;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1318;
    --surface: #1A2028;
    --surface-2: #232B35;
    --ink: #E9ECF0;
    --ink-muted: #A0AAB5;
    --line: #2B3440;
    --line-strong: #6B7683;
    --action: #FFC81E;
    --on-action: #171B21;
    --action-edge: #FFC81E;
    --link: #8FB0FF;
    --focus: #FFC81E;
    --danger: #FF8F96;
    --danger-soft: #3A1D20;
    --ok: #6FD39B;
    --ok-soft: #14301F;
    --notice-soft: #3A3010;
    --stage: #0B0E12;
    --on-stage: #FFFFFF;
    --mark: #FFC81E;
    --shadow-tag: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-sheet: 0 -1px 0 rgba(255, 255, 255, 0.08);
  }
}

:root[data-theme="dark"] {
  --bg: #0F1318;
  --surface: #1A2028;
  --surface-2: #232B35;
  --ink: #E9ECF0;
  --ink-muted: #A0AAB5;
  --line: #2B3440;
  --line-strong: #6B7683;
  --action: #FFC81E;
  --on-action: #171B21;
  --action-edge: #FFC81E;
  --link: #8FB0FF;
  --focus: #FFC81E;
  --danger: #FF8F96;
  --danger-soft: #3A1D20;
  --ok: #6FD39B;
  --ok-soft: #14301F;
  --notice-soft: #3A3010;
  --stage: #0B0E12;
  --on-stage: #FFFFFF;
  --mark: #FFC81E;
  --shadow-tag: 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-sheet: 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* «Уменьшить анимацию» в системе: движения нет вовсе (рамка просто появляется на месте). */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}