/* Buyer Shop · стиль «маркетплейс»: кобальтовый акцент, Onest, карточки товаров.
   Цвета заданы RGB-тройками, чтобы в Tailwind работали модификаторы прозрачности (bg-cobalt/10). */

/* ---------- Светлая тема ---------- */
:root {
  --paper: 243 245 249;   /* фон */
  --card: 255 255 255;    /* карточки */
  --rim: 223 228 238;     /* рамки и разделители */
  --slate: 91 104 128;    /* вторичный текст */
  --navy: 20 33 61;       /* основной текст */
  --cobalt: 40 72 216;    /* акцент */
  --cobalt-press: 31 59 186;
  --ok: 19 137 90;        /* в наличии */
  --low: 194 65 12;       /* мало / ошибка */
  --hero: 20 33 61;       /* карточка «Хит недели» */
  --hero-text: 255 255 255;
  color-scheme: light;
}

/* ---------- Тёмная тема: системная (режим «Авто» вне Telegram) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: 13 18 31; --card: 22 29 46; --rim: 38 48 73; --slate: 138 151 176; --navy: 230 235 245;
    --cobalt: 98 126 255; --cobalt-press: 80 108 240; --ok: 52 196 137; --low: 240 131 79;
    --hero: 32 46 92; --hero-text: 255 255 255;
    color-scheme: dark;
  }
}
/* ---------- Тёмная тема: выбрана вручную или пришла из Telegram ---------- */
:root[data-theme="dark"] {
  --paper: 13 18 31; --card: 22 29 46; --rim: 38 48 73; --slate: 138 151 176; --navy: 230 235 245;
  --cobalt: 98 126 255; --cobalt-press: 80 108 240; --ok: 52 196 137; --low: 240 131 79;
  --hero: 32 46 92; --hero-text: 255 255 255;
  color-scheme: dark;
}

html, body { background: rgb(var(--paper)); color: rgb(var(--navy)); }
body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  transition: background-color .2s, color .2s;
}
.tnum { font-variant-numeric: tabular-nums; }
/* Классы flex и grid иначе перебивают атрибут hidden, и скрытый блок остаётся на экране */
[hidden] { display: none !important; }
h1, h2 { text-wrap: balance; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Безопасные зоны: полноэкранный режим Telegram (Bot API 8+) и вырез iPhone */
.app {
  padding-top: calc(var(--tg-content-safe-area-inset-top, 0px) + var(--tg-safe-area-inset-top, 0px));
}
.tabbar {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tg-safe-area-inset-bottom, 0px) + 6px);
}

/* Шторка с реквизитами перевода */
.sheet { transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.sheet.closed { transform: translateY(105%); }
.veil { transition: opacity .2s; }

/* Карточка товара: подсветка при наведении. Только там, где есть курсор —
   на телефоне hover «залипает» после нажатия, там хватает подсветки по нажатию */
.product-card { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
/* Все кнопки: лёгкая подсветка при наведении. Полупрозрачный слой цвета текста затемняет кнопку
   в светлой теме и высветляет в тёмной, поэтому одно правило подходит и залитым, и контурным кнопкам */
button { transition: box-shadow .15s, border-color .15s; }
@media (hover: hover) {
  button:not(:disabled):hover { box-shadow: inset 0 0 0 999px rgb(var(--navy) / .08); }
}

@media (hover: hover) {
  .product-card:hover {
    border-color: rgb(var(--cobalt));
    box-shadow: 0 0 0 1px rgb(var(--cobalt) / .35), 0 8px 24px rgb(var(--cobalt) / .18);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body, .sheet, .veil, .product-card, button { transition: none; }
  .product-card:hover { transform: none; }
}
:focus-visible { outline: 2px solid rgb(var(--cobalt)); outline-offset: 2px; }