/* ============================================================================
   НОТАБЕНЕ · токены оформления
   Один источник для приложения и для сайта. Версия 1.0 · 19.10.2026
   Контрасты посчитаны и подписаны, менять значения без пересчёта нельзя.
   ============================================================================ */

:root {
  /* ---------- Цвет ---------------------------------------------------- */
  --nb-accent:         #1A4FD0;  /* белое на нём 6,83:1 · он на белом 6,83:1 */
  --nb-accent-hover:   #1744B5;  /* 8,30:1 */
  --nb-accent-active:  #123A99;  /* 10,04:1 */
  --nb-accent-soft:    #DCE4F7;  /* подложки, выделения — только под текст ink */

  --nb-amber:          #B45309;  /* «подтвердите» · белое на нём 5,02:1 */
  --nb-red:            #B91C1C;  /* ошибка · белое на нём 6,47:1 */

  --nb-ink:            #0F172A;  /* основной текст · 17,85:1 на белом */
  --nb-muted:          #6B7280;  /* второстепенный текст · 4,83:1 — это минимум, светлее нельзя */
  --nb-muted-dark:     #94A3B8;  /* второстепенный на тёмном · 6,96:1 на ink */

  --nb-surface:        #FFFFFF;
  --nb-surface-soft:   #F8FAFC;  /* фон страницы, подложка блока */
  --nb-surface-dark:   #0F172A;  /* тёмная плашка, иконка на тёмном */

  /* Две линии, и это не прихоть:
     --nb-line    декоративный разделитель, 1,24:1 — для рамок полей НЕ годится
     --nb-border  функциональная граница (поле ввода, чекбокс, фокус), 3,10:1 */
  --nb-line:           #E5E7EB;
  --nb-border:         #8A93A3;

  --nb-skeleton:       #E6EAF2;  /* заполнитель места, пока грузятся данные */

  /* ---------- Шрифт ---------------------------------------------------- */
  --nb-font:      "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --nb-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* значения анализов, числа */

  --nb-w-regular: 400;
  --nb-w-medium:  500;   /* выделение в тексте, кнопки */
  --nb-w-semi:    600;   /* заголовки */

  /* Поля ввода — 16px и не меньше, иначе Safari увеличивает экран */
  --nb-size-input: 16px;
  --nb-size-xs:    11px;
  --nb-size-sm:    12px;
  --nb-size-body:  14px;
  --nb-size-lg:    16px;
  --nb-size-h3:    18px;
  --nb-size-h2:    22px;
  --nb-size-h1:    28px;

  /* ---------- Скругления ----------------------------------------------- */
  --nb-r-sm:   8px;
  --nb-r-md:   10px;
  --nb-r-lg:   14px;   /* карточка */
  --nb-r-xl:   22px;   /* иконка приложения */
  --nb-r-full: 999px;  /* кнопка ассистента, пилюли */

  /* ---------- Движение -------------------------------------------------- */
  /* Лестница на всё приложение и сайт. Своих значений не заводить. */
  --nb-t-tap:    120ms;  /* нажатие, переключатель */
  --nb-t-enter:  180ms;  /* появление элемента */
  --nb-t-sheet:  260ms;  /* шторка, всплывающее окно, подмена значка */
  --nb-t-screen: 400ms;  /* переход между экранами */
  --nb-ease:     cubic-bezier(.3, .8, .3, 1);

  /* Порог индикатора загрузки:
     < 300 мс  — не показывать ничего
     0,3–2 с   — скелет (держит высоту, не спиннер)
     > 2 с     — текст, что делается, и возможность уйти */
  --nb-skeleton-pulse: 1.2s;

  /* ---------- Тень ------------------------------------------------------ */
  --nb-shadow-btn: 0 6px 14px rgba(26, 79, 208, .30);
  --nb-shadow-pop: 0 10px 30px rgba(15, 23, 42, .12);

  /* ---------- Касание ---------------------------------------------------- */
  --nb-tap-min: 44px;   /* iOS HIG; на Android 48dp */
}

/* Скелет — единственная зацикленная анимация в покое, и только на время загрузки */
@keyframes nb-skeleton-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }

.nb-skeleton {
  background: var(--nb-skeleton);
  border-radius: 6px;
  animation: nb-skeleton-pulse var(--nb-skeleton-pulse) ease-in-out infinite;
}

/* Фокус виден всегда и берёт функциональную границу, а не декоративную */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--nb-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}