/* ════════════════════════════════════════════════════════════════════════
   RUSTIFIER · DESIGN TOKENS · v1
   Single source of truth для дизайн-системы. Импортируется в
   public/index.html (актуальный интерфейс) и в design_references/preview.html
   (визуальный референс).

   Подробное описание токенов и правил их применения — DESIGN_SYSTEM.md
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── ФОНОВЫЕ ТОНА ─────────────────────────────────────────────────────
     2 каркасных тона: bg-app (header+sidebar+body) и bg-suggest
     (suggest-bar+footer+list-hdr — темнее, «служебные полосы»).
     bg-page — за рамкой приложения. */
  --bg-page:        #0a0a0a;
  --bg-app:         #1a1a1a;
  --bg-suggest:     #121212;
  --bg-tile:        #232323;  /* плитки sidebar/suggest-pills */
  --bg-tile-hover:  #2a2a2a;
  --bg-tile-active: rgba(196, 69, 47, 0.14);
  --bg-row:         #161616;  /* плитки таблицы — между bg-app и bg-suggest */
  --bg-chip:        rgba(0, 0, 0, 0.32);

  /* ── РАЗДЕЛИТЕЛИ ──────────────────────────────────────────────────── */
  --border:    #262626;
  --border2:   #383838;
  --divider:   rgba(255, 255, 255, 0.04);

  /* ── ТЕКСТ (контраст на bg-app #1a1a1a) ──────────────────────────────
     text   — 14.7:1, AAA для всего
     text2  — 5.7:1, AA для нормального текста
     muted  — 2.4:1, ТОЛЬКО декор (иконки, чипы), не для смыслового текста */
  --text:    #e6e6e6;
  --text2:   #9c9c9c;
  --muted:   #5e5e5e;

  /* ── БРЕНД + СТАТУСЫ ─────────────────────────────────────────────────
     acc — красный (HSL 9°), активный таб, primary CTA, selected row
     green — жёлто-зелёный (HSL 80°, split-complement), online/active pill
     gold — оранжевый (HSL 41°, аналог acc), цены/счета
     red — крит-ошибка, full server */
  --acc:      #c4452f;
  --acc2:     #a83822;
  --acc-bg:   rgba(196, 69, 47, 0.10);
  --green:    #7ca933;
  --green-bg: rgba(124, 169, 51, 0.14);
  --gold:     #c89a3a;
  --red:      #bf3a2f;

  /* ── ШРИФТЫ ──────────────────────────────────────────────────────────
     Один шрифт на всё приложение: Roboto Condensed.
     Веса: 300 (thin) / 400 (regular) / 500 (medium) / 700 (bold).
     Числа — 500 (medium); чипы-счётчики и заметные цифры — 700 (bold). */
  --head: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --body: 'Roboto Condensed', 'Arial Narrow', sans-serif;

  /* ── SPACING ─────────────────────────────────────────────────────────
     Базовая лесенка: xs(4) sm(8) md(8) lg(14) xl(22).
     pad-tile-y/x — внутренний padding плитки.
     pad-edge — внешний padding каркаса (края frame-mock → первые элементы).
     pad-inner — внутренний gap между sidebar и body, и сверху/снизу
                 содержимого внутри них. */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 8px;
  --sp-lg: 14px;
  --sp-xl: 22px;
  --pad-tile-y: 11px;
  --pad-tile-x: 16px;
  --pad-edge:  60px;
  --pad-inner: 36px;

  /* ── ТЕНИ ─ слои глубины каркаса ────────────────────────────────────
     sh-frame — вокруг всего mock (парит над страницей)
     sh-header / sh-footer — drop-тень внутрь body (припечатанная рамка)
     sh-divider — вертикальная inset-тень между sidebar и body
     sh-tile-hover — лёгкий lift на hover плиток */
  --sh-frame:      0 12px 32px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.02) inset;
  --sh-header:     0 6px 18px rgba(0,0,0,0.45), 0 1px 0 rgba(0,0,0,0.6);
  --sh-footer:     0 -6px 18px rgba(0,0,0,0.45), 0 -1px 0 rgba(0,0,0,0.6);
  --sh-tile:       0 1px 0 rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.025) inset;
  --sh-tile-hover: 0 2px 6px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04) inset;
  --sh-divider:    inset -1px 0 0 rgba(0,0,0,0.5), inset -2px 0 0 rgba(255,255,255,0.015);

  /* ── WoW-style quality (для иконок/имён предметов) ──────────────────
     Не используется в каркасе, только для маркировки качества предметов. */
  --q-poor:      #9d9d9d;
  --q-common:    #ffffff;
  --q-uncommon:  #1eff00;
  --q-rare:      #0070dd;
  --q-epic:      #a335ee;
  --q-legendary: #ff8000;
}