/* Марс — Brand System (единая светлая тема, «костяная бумага»)
   Фаза 1 переработки фронтенда. Тёмная тема снята — светлая тема теперь
   основа, не альтернатива. brand-light.css упразднён, весь сайт использует
   этот файл.

   Принципы:
   • Фон — тёплая костяная бумага, не белый.
   • --accent (оксидный красный) — ТОЛЬКО идентичность бренда: главная
     кнопка, куб, точечный акцент. НЕ используется как семантика «плохо».
   • Отрицательные метрики/ошибки хода НЕ красятся в --accent — нейтральная
     тёмная шкала (--ink/--muted), без цветового кодирования знака.
   • IBM Plex Sans + IBM Plex Mono (Mono — для всех количественных
     значений: счёт, PIP, equity, PR, рейтинги, тайминги — класс .num/.mono).
*/

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* — Базовые токены (заданы явно) — */
  --paper:        #f5f3ee;
  --surface:      #efe9dc;
  --point-a:      #b3a68d;  /* было #c7bda8 — слишком слабый контраст с point-b,
                                мешало считывать чередование чёт/нечёт на доске */
  --point-b:      #e0d9cb;
  --bar:          #ddd3c0;
  --checker-dark: #37312a;
  --checker-lite: #f4eee2;
  --ink:          #0f0f12;
  --muted:        #6b6862;
  --accent:       #a94b2c;
  --line:         #e5e0d5;
  --border:       #d8d3c6;
  /* Тёплый контур #c3b9a3 (MARS_GAME_UI_SPEC §1, §3.6) — темнее --border:
     рамка интерактивного (вторичная кнопка, поле ввода), приглушённый текст
     на тёмном фоне и плейсхолдеры. --border остаётся границей карточки. */
  --outline:      #c3b9a3;
  /* Тёмная бренд-панель #37312a (MARS_ACCOUNT_UI_SPEC §1 — сплит регистрации).
     Тот же тёплый уголь, что --checker-dark, но НЕ он: скин доски перекрашивает
     фишки, а бренд-панель от скина зависеть не должна. */
  --panel-dark:   #37312a;

  /* ───────────────────────────────────────────────────────────────────
     ТОКЕНЫ ДОСКИ (namespace --board-*). ОТДЕЛЕНЫ от токенов хрома страницы
     намеренно: скин доски (data-skin на <html>) переопределяет ТОЛЬКО эти
     переменные, поэтому карточки/текст/шапка (--surface/--ink/…) от скина
     не зависят и не ломаются на тёмной доске «Ночь».
     Дефолт ниже = скин «Оксид» (базовый). COL в index.html читает их через
     _tok(); applySkin() ставит data-skin и пересчитывает COL.
     Палитры скинов — [data-skin="…"] ниже, значения строго из
     MARS_BOARD_SKINS_SPEC.md §2. ─────────────────────────────────────── */
  --board-field:        #efe9dc;   /* поле доски */
  --board-bar:          #ddd3c0;   /* центральный бар */
  --board-point-a:      #b3a68d;   /* тёмный пункт (усилен от спек-#c7bda8 для контраста) */
  --board-point-b:      #e0d9cb;   /* светлый пункт */
  --board-checker-dark: #37312a;   /* тёмная фишка */
  --board-checker-lite: #f4eee2;   /* светлая фишка */
  --board-rim-dark:     #0f0f12;   /* обводка тёмной фишки */
  --board-rim-lite:     #d8d3c6;   /* обводка светлой фишки */
  --board-label:        #6b6862;   /* номера пунктов (мьютед) */

  /* — Производные состояния акцента (hover/pressed/soft-фон) — */
  --accent-strong: color-mix(in oklab, var(--accent) 88%, black);
  --accent-deep:   color-mix(in oklab, var(--accent) 78%, black);
  --accent-soft:   color-mix(in oklab, var(--accent) 14%, transparent);

  /* — Type — */
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* ───────────────────────────────────────────────────────────────────
     Слой совместимости — старые имена переменных, на которые до сих пор
     ссылаются НЕ переверстанные в Фазе 1 страницы (cabinet/lobby/landing/
     club/fairness/offer/index — сама доска отдельно, см. ниже). Эти имена
     раньше указывали в НИКУДА (не были определены ни в brand.css, ни в
     brand-light.css) — сайт уже был визуально сломан по этим местам.
     Здесь не редизайн, а маппинг на новую палитру, чтобы вместо
     необъявленной переменной страницы получали связный цвет.
     ─────────────────────────────────────────────────────────────────── */
  --brass:        var(--accent);
  --brass-2:      var(--accent-strong);
  --brass-3:      var(--accent-deep);
  --terracotta:   var(--accent);
  --line-brass:   var(--accent-soft);
  --mars:         var(--accent);
  --mars-strong:  var(--accent-strong);
  --mars-deep:    var(--accent-deep);
  --mars-soft:    var(--accent-soft);
  --font-body:    var(--font-sans);
  --font-display: var(--font-sans);
  --ink-2:        var(--surface);
  --ink-3:        var(--border);
  --paper-2:      var(--surface);
  --line-strong:  var(--border);
  --loss:         var(--muted);   /* нейтральная шкала, не красная (D-009) */
  --win:          var(--ink);     /* нейтральная шкала, без зелёного */
  --active-glow:  var(--accent-soft);
  --bg-page:      var(--paper);
  --bg-panel:     var(--surface);
  --bg-panel-hover: var(--border);
  --border-soft:  var(--line);
  --border-strong: var(--border);
  --txt:          var(--ink);
  --txt-dim:      var(--muted);
}

/* ─── СКИНЫ ДОСКИ (MARS_BOARD_SKINS_SPEC.md §2) ───
   Селектор [data-skin="…"] намеренно НЕ :root-scoped — те же палитры служат
   и живой доске (<html data-skin>), и свотчам-превью в кабинете (<div data-skin>).
   Переопределяются ТОЛЬКО --board-* (не трогаем хром страницы).
   Светлая фишка обведена цветом тёмной (rim-lite = checker-dark), кроме «Ночи»
   (там светлая — без обводки). ─── */
[data-skin="oxide"] {
  --board-field: #efe9dc; --board-bar: #ddd3c0;
  --board-point-a: #b3a68d; --board-point-b: #e0d9cb;
  --board-checker-dark: #37312a; --board-checker-lite: #f4eee2;
  --board-rim-dark: #37312a; --board-rim-lite: #37312a; --board-label: #6b6862;
}
[data-skin="hvoya"] {
  --board-field: #e3e7e0; --board-bar: #3f5a4a;
  --board-point-a: #7d9484; --board-point-b: #c3cfc4;
  --board-checker-dark: #26312a; --board-checker-lite: #f2f4ef;
  --board-rim-dark: #26312a; --board-rim-lite: #26312a; --board-label: #6b6862;
}
[data-skin="grafit"] {
  --board-field: #eceae6; --board-bar: #cfccc5;
  --board-point-a: #b8b5ad; --board-point-b: #d9d6d0;
  --board-checker-dark: #33322f; --board-checker-lite: #f6f5f2;
  --board-rim-dark: #33322f; --board-rim-lite: #33322f; --board-label: #6b6862;
}
[data-skin="indigo"] {
  --board-field: #e4e6ea; --board-bar: #3c4657;
  --board-point-a: #8790a1; --board-point-b: #c6cad3;
  --board-checker-dark: #252b35; --board-checker-lite: #f1f3f6;
  --board-rim-dark: #252b35; --board-rim-lite: #252b35; --board-label: #6b6862;
}
[data-skin="noch"] {          /* тёмная доска */
  --board-field: #26241f; --board-bar: #454037;
  --board-point-a: #3c3830; --board-point-b: #514b40;
  --board-checker-dark: #171613; --board-checker-lite: #e8e2d5;
  --board-rim-dark: #5d564a;   /* видимый кант почти-чёрной фишки на тёмном поле */
  --board-rim-lite: #e8e2d5;   /* светлая фишка без обводки (спек) */
  --board-label: #9a938a;      /* номера светлее для читаемости на тёмном */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-feature-settings: "tnum" 1, "lnum" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* — Typography helpers — */
.h-display {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}
.h-display .accent { color: var(--ink); }
.h-display .punct  { color: var(--accent); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.tech {
  font-family: var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-size: 0.7rem;
}

/* Цифровые/количественные значения (счёт, PIP, equity, рейтинг, время) —
   ВСЕГДА моноширинный шрифт, независимо от контекста. */
.num, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* — Brand badge / logo — */
.brand-row {
  display: flex; align-items: center; gap: 10px;
}
.brand-row .logo-img {
  width: 28px; height: 28px;
  flex: 0 0 auto;
}
.brand-row .word {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.brand-row .word i {
  color: var(--accent);
  font-style: normal;
}

/* — Buttons — */
button.btn-primary, .btn-primary {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--checker-lite);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .15s, border-color .15s, transform .1s;
}
button.btn-primary:hover:not(:disabled), .btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
button.btn-primary:active:not(:disabled), .btn-primary:active {
  background: var(--accent-deep);
  transform: translateY(0.5px);
}
button.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; }

button.btn-ghost, .btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.88rem;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color .15s, color .15s;
}
button.btn-ghost:hover:not(:disabled), .btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}
button.btn-ghost:disabled { opacity: 0.35; cursor: not-allowed; }

/* Деструктивная — нейтральная, не --accent (D-009: акцент только знак/
   первичная кнопка/куб — вторичные и деструктивные кнопки тоже нейтраль) */
button.btn-danger {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 9px 16px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
button.btn-danger:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }

/* — Inputs — */
input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
  width: 100%;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: border-color .15s, box-shadow .15s;
}
input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
label.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* — Cards / surfaces — */
.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.surface-warm {
  background: var(--surface);
  border: 1px solid var(--accent-soft);
  border-radius: 10px;
}

/* — Hairlines / dividers — */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  width: 100%;
}