/* Одна статическая страница: Tailwind и сборщик не нужны (design.md §1).
   Шрифт лежит рядом, в fonts/, поэтому путь относительный — без ведущего «/»,
   так он резолвится и в репозитории, и в образе nginx. */
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* padding и рамки не расширяют элементы за пределы контейнера — без этого
   padding-inline на .page дал бы горизонтальный скролл на узком экране. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Сбрасываем отступ браузера по умолчанию: иначе на тёмных темах вокруг .page
   видна светлая кайма, а min-height:100vh с отступами даёт лишний скролл.
   overflow-x — страховка от случайного выхода контента за экран. */
body {
  margin: 0;
  overflow-x: hidden;
}

/* Радио скрыты clip-паттерном (не display:none), чтобы остались фокусируемы
   с клавиатуры; клик по label по-прежнему переключает тему. */
input[name="theme"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Базовый блок = тема day: фолбэк, если ни одно радио не выбрано. */
.page {
  --bg: #ffffff;
  --text: #1a1a1a;
  --accent: #2563eb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-inline: 1rem;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
}

/* По одному правилу на тему — меняются только значения переменных. */
#t-day:checked ~ .page {
  --bg: #ffffff;
  --text: #1a1a1a;
  --accent: #2563eb;
}

#t-night:checked ~ .page {
  --bg: #0b1220;
  --text: #f5f7fa;
  --accent: #7aa2f7;
}

#t-ocean:checked ~ .page {
  --bg: #0b2545;
  --text: #e8f1fb;
  --accent: #4cc9f0;
}

#t-forest:checked ~ .page {
  --bg: #0f2e1d;
  --text: #e7f6ec;
  --accent: #5dd39e;
}

#t-sunset:checked ~ .page {
  --bg: #331605;
  --text: #ffeee0;
  --accent: #ffb347;
}

#t-berry:checked ~ .page {
  --bg: #2a0a2e;
  --text: #f7e9ff;
  --accent: #e07be0;
}

/* Переключатель в потоке, переносится на узких экранах. */
.switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
}

.switcher label {
  padding: 0.35rem 0.9rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 0.95rem;
  cursor: pointer;
}

/* Выбранная метка помечается рамкой по акценту темы. */
#t-day:checked ~ .page label[for="t-day"],
#t-night:checked ~ .page label[for="t-night"],
#t-ocean:checked ~ .page label[for="t-ocean"],
#t-forest:checked ~ .page label[for="t-forest"],
#t-sunset:checked ~ .page label[for="t-sunset"],
#t-berry:checked ~ .page label[for="t-berry"] {
  border-color: var(--accent);
}

/* Радио визуально скрыты, поэтому фокус с клавиатуры показываем на их метке —
   тем же приёмом «соседний input → .page», что и :checked. */
#t-day:focus ~ .page label[for="t-day"],
#t-night:focus ~ .page label[for="t-night"],
#t-ocean:focus ~ .page label[for="t-ocean"],
#t-forest:focus ~ .page label[for="t-forest"],
#t-sunset:focus ~ .page label[for="t-sunset"],
#t-berry:focus ~ .page label[for="t-berry"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1 {
  margin: auto;
  max-width: 100%;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 8vw, 5rem);
  letter-spacing: -0.02em;
}

/* На мобильном заголовок и метки переключателя ужимаются, чтобы влезть
   в узкий экран; базовые clamp/flex-wrap при этом сохраняются. */
@media (max-width: 600px) {
  h1 {
    font-size: clamp(1.75rem, 11vw, 3rem);
    letter-spacing: -0.01em;
  }

  .switcher {
    gap: 0.375rem;
    padding: 0.75rem 0;
  }

  .switcher label {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
  }
}