/* ============================================================
   Токены дизайн-системы. ЕДИНСТВЕННОЕ место, где живут цвета,
   размеры шрифтов, отступы и радиусы. Страницы используют только
   переменные - никаких своих hex-значений и px-размеров шрифта.

   Палитра: чёрное против белого (за/против) + один цвет огня.
   ============================================================ */

/* ---------- Светлая тема (по умолчанию) ---------- */
:root {
  /* поверхности */
  --bg:            #ffffff;
  --card:          #ffffff;
  --line:          #e6e6e6;

  /* текст */
  --text:          #111111;
  --muted:         #6b6b6b;   /* AA 4.5:1+ на белом */

  /* действия (чёрный = основной цвет интерфейса) */
  --accent:        #111111;
  --accent-ink:    #111111;
  --accent-soft:   #f2f2f2;

  /* стороны спора: залито = согласен, пусто = не согласен */
  --agree:         #111111;
  --disagree:      #ffffff;
  --disagree-soft: #f2f2f2;

  /* огонь: единственный цвет. Только жар, 🔥 и опасность */
  --fire:          #e8481c;
  --danger:        #c7361f;

  --shadow:        none;

  /* типографика: вся шкала сайта, других размеров нет */
  --font-ui:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  --fs-thesis: clamp(24px, 2vw + 18px, 28px); /* тезис на своей странице */
  --fs-title:  clamp(18px, 1vw + 15px, 19px); /* заголовок карточки */
  --fs-body:   16px;                          /* текст, комменты */
  --fs-meta:   13px;                          /* подписи, счётчики */
  --fs-label:  11px;                          /* ярлыки капсом */

  --lh-body:  1.55;
  --lh-tight: 1.3;

  /* отступы (шаг 4) */
  --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  /* радиусы */
  --r-card: 12px;
  --r-ctl:  9px;
  --r-pill: 999px;

  /* минимальная зона касания */
  --tap: 44px;
  --ava-cm: 36px; /* аватарка в ветке комментов: держит колонку и линию */
}

/* ---------- Тёмная тема: системная настройка ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0f0f0f;
    --card:          #0f0f0f;
    --line:          #2b2b2b;
    --text:          #f2f2f2;
    --muted:         #9a9a9a;
    --accent:        #f2f2f2;
    --accent-ink:    #f2f2f2;
    --accent-soft:   #222222;
    --agree:         #f2f2f2;
    --disagree:      #0f0f0f;
    --disagree-soft: #222222;
    --fire:          #ff6a3c;
    --danger:        #ff6a4d;
    --shadow:        none;
  }
}

/* ---------- Ручной выбор темы (перебивает системную) ---------- */
:root[data-theme="dark"] {
  --bg:            #0f0f0f;
  --card:          #0f0f0f;
  --line:          #2b2b2b;
  --text:          #f2f2f2;
  --muted:         #9a9a9a;
  --accent:        #f2f2f2;
  --accent-ink:    #f2f2f2;
  --accent-soft:   #222222;
  --agree:         #f2f2f2;
  --disagree:      #0f0f0f;
  --disagree-soft: #222222;
  --fire:          #ff6a3c;
  --danger:        #ff6a4d;
  --shadow:        none;
}
:root[data-theme="light"] {
  --bg:            #ffffff;
  --card:          #ffffff;
  --line:          #e6e6e6;
  --text:          #111111;
  --muted:         #6b6b6b;
  --accent:        #111111;
  --accent-ink:    #111111;
  --accent-soft:   #f2f2f2;
  --agree:         #111111;
  --disagree:      #ffffff;
  --disagree-soft: #f2f2f2;
  --fire:          #e8481c;
  --danger:        #c7361f;
  --shadow:        none;
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--fire);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}