/* StepForge — дизайн-токены CSS (Этап 5.A)
 * Для сайта (site/) и админки (admin/).
 * Куда положить: public_html/assets/css/sf-tokens.css и подключить ДО остальных стилей:
 *   <link rel="stylesheet" href="/assets/css/sf-tokens.css">
 *
 * ВАЖНО (правки пользователя):
 *  1) Шагомер-экран и нижнее меню (в приложении) — без скруглений.
 *     На сайте/в админке flat-зоны используют --sf-radius-flat.
 *  2) Иконки ресурсов — разный цвет обводки по редкости (bronze/silver/gold).
 *  3) Только 3 уровня редкости ресурсов.
 *
 * Все значения — ДЕФОЛТЫ. Дизайн-редактор в админке переопределяет их через
 * инлайновый <style> с :root { --sf-... } (см. admin/design_editor).
 */

:root {
  /* ── 1. Палитра ── */
  --sf-bg: #EAF6FB;
  --sf-bg-2: #DCEFF7;
  --sf-surface: #FFFFFF;
  --sf-surface-soft: #FFF6E6;
  --sf-ink: #213A5C;
  --sf-ink-soft: #5B7397;
  --sf-line: #1E3354;

  --sf-primary: #4FC1E9;
  --sf-primary-deep: #2F9FD0;
  --sf-accent-pink: #FF8FB1;
  --sf-accent-green: #7ED957;
  --sf-accent-amber: #FFC24B;
  --sf-accent-purple: #B89BE8;
  --sf-danger: #FF6B6B;

  /* ── 2. Тиры предметов (экипировка 1..5) ── */
  --sf-tier-1: #9FB3C8;
  --sf-tier-2: #7ED957;
  --sf-tier-3: #4FC1E9;
  --sf-tier-4: #B89BE8;
  --sf-tier-5: #FFC24B;

  /* ── 2b. Редкость ресурсов (rarity_group) — ТОЛЬКО 3 ── */
  --sf-rar-bronze: #C8895A;
  --sf-rar-bronze-fill: #F0D6BE;
  --sf-rar-silver: #9FB0C0;
  --sf-rar-silver-fill: #E3ECF3;
  --sf-rar-gold: #E8B23A;
  --sf-rar-gold-fill: #FBE9B8;

  /* ── 3. Радиусы ── */
  --sf-radius-flat: 0px;   /* шагомер/меню — без скруглений */
  --sf-radius-xs: 4px;
  --sf-radius-sm: 12px;
  --sf-radius-md: 18px;
  --sf-radius-lg: 26px;
  --sf-radius-pill: 999px;

  /* ── Обводки / тени ── */
  --sf-border-width: 2.5px;
  --sf-border: var(--sf-border-width) solid var(--sf-line);
  --sf-shadow-card: 0 4px 0 rgba(30,51,84,.18);
  --sf-shadow-pop: 0 8px 20px rgba(30,51,84,.20);
  --sf-shadow-flat: 0 1px 0 rgba(30,51,84,.12);

  /* ── Типографика ── */
  --sf-font-display: "Baloo 2", "Fredoka", system-ui, sans-serif;
  --sf-font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* ── Шкала отступов (добавлено на этапе Phase 4 пивота, design/MARKETPLACE_SPEC.md §1) ──
   * Раньше жила только в устаревшем TOKENS.md и никогда не попадала в реальный
   * CSS. Добавляется сюда аддитивно (не marketplace-специфичный файл) — общая
   * шкала полезна за пределами маркетплейса, для любого будущего веб-слоя. */
  --sf-space-1: 4px;
  --sf-space-2: 8px;
  --sf-space-3: 12px;
  --sf-space-4: 16px;
  --sf-space-5: 24px;
  --sf-space-6: 32px;
  --sf-space-7: 48px;
}

/* ────────────────────────────────────────────────────────────────────────
 * Базовые утилиты-классы (опционально, можно использовать в site/admin)
 * ──────────────────────────────────────────────────────────────────────── */

.sf-card {
  background: var(--sf-surface);
  border: var(--sf-border);
  border-radius: var(--sf-radius-md);
  box-shadow: var(--sf-shadow-card);
}

/* FLAT-зона: шагомер, нижнее меню — без скруглений */
.sf-flat {
  background: var(--sf-surface);
  border-radius: var(--sf-radius-flat);
  box-shadow: var(--sf-shadow-flat);
}

/* Конфетная кнопка (игровой слой) */
.sf-btn {
  font-family: var(--sf-font-display);
  font-weight: 700;
  color: #fff;
  background: var(--sf-primary);
  border: var(--sf-border);
  border-radius: var(--sf-radius-pill);
  box-shadow: var(--sf-shadow-card);
  padding: 12px 22px;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .06s ease;
}
.sf-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 rgba(30,51,84,.18);
}
.sf-btn--success { background: var(--sf-accent-green); }
.sf-btn--reward  { background: var(--sf-accent-amber); color: var(--sf-ink); }
.sf-btn--danger  { background: var(--sf-danger); }

/* Тайл ресурса с обводкой по редкости */
.sf-res {
  border-radius: var(--sf-radius-sm);
  border: var(--sf-border-width) solid;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sf-res--bronze { border-color: var(--sf-rar-bronze); background: var(--sf-rar-bronze-fill); }
.sf-res--silver { border-color: var(--sf-rar-silver); background: var(--sf-rar-silver-fill); }
.sf-res--gold   { border-color: var(--sf-rar-gold);   background: var(--sf-rar-gold-fill); }

/* Рамка ячейки предмета по тиру */
.sf-item { border-radius: var(--sf-radius-sm); border: var(--sf-border-width) solid; background: var(--sf-surface); }
.sf-item--t1 { border-color: var(--sf-tier-1); }
.sf-item--t2 { border-color: var(--sf-tier-2); }
.sf-item--t3 { border-color: var(--sf-tier-3); }
.sf-item--t4 { border-color: var(--sf-tier-4); }
.sf-item--t5 { border-color: var(--sf-tier-5); }