:root {
  /* Оформление светлое и только светлое.
     Без этой строки телефон в ночном режиме считает, что страница может быть
     тёмной, и красит системные области вокруг приложения по-тёмному: в PWA
     над белой шапкой появлялась чёрная полоса со временем и зарядом. Сама
     страница при этом оставалась светлой — выглядело как обрезанная вёрстка. */
  color-scheme: light;

  /* ===== Безопасные зоны экрана =====
     На телефонах с вырезом и полосой-«домой» часть экрана занята системой.
     Значения вынесены в переменные, а не подставляются env() по месту, по двум
     причинам: их видно все сразу, и в проверках их можно подменить, то есть
     вёрстку «как на айфоне» можно прогнать в обычном браузере, а не ловить
     руками на живом телефоне. Именно такую поломку и пропустили: нижнее меню
     на айфоне сжималось, и значки упирались в разделительную черту. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Толщина разделительных черт. На экранах с двойной плотностью пикселей
     настоящая «волосяная» линия — половина точки: черта в целый пиксель на
     телефоне выглядит грубо и дёшево. Браузеры без поддержки просто возьмут
     единицу из объявления ниже. */
  --hairline: 1px;

  /* Brand — насыщенное золото, не спектральный «маркерный» жёлтый и не
     размытая пастель.
     Первая версия правки (#FFC629 + широкий градиент от почти-белого до
     тёмного) на практике оказалась ХУЖЕ прежнего кислотного #FFED00: на
     крупной кнопке во весь экран верхняя часть градиента (#FFDA6B, это уже
     заметно ОБЕСцвеченный тон — насыщенность там 58% против 100% у основного
     цвета) читалась как выцветшая пастель, будто кнопка «протёрлась». Урок:
     «богаче» ≠ «бледнее». Богаче — это тот же насыщенный, яркий цвет, но
     смещённый по оттенку от чистого лимонного в сторону золота, и с
     ОБЪЁМОМ за счёт узкого, а не широкого перепада светлоты в градиенте.
     #FFC300 держит ту же яркость и стопроцентную насыщенность, что и
     исходный кислотный жёлтый (принципиально — по прямой просьбе сделать
     цвет ярче и насыщеннее), но на 10° теплее по оттенку: заметно золото, а
     не лимон. Стопы градиента ниже НЕ теряют насыщенность (синий канал везде
     держится на нуле) — meняется только светлота, и в узком диапазоне, а не
     до почти-белого. */
  --primary: #FFC300;
  --primary-dark: #F0A800;
  --primary-light: #FFF2D1;
  --primary-gradient: linear-gradient(180deg, #FFCE33 0%, #FFC300 50%, #F0A800 100%);
  --shadow-primary: 0 3px 10px rgba(240, 168, 0, 0.32), 0 1px 2px rgba(17, 17, 17, 0.1);
  --on-primary: #1F1600;

  /* Ink / surfaces
     --bg и --surface раньше были одним и тем же белым — из-за этого шапка,
     нижнее меню и карточки не читались как отдельные блоки, только тонкая
     тень/черта на глаз почти не давала разницы. Теперь у страницы свой
     холодный серый фон, а --surface остаётся чистым белым — блоки видно
     по цвету, а не только по линии на краю. */
  --ink: #111111;
  --bg: #F1F2F5;
  --surface: #FFFFFF;
  --surface-alt: #FAFAFA;
  /* Чуть холоднее и мягче прежнего #ECECEC: тёплый серый на белом даёт
     ощущение выцветшей бумаги, холодный читается как аккуратная линия.
     --border-strong для того, что должно быть очерчено явно: поля ввода,
     кнопки с обводкой. */
  --border: #E6E7EB;
  --border-strong: #D4D6DC;

  /* Text */
  --text: #1A1A1A;
  --text-muted: #6B7280;
  --text-on-ink: #FFFFFF;

  /* Semantic */
  --success: #16A34A;
  --success-light: #E7F7ED;
  --danger: #DC2626;
  --danger-light: #FDECEC;
  --warning: #D97706;
  --warning-light: #FDF3E3;
  --info: #2563EB;
  --info-light: #EAF1FD;

  /* Radius — крупнее прежнего. Мелкое скругление (10-14px) на фоне крупных
     фотографий и жирного шрифта читается тесно и старомодно; более щедрое
     скругление — один из самых узнаваемых признаков «свежего», недавно
     сделанного интерфейса (карточки еды, доставки, финтеха 2023+). */
  --radius-card: 20px;
  --radius-btn: 14px;
  --radius-sm: 10px;
  --radius-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 1px rgba(17, 17, 17, 0.04);
  --shadow-md: 0 4px 10px rgba(17, 17, 17, 0.08), 0 2px 4px rgba(17, 17, 17, 0.05);
  --shadow-lg: 0 12px 28px rgba(17, 17, 17, 0.12), 0 4px 10px rgba(17, 17, 17, 0.06);
  /* Тень вверх для закреплённых снизу панелей (шаги мастера, бронь,
     переписка) — они лежат ПОВЕРХ прокручиваемого содержимого, и тень читает
     их именно так: приподнятая плашка, а не отрезанная линией полоса. */
  --shadow-float-up: 0 -6px 16px rgba(17, 17, 17, 0.08), 0 -1px 3px rgba(17, 17, 17, 0.04);

  /* Font — Nunito первым: округлые, дружелюбные засечки, поддерживает
     кириллицу и латиницу полностью. Дальше — системный стек: пока Nunito не
     подгрузился (либо для арабского, где у Nunito глифов нет вовсе) текст не
     пропадает, а показывается родным шрифтом платформы. */
  --font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --header-h: 60px;
  --bottom-nav-h: 62px;
  --container-max: 1200px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Breakpoints (for reference in JS if needed) */
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}

/* Экраны с плотностью от двух точек на пиксель — телефоны и ретина-мониторы.
   Полпикселя там отрисовываются честно и дают тонкую аккуратную черту вместо
   заметной серой полосы. */
@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2) {
  :root {
    --hairline: 0.5px;
  }
}