/* Дизайн-система Cheki — «Ночная касса».
 *
 * Идея: деньги живут в тёмной зоне (шапка-герой, экран входа) — там бренд и главные
 * суммы; всё, что пользователь трогает и правит, живёт в светлой зоне на «простыне»
 * с карточками. Карточка врезается в границу тёмного и светлого — это главный приём.
 *
 * Правила: тени вместо лишних границ, радиусы только 8/12/16/24, шаг сетки кратен 4,
 * шкала кеглей — 7 ступеней. Цвета — только отсюда, хардкод в компонентах запрещён.
 */

:root {
  /* --- Тёмная зона ------------------------------------------------------ */
  --ink: #0d1615;
  --ink-2: #142221;
  --ink-3: #1e302e;
  /* Текст на тёмном: on-dark-2 = 6.4:1, on-dark-3 — только подписи и плейсхолдеры. */
  --on-dark: #eef4f3;
  --on-dark-2: #b6c6c4;
  --on-dark-3: #93a5a3;
  --on-dark-line: rgba(238, 244, 243, 0.12);
  /* Полупрозрачные поверхности внутри тёмной зоны: сплошная заливка там смотрится
     заплаткой, поэтому контролы «проявляются» из фона. */
  --on-dark-fill: rgba(238, 244, 243, 0.1);
  --on-dark-track: rgba(238, 244, 243, 0.08);
  --on-dark-field: rgba(238, 244, 243, 0.06);

  /* --- Бренд ------------------------------------------------------------ */
  --interactive-primary: #538083;
  --interactive-deep: #3e6467;
  /* Бренд на тёмном фоне: #538083 там теряется, нужен светлее. */
  --interactive-glow: #7fb0b3;
  --interactive-bg: #e7f0f0;
  /* Текст на брендовой заливке. */
  --on-brand: #ffffff;

  /* --- Светлая зона ----------------------------------------------------- */
  /* bg-page — «простыня» под карточками, bg-primary — сами карточки. */
  --bg-page: #eff1f1;
  --bg-primary: #ffffff;
  --bg-surface: #f5f7f7;
  /* Тот же bg-page с нулевой прозрачностью. Нужен для градиента-растворения под
     таб-баром: от ключевого слова transparent браузер уводит цвет через прозрачный
     ЧЁРНЫЙ, и середина растяжки отдаёт серым. */
  --bg-page-0: rgba(239, 241, 241, 0);
  /* Матовое стекло плавающих элементов поверх контента (таб-бар). */
  --bg-glass: rgba(255, 255, 255, 0.72);

  --text-primary: #17211f;
  --text-secondary: #5c6a68;
  /* Только плейсхолдеры и disabled — контраста для контента не хватает. */
  --text-tertiary: #98a4a2;

  --border-regular: #e2e7e6;
  --border-soft: #edf0f0;
  /* Операторы × = в строках пересчёта кассы. */
  --op: #98a4a2;

  /* --- Семантические статусы ------------------------------------------- */
  --status-ok-bg: #e4f1eb;
  --status-ok-text: #1f7a5c;
  --status-warn-bg: #f8efdf;
  --status-warn-text: #8a5a0b;
  --status-danger-bg: #f9e6e6;
  --status-danger-text: #a32d2d;
  /* Те же статусы в тёмной зоне. Приём как у --interactive-glow: на ink тёмный
     #a32d2d не читается, а светлая плашка --status-danger-bg смотрится заплаткой —
     значит текст светлее, а заливка полупрозрачная (см. --on-dark-fill).
     --status-danger-glow на --ink даёт 7.4:1. */
  --status-danger-glow: #e8918c;
  --status-danger-dim: rgba(232, 145, 140, 0.12);

  /* --- Тени -------------------------------------------------------------
     shadow-1 — обычная карточка, shadow-2 — карточка, врезающаяся в тёмную зону,
     shadow-float — плавающий таб-бар. */
  --shadow-1: 0 1px 3px rgba(13, 22, 21, 0.08), 0 8px 20px -12px rgba(13, 22, 21, 0.2);
  --shadow-2: 0 2px 6px rgba(13, 22, 21, 0.1), 0 24px 48px -22px rgba(13, 22, 21, 0.45);
  --shadow-float: 0 2px 8px rgba(13, 22, 21, 0.08), 0 12px 32px -12px rgba(13, 22, 21, 0.28);
  /* Кольцо фокуса поля: на светлом — бренд-тинт, на тёмном — светлый бренд. */
  --focus-ring: 0 0 0 3px var(--interactive-bg);
  --focus-ring-dark: 0 0 0 3px rgba(127, 176, 179, 0.18);
  /* Затемнение под модальным листом — в тон тёмной зоны. */
  --overlay: rgba(13, 22, 21, 0.5);

  /* --- Радиусы ---------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Сетка (кратно 4) -------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;

  /* --- Типографика ------------------------------------------------------- */
  /* Один шрифт на весь интерфейс, включая логотип: акцидентный Fredoka убран —
     надпись бренда набирается Inter с плотным трекингом (см. BrandLogo). */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-caption: 0.6875rem; /* 11 */
  --fs-label: 0.75rem; /* 12 */
  --fs-body: 0.875rem; /* 14 */
  --fs-body-lg: 1rem; /* 16 */
  --fs-title: 1.125rem; /* 18 */
  --fs-kpi-sm: 1.25rem; /* 20 */
  --fs-kpi: 1.375rem; /* 22 */
  /* Главное число экрана в тёмной шапке. */
  --fs-hero: 2.125rem; /* 34 */

  /* --- Раскладка --------------------------------------------------------- */
  --tap-target: 44px;
  /* Плавающий таб-бар: высота полосы + отступ снизу + запас. */
  --tabbar-bar-height: 62px;
  --tabbar-height: 96px;
  /* Сколько бар ЗАНИМАЕТ снизу на самом деле: свою высоту плюс системный отступ —
     домашний индикатор iPhone, жестовая полоса Android. Резервировать под контентом
     нужно именно это: на голом --tabbar-height нижние строки списка уходили под бар
     ровно на величину индикатора. В браузере на маке отступ равен нулю, поэтому
     расхождение видно только на устройстве. */
  --tabbar-space: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  --app-max-width: 430px;
  /* Верхний отступ шапки: статус-бар iOS + воздух. */
  --header-top: max(52px, calc(env(safe-area-inset-top) + var(--space-5)));
}