/* Общая тема «Графит»: токены, шрифты, сброс. Подключается на всех страницах.
   Тёмная/светлая тема переключается атрибутом data-theme="dark|light" на <html>
   (кнопка в шапке, см. js/common/layout.js). Цвета в CSS и JS берутся только из токенов. */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #121418;
  --panel:     #1a1d23;
  --panel2:    #22262e;
  --line:      #2b3039;
  --line2:     #23272f;
  --text:      #c4c9d2;
  --dim:       #8b93a1;
  --hi:        #eef0f4;

  --acc:       #d9a54a;               /* акцент: приглушённый янтарь */
  --acc-ink:   #1a1408;               /* текст на акценте */
  --acc-soft:  rgba(217, 165, 74, .12);
  --t1:        #56b37f;               /* своя команда */
  --t2:        #e06a68;               /* противник */
  --t1-soft:   rgba(86, 179, 127, .16);
  /* Шкала урона за бой: ≤1000 / 1001–1999 / 2000–3000 / 3001–4000 / 4001+ */
  --dmg-1: #e06a68;  --dmg-2: #e8944a;  --dmg-3: #56b37f;  --dmg-4: #3fc1c9;  --dmg-5: #a77be8;
  --t2-soft:   rgba(224, 106, 104, .16);
  --win:       #56b37f;
  --loss:      #e06a68;
  --mid:       #d9a54a;
  --win-ink:   #0d1f14;
  --loss-ink:  #ffffff;

  --c1: #d9a54a;  --c2: #5b9cf0;  --c3: #4fb3a9;   /* карточки на главной */
  /* Серии графиков: хорошо (победы, урон) / плохо / доп. величина (засвет) / нейтральное.
     Зелёный/красный плохо различимы при дейтеранопии — на графиках всегда дублируются знаком или числом */
  --viz-1: #56b37f;  --viz-2: #e06a68;  --viz-soft: rgba(86, 179, 127, .38);  --viz-0: #4a505b;

  --hover:     rgba(255, 255, 255, .035);
  --topbar-bg: rgba(18, 20, 24, .94);
  --overlay:   rgba(0, 0, 0, .6);
  --float-bg:  rgba(18, 20, 24, .86);
  --shadow:    0 1px 2px rgba(0, 0, 0, .25);

  --fh:   'Inter', 'Segoe UI', system-ui, sans-serif;   /* заголовки */
  --fb:   'Inter', 'Segoe UI', system-ui, sans-serif;   /* текст */
  --fn:   'Inter', 'Segoe UI', system-ui, sans-serif;   /* числа */
  --fh-w: 700;
  --fs-base: 14px;

  --caps:    none;         /* регистр мелких подписей и кнопок */
  --caps-ls: .01em;
  --radius:    12px;
  --radius-sm: 8px;
  --pill:      8px;

  --topbar-h:  56px;
  --sidebar-w: 248px;
}

/* Светлая версия «Графита»: та же структура, акцент и цвета команд темнее для контраста на белом */
[data-theme="light"] {
  color-scheme: light;

  --bg:        #f3f4f6;
  --panel:     #ffffff;
  --panel2:    #f6f7f9;
  --line:      #e0e3e8;
  --line2:     #eceef2;
  --text:      #39404b;
  --dim:       #6b7280;
  --hi:        #14171c;

  --acc:       #a86a12;
  --acc-ink:   #ffffff;
  --acc-soft:  rgba(217, 165, 74, .15);
  --t1:        #1f8a4c;
  --t2:        #d14343;
  --t1-soft:   rgba(31, 138, 76, .08);
  --dmg-1: #d14343;  --dmg-2: #d0731f;  --dmg-3: #1f8a4c;  --dmg-4: #138f97;  --dmg-5: #7a4fc4;
  --t2-soft:   rgba(209, 67, 67, .08);
  --win:       #1f8a4c;
  --loss:      #d14343;
  --mid:       #b7791f;
  --win-ink:   #ffffff;
  --loss-ink:  #ffffff;

  --c1: #c98a1e;  --c2: #2f6fd6;  --c3: #1f9488;
  --viz-1: #1f8a4c;  --viz-2: #d14343;  --viz-soft: rgba(31, 138, 76, .32);  --viz-0: #c3c8d0;

  --hover:     rgba(20, 23, 28, .03);
  --topbar-bg: rgba(255, 255, 255, .95);
  --overlay:   rgba(20, 23, 28, .4);
  --float-bg:  rgba(255, 255, 255, .92);
  --shadow:    0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }   /* атрибут hidden сильнее любых display в компонентах */
::selection { background: var(--acc); color: var(--acc-ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--fb);
  font-size: var(--fs-base, 14px);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;   /* цифры одной ширины — столбцы ровные */
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; }
table { font-variant-numeric: tabular-nums; }

@keyframes fadeUp  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes spin    { to { transform: rotate(360deg); } }

.section-label {
  font: 600 12px var(--fb);
  text-transform: var(--caps);
  letter-spacing: var(--caps-ls);
  color: var(--dim);
  margin-bottom: 10px;
}

/* Цвет рейтинга (WN8 и т.п.) — плашкой, чтобы цвета шкалы читались в обеих темах.
   Пороги — в js/common/ratings.js */
.rating {
  display: inline-block; min-width: 52px; padding: 1px 7px; border-radius: 5px;
  text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;
}
.rating--violet    { background: #ee82ee; color: #1a0f1a; }
.rating--turquoise { background: #40e0d0; color: #062420; }
.rating--green     { background: #008000; color: #ffffff; }
.rating--yellow    { background: #ffff00; color: #1f1f00; }
.rating--orange    { background: #ffa500; color: #1f1400; }
.rating--red       { background: #ff0000; color: #ffffff; }
.rating--none      { color: var(--dim); }
.rating--sm        { min-width: 0; padding: 0 6px; font-size: 12.5px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border: 1px solid var(--acc); border-radius: var(--pill); cursor: pointer;
  background: var(--acc); color: var(--acc-ink);
  font: 600 13px var(--fb); text-transform: var(--caps); letter-spacing: var(--caps-ls);
  transition: .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn--ghost { background: var(--panel); color: var(--text); border-color: var(--line); }
.btn--ghost:hover { color: var(--hi); border-color: var(--dim); filter: none; }