/* Дизайн «Мягкие карточки»: токены. Слой лежит поверх styles.css (грузится после него, поэтому :root здесь перебивает старый :root);
   правила и роли цветов — docs/DESIGN.md → «Дизайн v2». Размеры, веса и цвета взяты из эскиза
   docs/plans/home-v2-sketch/V4Home.dc.html. */

@font-face {
  font-family: "Jost";
  src: url("/static/fonts/Jost.woff2?v=1") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* Цвета тёмной темы */
:root:not([data-theme="light"]) {
  --bg: #141518;
  --surface: #1f2125;
  --surface-2: #2a2c31;
  --surface-raised: #2a2c31;
  --surface-soft: #2a2c31;
  --border: rgba(243, 245, 239, 0.08);
  --border-strong: rgba(243, 245, 239, 0.16);
  --lime: #c6ed6b;
  --lime-hover: #d5f58c;
  --lime-text: #c6ed6b;
  --accent-ink: #15170f;
  --purple: var(--lavender);
  --character: var(--lavender);
  --text-primary: #f3f5ef;
  --text-secondary: #c9ccc6;
  --text-muted: #b4b8b2;
  --avatar-fallback-bg: #2a2c31;
  --avatar-fallback-text: #c9ccc6;
  --warning: #e7bc68;
  --danger: #f07a7a;
  --info: #8fd6e4;
  --danger-soft: rgba(240, 122, 122, 0.16);
  --info-soft: rgba(143, 214, 228, 0.14);

  --dropdown-bg: var(--surface-2);
  --modal-bg: var(--surface);
  --card-bg-hover: var(--surface-2);
}

/* Цвета светлой темы: те же слои (фон → карточка → внутри), только в светлых тонах.
   Лайм, лаванда и их чернила остаются теми же; коралл, янтарь и бирюза темнее, чтобы читаться текстом, и получают светлые чернила. */
:root[data-theme="light"] {
  --bg: #e7e6de;
  --surface: #f8f7f2;
  --surface-2: #ebeae2;
  --surface-raised: #ebeae2;
  --surface-soft: #ebeae2;
  --border: rgba(26, 28, 24, 0.08);
  --border-strong: rgba(26, 28, 24, 0.18);
  --lime: #c6ed6b;
  --lime-hover: #b4dd52;
  --lime-text: #4a6c0e;
  --accent-ink: #15170f;
  /* Лаванда как цвет текста (цель, «не хватает») темнее, чем как заливка */
  --purple: #5f4cb8;
  --character: #5f4cb8;
  --text-primary: #1a1c18;
  --text-secondary: #3f443b;
  --text-muted: #5f645a;
  --avatar-fallback-bg: #ebeae2;
  --avatar-fallback-text: #3f443b;
  --success: #25704c;
  --warning: #8a5c08;
  --danger: #a32d34;
  --info: #2a7186;
  --warning-ink: #ffffff;
  --danger-ink: #ffffff;
  --info-ink: #ffffff;
  --danger-soft: rgba(163, 45, 52, 0.12);
  --info-soft: rgba(42, 113, 134, 0.12);

  --dropdown-bg: var(--surface);
  --modal-bg: var(--surface);
  --card-bg-hover: var(--surface-2);

  /* Нижняя полоса телефона светлая, как карточки; --panel-deep остаётся для затемнения */
  --nav-bg: var(--surface);
  --nav-ink: #5f645a;
  --panel-deep: #1f2125;
  --text-label: #3a3e36;
  --scrim: color-mix(in srgb, var(--panel-deep) 40%, transparent);
}

/* Остальные токены не зависят от темы */
:root {
  --lavender: #b3a6f2;
  --lavender-ink: #17151f;
  --avatar-default: #e9d7f2;
  --panel-deep: #0a0b0c;
  --text-label: #d8dbd5;
  --nav-bg: var(--panel-deep);
  --nav-ink: #a9ada7;
  --paper: #f3f5ef;
  /* Белая плитка под фото товаров: снимки квадратные, на чисто белом фоне, в обеих темах */
  --photo-bg: #ffffff;
  /* Неактивное (раскупленный товар, склад без товара) гасится так же, как отключённая кнопка */
  --opacity-off: 0.5;
  /* Яркие тона для меток на тёмной или лаймовой подложке; в тёмной теме они же служат основными */
  --danger-bright: #f07a7a;
  --warning-bright: #e7bc68;
  --info-bright: #8fd6e4;
  --warning-ink: #1d1608;
  --danger-ink: #1a0f0f;
  --info-ink: #0d1a1d;

  --font-ui: "Jost", system-ui, sans-serif;
  --font-body: 15px;
  --font-small: 14px;
  --font-meta: 13px;
  --weight-light: 300;
  --weight-medium: 500;
  --weight-semibold: 600;

  --radius-control: 16px;
  --radius-inset: 18px;
  --radius-card: 24px;
  --radius-row: 26px;
  --radius-panel: 28px;
  --radius-pill: 999px;
  --icon-control-radius: 50%;
  --shadow: none;
  --glow-lime: none;
  --scrim: color-mix(in srgb, var(--panel-deep) 60%, transparent);

  --tap-size: 44px;
  --desktop-control-size: 40px;

  --app-nav-height: 56px;
  --app-nav-total: calc(var(--app-nav-height) + var(--mobile-safe-bottom));
  --app-nav-reach: 22px;
  /* Шапки телефона нет (логотип в листе «Ещё»): страница начинается у края с отступом на вырез экрана */
  --mobile-header-height: 0px;
  --mobile-page-top: calc(var(--mobile-safe-top) + 12px);
}