/*
  chess_online — base.css
  Версия: chess_online-4.17.0

  Токены и общий сброс. Правило проекта: ни один шрифт на сайте
  не может быть меньше 14px. Базовый font-size корня — 16px,
  поэтому 1rem = 16px. Мелкий текст — не менее 0.875rem (=14px).

  2.9.2: шкала размеров сжата к минимуму 14px (раньше основной
  текст был 16px) — по запросу владельца проекта, интерфейс
  выглядел слишком "крупным". Единый шрифт Roboto везде, включая
  нотацию ходов и часы (раньше там был моноширинный IBM Plex Mono).

  4.17.0: тёмная тема заменена на светлую по запросу владельца —
  чёрный/белый/коричневый и их оттенки. --color-ivory, --color-oxblood(-light),
  --color-brass(-bright) и --color-danger/--color-success НЕ трогались —
  это цвета доски и фигур (board.css: рамка доски, подсветки клеток,
  eval-бар) либо общесайтовые семантические цвета (успех/опасность),
  их изменение задело бы и внешний вид доски. Заголовки/текст ходов,
  раньше завязанные на --color-ivory (светлый текст на тёмном фоне),
  переведены на --color-text напрямую — см. правки в местах их
  использования в base.css и layout.css.
*/

:root{
  /* ---- Цветовая палитра (светлая, "кабинетный" стиль: чёрный/белый/коричневый) ---- */
  --color-bg: #f5f0e6;
  --color-panel: #ffffff;
  --color-panel-2: #ece2cd;
  --color-line: #d3c3a4;

  /* Цвета доски и фигур (используются также в board.css) — не менять */
  --color-ivory: #ece1c4;
  --color-ivory-dim: #d8caa4;
  --color-oxblood: #5c2430;
  --color-oxblood-light: #7a3140;
  --color-brass: #c19a5b;
  --color-brass-bright: #e6c384;
  --color-danger: #b5493f;
  --color-success: #7fae6f;

  --color-text: #2b1d10;
  --color-text-muted: #7d6a4d;
  /* 4.17.0: --color-brass-bright (#e6c384) был рассчитан на тёмный фон
     (использовался как цвет ТЕКСТА — ссылки, hover, активные метки).
     На светлом фоне такой бледный текст почти не читается, поэтому
     для текстовых акцентов вне доски заведён отдельный, более тёмный
     оттенок того же брасс-тона. Сама --color-brass-bright не менялась
     (используется в board.css для подсветки доски) и продолжает
     использоваться как есть там, где она задаёт ФОН, а не текст
     (button.primary:hover). */
  --color-accent-text: #8a6424;

  /* ---- Типографика ---- */
  /* 2.9.2: единый шрифт Roboto везде — раньше здесь были три
     разных семейства (Playfair Display / Inter / IBM Plex Mono) */
  --font-display: 'Roboto', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --font-mono: 'Roboto', sans-serif;
  --font-pieces: 'Noto Sans Symbols2', 'Segoe UI Symbol', 'DejaVu Sans', serif;

  /* Минимальный шрифт в проекте — 14px (0.875rem). Меньше не использовать нигде.
     2.9.2: вся шкала прижата к этому минимуму — основной текст
     теперь тоже 14px (раньше был 16px), заголовки уменьшены
     пропорционально, но иерархия (крупнее/жирнее к верху) сохранена. */
  --font-size-min: 0.875rem;     /* 14px — нижняя граница, служебные подписи */
  --font-size-body: 0.875rem;    /* 14px — основной текст (было 16px) */
  --font-size-lg: 0.9375rem;     /* 15px — акцентный текст (было 18px) */
  --font-size-xl: 1.0625rem;     /* 17px — подзаголовки (было 24px) */
  --font-size-display: 1.25rem;  /* 20px — заголовки (было 30px) */

  /* ---- Отступы (единая шкала) ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --radius: 4px;
}

*, *::before, *::after{
  box-sizing: border-box;
}

html{
  font-size: 16px; /* база для rem-расчётов */
}

body{
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at top, #ffffff 0%, var(--color-bg) 60%);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2, h3{
  font-family: var(--font-display);
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

h1{ font-size: var(--font-size-display); }
h2{ font-size: var(--font-size-xl); }
h3{ font-size: var(--font-size-lg); }

a{
  color: var(--color-accent-text);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

/* Базовые формы — используются на login/register/settings */
label{
  display: block;
  font-size: var(--font-size-min);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

input, select, button, textarea{
  font-family: var(--font-body);
  font-size: var(--font-size-body); /* не опускать ниже var(--font-size-min) нигде в проекте */
}

input, select, textarea{
  width: 100%;
  background: var(--color-panel-2);
  color: var(--color-text);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--color-brass);
}

button{
  font-weight: 500;
  background: var(--color-panel-2);
  color: var(--color-text);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 10px 16px;
  cursor: pointer;
}
button:hover{
  border-color: var(--color-brass);
  color: var(--color-accent-text);
}
button:active{ transform: scale(0.98); }
button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--color-line);
  color: var(--color-text-muted);
}
button:disabled:hover{
  border-color: var(--color-line);
  color: var(--color-text-muted);
}
button:disabled:active{ transform: none; }

button.primary{
  background: var(--color-brass);
  color: #1c1108;
  border-color: var(--color-brass);
}
button.primary:hover{
  background: var(--color-brass-bright);
  color: #1c1108;
}

.text-muted{ color: var(--color-text-muted); }
.text-danger{ color: var(--color-danger); }
.text-success{ color: var(--color-success); }

.checkbox-row{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.checkbox-row input[type="checkbox"]{
  width: auto;
}
.checkbox-row label{
  margin-bottom: 0;
  font-size: var(--font-size-body);
  color: var(--color-text);
}

.password-field{
  position: relative;
}
.password-field input{
  padding-right: 42px; /* место под иконку */
}
.password-toggle{
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text-muted);
}
.password-toggle:hover{
  color: var(--color-accent-text);
  border: none;
}
.password-toggle.is-visible{
  color: var(--color-accent-text);
}

.field-error{
  font-size: var(--font-size-min); /* 14px — минимум по правилам проекта */
  margin-top: 4px;
}
.form-error{
  font-size: var(--font-size-min);
  background: rgba(181,73,63,0.12);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  padding: var(--space-sm);
}

.db-status{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--font-size-min);
  color: var(--color-text-muted);
}
.db-status .dot{
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-text-muted); /* нейтральный — идёт проверка */
}
.db-status.is-connected .dot{ background: var(--color-success); }
.db-status.is-disconnected .dot{ background: var(--color-danger); }

::-webkit-scrollbar{ width: 8px; }
::-webkit-scrollbar-thumb{ background: var(--color-line); border-radius: 4px; }