/* Основа: цвета, шрифты, общие правила. Порядок подключения — в index.html.
   Ночь (тёмно-синий) — каркас и спокойствие; заря (оранжевый) — действия и Зорька;
   жёлтая бирка — номер коровы, как на ухе. Бирка — главная примета интерфейса.
   Правило: у каждого файла свои @media В КОНЦЕ ЭТОГО ЖЕ файла — иначе правило из файла,
   подключённого позже, перебьёт мобильную версию. */
:root {
  --night: #1E2A55; --night-2: #2A3870; --night-3: #3A4A85;
  --dawn: #F26B3A; --dawn-ink: #B2451C; --dawn-soft: #FFEDE4;
  --tag: #F5C53A; --tag-ink: #2B2100;
  --ground: #F1F2F6; --paper: #FFFFFF;
  --ink: #18204A; --ink-2: #3A4066; --muted: #5D6383;
  --line: #E2E5EE; --line-2: #EDEFF5;
  --bad: #C93A35; --bad-soft: #FBE5E3; --bad-ink: #8E2420;
  --good: #2E8A5C; --good-soft: #E3F3EA; --good-ink: #1C5A3B;
  --warn-soft: #FFF3D6; --warn-ink: #6A4800;
  --display: 'Unbounded', sans-serif; --text: 'Golos Text', sans-serif; --mono: 'JetBrains Mono', monospace;
  --top-h: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ground); color: var(--ink); font: 400 16px/1.45 var(--text); -webkit-text-size-adjust: 100%; }
a { color: var(--night); }
a:hover { color: var(--dawn-ink); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--dawn); outline-offset: 2px; border-radius: 6px; }
h1, h2 { font-family: var(--display); letter-spacing: -0.01em; margin: 0; line-height: 1.15; }
h1 { font-size: 30px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
.muted { color: var(--muted); }
.note { font-size: 14px; color: var(--muted); margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

@media (max-width: 700px) {
  :root { --top-h: 58px; }
  h1 { font-size: 24px; }
}