/* Общие стили сайта: цвета, шрифт, кнопки, поля ввода. Подключается на всех страницах
   (клиентская страница, админка, правила). Фирменный стиль меняется здесь, в одном месте. */
:root {
  --bg: #201E1E;            /* фон */
  --card: #373435;          /* карточки и поля */
  --text: #FFFFFF;          /* тексты */
  --muted: #BDB9B9;         /* второстепенный текст */
  --line: rgba(255, 255, 255, .2);
  --accent: #EE3537;        /* основной цвет: кнопки, стрелка, галочки */
  --ok: #66BB6A;
  --warn: #FFB74D;
  --err: #FF8A80;           /* светлее фирменного красного, чтобы ошибку не путали с акцентом */
  --disabled-bg: #2B2929;
  --disabled-text: #7E7A7A;
  --disabled-line: #4A4646;
  --font: 'Roboto Flex', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-weight: 400; line-height: 1.45; }
h1, h2, h3 { font-weight: 800; line-height: 1.15; }

a { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* ---------- Кнопки ---------- */
/* Обычная кнопка = второстепенная: прозрачная, белая обводка 2 px.
   Основная (button.primary и кнопки отправки форм): акцентная заливка и белая полоса снизу 4 px. */
button {
  font: 800 15px/1.1 var(--font); letter-spacing: .04em; text-transform: uppercase;
  min-height: 44px; padding: 10px 18px; border-radius: 0; cursor: pointer;
  background: transparent; color: var(--text); border: 2px solid var(--text);
  transition: background-color .12s, color .12s;
}
button.primary, button[type=submit] {
  background: var(--accent); color: var(--text); border: 0; border-bottom: 4px solid var(--text);
}
button:hover:not(:disabled), button:active:not(:disabled) { background: var(--text); color: var(--accent); }
button:disabled { cursor: not-allowed; background: transparent; color: var(--disabled-text); border-color: var(--disabled-line); }
button.primary:disabled, button[type=submit]:disabled { background: var(--disabled-bg); color: var(--disabled-text); border: 0; border-bottom: 4px solid var(--disabled-line); }

/* ---------- Поля ввода ---------- */
input, select, textarea {
  font: 400 16px/1.3 var(--font); color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 0; padding: 10px 12px;
}
input::placeholder, textarea::placeholder { color: var(--disabled-text); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input:disabled, select:disabled, textarea:disabled { color: var(--disabled-text); background: var(--disabled-bg); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }