/*
 * Основа оформления Neurogram: глубина, радиусы, ритм, состояния.
 *
 * Зачем отдельный файл. Радиусы в проекте набраны вручную и вразнобой —
 * 9, 10, 11, 12, 14, 16, 20 пикселей на соседних элементах. По отдельности
 * незаметно, вместе даёт ощущение, что интерфейс собирали в спешке. То же
 * с тенями: их почти нет, глубина держится на одной серой рамке, из-за
 * чего карточки лежат в одной плоскости и взгляду не за что зацепиться.
 *
 * Здесь только то, что общее для лендинга и кабинета. Цвета остаются в
 * своих файлах: у страницы входа и у кабинета свои палитры, и сводить их
 * силой — отдельная работа с риском поломать то, что уже выглядит верно.
 *
 * Подключается сразу после type.css, до собственных стилей страницы:
 * страница должна иметь возможность перекрыть любое правило отсюда.
 */

:root {
  /* Радиусы. Шкала, а не произвольные числа: соседние элементы с 10 и 11
     пикселями выглядят как ошибка, которую не получается объяснить. */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 100px;

  /* Тени. Мягкие и низкоконтрастные: на тёмном фоне резкая тень выглядит
     грязью, а не глубиной. Каждая ступень — не просто «больше размытие»,
     а другая высота над поверхностью. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-2: 0 4px 16px -4px rgba(0, 0, 0, .45);
  --shadow-3: 0 16px 48px -16px rgba(0, 0, 0, .65);
  --shadow-4: 0 32px 80px -24px rgba(0, 0, 0, .75);

  /* Блик по верхней кромке. Так поверхность выглядит объёмной без тени
     вообще — свет как будто падает сверху. */
  --edge-top: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* Ритм. Отступы секций растут вместе с шириной экрана: фиксированные
     100px на телефоне съедают половину первого экрана. */
  --section-y: clamp(64px, 8vw, 120px);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* Фокус с клавиатуры. Его не было нигде: человек, идущий по форме с Tab,
   не видел, где находится. Это и доступность, и признак законченной вещи. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan, #00E5FF);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Нажатие должно быть видно. Кнопка, которая на клик не отвечает ничем,
   ощущается сломанной, даже когда работает. */
:where(button, .btn, .btn-primary, .btn-ghost, .nav-cta):active {
  transform: translateY(1px);
}

/* Полоса прокрутки. По умолчанию она светлая и на тёмной странице режет
   глаз ярче любого элемента интерфейса. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px }
*::-webkit-scrollbar-track { background: transparent }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .24); background-clip: content-box }

/* Человеку, попросившему систему убрать анимацию, её надо убрать —
   включая наши фоновые переливы, которые крутятся всегда. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}