/* Токены дизайна: docs/DESIGN.md (SPEC из Claude Design + «Слой приложения»).
   Цвета и размеры в app.css берутся только отсюда; правка вида — правка токена
   или одного макроса в app/templates/components/. */
:root {
  color-scheme: light;

  /* Цвет */
  --c-page: #F2F4F7;
  --c-surface: #FFFFFF;
  --c-row-hover: #F7F9FB;
  --c-line: #E3E7EC;
  --c-line-quiet: #C3CBD5;       /* контур «Ждём», неактивная рамка, полоса жестов */
  --c-field: #8A95A2;            /* рамка поля в покое, засечка 90% */
  --c-rail-idle: #DCE2E8;        /* серая палочка линейки */
  --c-text: #16202B;             /* основной текст, рамка наклейки */
  --c-text-2: #333F4D;           /* подписи, вторичный текст */
  --c-text-quiet: #5A6675;
  --c-text-disabled: #8A95A2;
  --c-accent: #2451C8;
  --c-accent-hover: #1C41A4;
  --c-accent-active: #16368A;
  --c-on-accent: #FFFFFF;
  --c-halo: rgba(36, 81, 200, 0.16);
  --c-fill: #E7EAEE;             /* дорожка сегмента, аватар, наведение тихой кнопки на белом */
  --c-fill-strong: #DDE3EA;      /* нажатие тихой кнопки, наведение на сером */
  --c-neutral-line: #CFD5DD;     /* рамка нейтрального ответа */
  --c-photo-bg: #EDF1F5;         /* подложка фото и заглушки */
  --c-photo-shape: #C3CBD5;
  --c-photo-detail: #DCE2E8;
  --c-viewer: #16202B;           /* фон увеличенного снимка */

  /* Этапы: фон, текст (контур только у «Ждём») */
  --st-new-bg: #FFFFFF;        --st-new-text: #333F4D;       --st-new-line: #C3CBD5;
  --st-arrived-bg: #E4F2E7;    --st-arrived-text: #1E6E3C;
  --st-packed-bg: #ECEAF9;     --st-packed-text: #4A3D9E;
  --st-boxpacked-bg: #DEEFF2;  --st-boxpacked-text: #13606C;
  --st-transit-bg: #F7E9F0;    --st-transit-text: #7B3457;
  --st-received-bg: #E7EAEE;   --st-received-text: #333F4D;

  /* Сообщения: фон, рамка, текст */
  --ok-bg: #E4F2E7;    --ok-line: #B7DCC0;    --ok-text: #1E6E3C;
  --warn-bg: #FDF3E0;  --warn-line: #F0D9A8;  --warn-text: #7A4E00;
  --err-bg: #FDECEC;   --err-line: #F3C9C6;   --err-text: #B3261E;

  /* Шкала */
  --scale-calm: #5A6675;
  --scale-near: #7A4E00;
  --scale-over: #B3261E;

  /* Шрифты */
  --font-sans: 'Golos Text', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Noto Sans CJK SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Размеры текста */
  --fs-client-code: 32px;  /* номер клиента в кабинете */
  --fs-print-number: 40px; /* номер коробки на печатном листе: маркировка */
  --fs-sticker: 24px;
  --fs-quantity: 32px;
  --fs-title-desktop: 24px;
  --fs-title-phone: 20px;
  --fs-input: 20px;        /* поле трека, моно */
  --fs-qty-row: 20px;      /* ×N в строке */
  --fs-button: 18px;
  --fs-code-row: 17px;     /* номер клиента в строке списка */
  --fs-body: 16px;
  --fs-answer: 15px;       /* строки ответа, трек в карточке */
  --fs-caption: 14px;
  --fs-label: 13px;
  --fs-small: 12px;
  --fs-avatar: 15px;

  --fw-regular: 400;
  --fw-semibold: 600;
  --lh-body: 1.55;
  --lh-button: 1.35;
  --lh-number: 1.15;
  --ls-cyrillic: -0.01em;
  --ls-sticker: 0.03em;
  --ls-track: 0.02em;

  /* Отступы: сетка 4 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* Скругления */
  --r-control: 8px;
  --r-card: 12px;
  --r-segment: 6px;
  --r-sticker: 10px;
  --r-rail: 3px;
  --r-check: 4px;
  --r-round: 50%;

  /* Высоты и зоны */
  --h-header-phone: 56px;
  --h-header-desktop: 64px;
  --h-field: 58px;              /* кадр: 56 + рамка (выгрузка в content-box) */
  --h-field-desktop: 48px;
  --h-button: 56px;
  --h-button-desktop: 48px;
  --h-row-phone: 100px;         /* кадр: min-height 76 + отступы 12 (content-box) */
  --h-row-desktop: 52px;
  --h-nav-item: 72px;           /* кадр: min-height 56 + отступы 8 (content-box) */
  --h-tab: 44px;
  --h-objbar: 44px;           /* полоса объекта под шапкой */
  --tabs-fade: 24px;            /* затухание у краёв прокручиваемого ряда вкладок */
  --h-tap: 44px;
  --h-camera: 96px;
  --h-toggle: 26px;
  --w-toggle: 44px;
  --h-scale: 8px;
  --h-loading: 3px;

  /* Элементы */
  --avatar-phone: 40px;
  --avatar-desktop: 32px;
  --thumb-row: 52px;
  --thumb-row-desktop: 40px;
  --thumb-panel: 72px;
  --photo-card-short: 200px;
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-nav: 22px;
  --icon-lg: 24px;
  --icon-empty: 32px;
  --icon-stroke: 1.75;           /* Lucide, «Слой приложения» п. 2 */
  --mark-stroke: 3;              /* галочка в квадрате 24 и в кружке линейки */
  --check-box: 24px;
  --check-box-desktop: 20px;
  --toggle-knob: 22px;
  --rail-dot-done: 18px;
  --rail-dot-current: 28px;
  --rail-dot-future: 14px;
  --rail-halo: 40px;
  --rail-bar: 6px;
  --rail-gap: 4px;
  --caret: 2px;
  --sticker-border: 1.5px;
  --field-border-error: 2px;
  --camera-border: 2px;
  --scale-tick: 2px;
  --rail-check-done: 11px;
  --rail-check-current: 15px;
  --rail-truck: 18px;
  --rail-truck-shift: -5px;
  --h-multiline: 106px;         /* кадр 7f: min-height 80 + отступы 12 + рамка */
  --photo-card-desktop: 360px;
  --menu-width: 320px;
  --col-code: 200px;            /* колонка номера в плоском списке */
  --col-photos: 540px;          /* две панели снимков в карточке позиции (кадр 5a) */
  --search-wide: 450px;         /* поле поиска на компьютере (кадр 7a) */
  --col-phone: 220px;           /* колонки списка клиентов (кадр 7a) */
  --col-count: 120px;
  /* Колонки «Кому эта посылка»: та же таблица, но в колонке 720, а не во всю ширину */
  --col-code-link: 120px;
  --col-phone-link: 168px;
  --col-count-link: 92px;
  --col-box: 280px;
  --col-stage: 120px;
  --col-time: 160px;            /* колонки журнала */
  --col-who: 200px;           /* колонка этапа в позициях клиента (кадр 7c) */
  --col-aside: 400px;           /* правая колонка коробки на компьютере (кадр 4d) */
  --col-qty: 72px;              /* колонки состава коробки на компьютере */
  --col-price: 120px;
  --col-track: 170px;
  --content-auth: 440px;
  --content-narrow: 600px;
  --content-form: 720px;        /* одиночная форма на компьютере — колонка по центру */
  --content-receiving: 1024px;  /* приём: карточка 600 + зазор 24 + «Сегодня принято» 400 */
  --content-wide: 1376px;

  /* Глубина: одна тень карточки и одна у липкой панели */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sticky: 0 -4px 16px rgba(16, 24, 40, 0.06);
  --focus-ring: 2px solid #2451C8;
  --focus-offset: 2px;

  /* Движение */
  --t-hover: 140ms;
  --t-press: 100ms;
  --t-answer: 160ms;
  --t-check: 280ms;
  --t-scale: 400ms;
  --t-rail: 600ms;
  --t-halo: 200ms;
  --t-halo-delay: 600ms;
  --t-page: 150ms;
  --t-move: 200ms;
  --t-fade: 160ms;
  --t-loading: 8s;
  --press-scale: 0.98;
  --answer-shift: 4px;

  /* Безопасные зоны */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}