/* ══════════════════════════════════════
   TOKENS — змінні, скидання, доступність
   ══════════════════════════════════════
   Підключається УСІМА сторінками (index, login, lobby). Раніше змінні були
   продубльовані у трьох місцях і встигли розійтись: --c-surface був #2a2929
   на лендингу і #1a1a1a у лобі. */

/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Variables ── */
:root {
  --c-bg:      #0f0f0f;
  --c-surface: #2a2929;
  /* Друга поверхня — те, що лежить НА --c-surface: картки лобі, ховер
     можливостей, фокус поля форми. Раніше це був хардкод #1a1a1a у трьох
     місцях і водночас --c-surface у лобі, через що токен розійшовся. */
  --c-surface-2: #1a1a1a;
  --c-border:  #2c2f38;
  --c-text:    #e0e0e0;
  --c-muted:   #a0a0a0;
  --c-accent:  #ffcd00;
  --c-accent2: #ffd000;
  --c-dark:    #444342;
  --c-white:   #f0f0f0;
  --c-error:   #ff4444;
  --c-success: #44dd44;

  /* ── Адаптивна шкала ──────────────────────────────────────────────
     Кожна секція має вміщатися в екран цілком, тож відступи й кегль
     прив'язані до ВИСОТИ вьюпорта, а не тільки до ширини.
     Нижня межа тіла тексту — 14px: домовлена границя читабельності,
     нижче не опускаємось навіть якщо секція через це не влізе. */
  --fit-pad-y: clamp(18px, 5.5vh, 100px);
  --fit-pad-x: clamp(16px, 3vw, 48px);
  --fit-gap: clamp(10px, 2.4vh, 28px);
  --fit-text: clamp(14px, 1.75vh, 15px);
  --fit-text-sm: clamp(12px, 1.5vh, 13px);
  --fit-title: clamp(1.5rem, 5.2vh, 4rem);
  --fit-lead: clamp(14px, 1.9vh, 16px);

  --nav-h: 51px;
  --frame-pad: 12px;
  --frame-radius: 18px;
  --skew: -8deg;
  --font-display: 'Dela Gothic One', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --footer-h: 47px;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════
   ДОСТУПНІСТЬ — фокус, skip-link, службові класи
   ══════════════════════════════════════ */

/* Єдина система фокуса. Раніше на весь сайт було одне правило
   (.form-group:focus-within) — клавіатурний користувач не бачив, де він.
   :focus-visible, а не :focus — щоб рамка не спалахувала на клік мишею. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Скошені кнопки: outline малюється по перекошеній коробці й «їде».
   Замість нього — контрастне кільце тінню, воно повторює форму елемента. */
.nav__btn:focus-visible,
.cap-card:focus-visible,
.form-group:focus-within {
  outline: none;
}

.nav__btn:focus-visible {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent);
}

.form-group:focus-within {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--c-accent);
}

/* Головний контейнер отримує фокус лише програмно (skip-link) — рамка тут зайва */
main:focus {
  outline: none;
}

/* Видно лише скрінрідерам */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip-link: схований, поки не отримає фокус з клавіатури */
.skip-link {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 2000;
  padding: 12px 24px;
  background: var(--c-accent);
  color: var(--c-bg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  transition: transform var(--transition);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline-offset: -4px;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}