/* ===================================================================
   НСВС · design tokens, единственный источник правды.
   Подключается первым, до nsvs-ui.css и до любых страничных стилей.
   Ничего, кроме кастомных свойств и @font-face, здесь быть не должно.
   =================================================================== */
:root{
  /* ── Бренд · бирюза ─────────────────────────────────────────────
     Values re-anchored 2026-08-29 to the company's live brand, per the
     owner's palette review: logo mark #00CDCD, legacy site --main-color
     #66CCCC, nsvs.info #43B8BC / #67C2C6 / #22787F. The old set drifted
     dark and swamp-green; the owner asked for the recognizable light
     tiffany in the dominant masses. */
  --teal:#66CCCC;            /* акцентный светлый, только на тёмном/белом */
  --teal-dark:#43B8BC;       /* акцентный средний, hover градиентов */
  --teal-deep:#22787F;       /* основной акцент, текст-акцент, ссылки */
  --teal-abyss:#1B6E74;      /* глубокий фон градиентов */
  --teal-night:#155D63;      /* самый тёмный фон градиентов */
  --teal-soft:#E3F7F7;       /* подложка акцентных чипов */
  --teal-mist:#F0FAFA;       /* подложка секций */
  --teal-mark:#00CDCD;       /* цвет знака в логотипе, только для знака */
  --accent-ink:#0C3A40;      /* текст на светлой акцентной подложке */

  /* ── Нейтральные ──────────────────────────────────────────────── */
  --ink:#15282A;             /* основной текст */
  --ink-surface:#114E55;     /* фон тёмных поверхностей; .on-dark его НЕ переопределяет */
  --ink-2:#3F5557;           /* вторичный текст, абзацы */
  --ink-3:#7B8E90;           /* подписи, мета, плейсхолдеры */
  --ink-disabled:#C4CFCF;    /* выключенные элементы */
  --line:#E2EAEA;            /* границы контролов и карточек */
  --line-soft:#ECEFEE;       /* внутренние разделители */
  --cream:#F6F4EE;           /* фон страницы */
  --cream-dark:#EFECE6;      /* фон уровня «под страницей» */
  --white:#FFFFFF;

  /* ── Семантика ────────────────────────────────────────────────── */
  --ok:#6EE7B7;              /* «открыто», успех, чек */
  --warn:#E97C3F;            /* срочно, внимание */
  --danger:#C0492A;          /* ошибка, «так не делаем» */
  --gold:#F2B844;            /* рейтинг, «популярно» */
  --bio:#E0457B;             /* индикация биоплёнки, только GBT-контекст */
  --bio-deep:#B81E5B;
  --bio-soft:#FCE7F0;

  /* ── Псевдонимы акцента (переключаются темой) ─────────────────── */
  --accent:var(--teal-deep);
  --accent-2:var(--teal);
  --accent-soft:var(--teal-soft);


  /* ── Ported from the home prototype (nsvs-home.html · NSVS, page.html) ──
     The brandbook file above covers the brand. These are the few values the
     home and direction frames use that it does not name. Added here rather
     than left as literals in block CSS, per the design-system rule. */
  --good:#4CB47C;            /* «онлайн», открытые часы, подтверждение */
  --warm:#F08A4B;            /* тёплый акцент прототипа: крестик боли */
  --warm-deep:#C85A22;       /* тот же акцент на светлой подложке */
  --warm-soft:#FFF1E6;       /* подложка тёплого акцента */
  --no:#C24E2C;              /* противопоказания, «так нельзя» */
  --no-soft:#FBE6DD;         /* подложка противопоказаний */
  --urgent:#D24A2B;          /* плашка «срочная помощь 24/7» */
  --track:#D7E7E5;           /* дорожка прогресса квиза */
  --promo-warm-deep:#B83C20; /* градиент «горячей» акции */
  --promo-ink:#2A4546;       /* градиент тёмной акции */

  /* ── Радиусы · гибридное правило ──────────────────────────────── */
  /* Пилюля, ТОЛЬКО фильтры, чипы, теги, бейджи, аватары, точки, ползунки. */
  --r-pill:999px;
  --r-xs:8px;                /* квадратный бейдж, мелкая плашка */
  --r-sm:12px;               /* поля ввода, иконка 36-38 */
  --r-md:14px;               /* кнопки до 48px, иконка-кнопка 44-48 */
  --r-lg:18px;               /* компактная карточка, строка списка, floating-чип */
  --r-xl:22px;               /* карточка услуги с фото, плитка */
  --r-2xl:26px;              /* карточка секции, медиа-блок */
  --r-3xl:40px;              /* hero-медиа, крупная форма, стейдж */

  /* ── Шаг сетки: 4px. Всё вертикальное и горизонтальное, кратно 4 ─ */
  --s-1:4px;   --s-2:8px;   --s-3:12px;  --s-4:16px;  --s-5:20px;
  --s-6:24px;  --s-7:28px;  --s-8:32px;  --s-10:40px; --s-12:48px;
  --s-14:56px; --s-16:64px; --s-20:80px; --s-24:96px; --s-28:112px;

  /* ── Контейнеры ───────────────────────────────────────────────── */
  --wrap:1600px;             /* максимальная ширина контента */
  --wrap-pad:40px;           /* боковой отступ, десктоп */
  --wrap-pad-m:20px;         /* боковой отступ, мобайл (<700px) */
  --sec-pad:clamp(64px,9cqw,140px);   /* вертикальный ритм секции */
  --sec-pad-sm:clamp(48px,6cqw,88px); /* уплотнённая секция */

  /* ── Типографика ──────────────────────────────────────────────── */
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --h-scale:1;                                        /* множитель дисплейных кеглей */
  --fs-display:clamp(46px,calc(5cqw * var(--h-scale)),88px);
  --fs-h1:clamp(34px,calc(5.4cqw * var(--h-scale)),88px);
  --fs-h2:clamp(30px,4cqw,54px);
  --fs-h3:26px;
  --fs-h4:19px;
  --fs-lead:clamp(16px,1.5cqw,20px);
  --fs-body:15.5px;
  --fs-body-sm:14px;
  --fs-meta:13px;
  --fs-caption:13px;
  --fs-micro:13px;
  --lh-tight:1.02;   /* дисплейные заголовки */
  --lh-head:1.25;    /* заголовки карточек */
  --lh-body:1.6;     /* абзацы */
  --ls-display:-1.4px;
  --ls-head:-.5px;
  --ls-eyebrow:1.6px;

  /* ── Тени ─────────────────────────────────────────────────────── */
  --sh-1:0 1px 2px rgba(15,40,42,.04);                 /* контрол в покое */
  --sh-2:0 8px 20px -12px rgba(15,40,42,.28);          /* лёгкий подъём */
  --sh-3:0 18px 40px -18px rgba(15,40,42,.25);         /* карточка в hover */
  --sh-4:0 36px 64px -40px rgba(15,40,42,.40);         /* крупная карточка */
  --sh-5:0 50px 90px -50px rgba(15,40,42,.70);         /* стейдж, hero-медиа */
  --sh-accent:0 18px 40px -18px rgba(34,120,127,.70);  /* акцентная кнопка */
  --sh-accent-hi:0 24px 50px -18px rgba(34,120,127,.80);
  --sh-modal:0 24px 70px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.10);
  --sh-sheet:0 -20px 54px -18px rgba(0,0,0,.42);
  --ring:0 0 0 4px var(--accent-soft);                 /* ореол фокуса полей ввода */

  /* ── Движение ─────────────────────────────────────────────────── */
  --ease:cubic-bezier(.22,.61,.36,1);      /* стандарт: почти всё */
  --ease-pop:cubic-bezier(.2,.7,.3,1);     /* появление слоёв, конфетти */
  --ease-out:cubic-bezier(.16,1,.3,1);     /* шторки снизу */
  --t-fast:120ms;      /* цвет, граница, opacity мелких элементов */
  --t-base:180ms;      /* hover-подъём кнопок и ссылок */
  --t-slow:250ms;      /* карточки, панели, аккордеон-иконка */
  --t-panel:350ms;     /* раскрытие FAQ, высота */
  --t-modal:240ms;     /* модалка */
  --t-sheet:280ms;     /* мобильная шторка */
  --t-slide:550ms;     /* смена слайда карусели */
  --t-reveal:700ms;    /* появление секции при скролле */
  --stagger:80ms;      /* шаг задержки в каскаде reveal */

  /* ── Слои ─────────────────────────────────────────────────────── */
  --z-base:1; --z-sticky:100; --z-header:200; --z-dropdown:300;
  --z-overlay:800; --z-modal:900; --z-toast:1000;

  /* ── Хиты и размеры контролов ─────────────────────────────────── */
  --h-btn-xl:62px; --h-btn-lg:56px; --h-btn-md:48px; --h-btn-sm:38px;
  --h-field:50px;  --h-field-sm:44px;
  --hit-min:44px;  /* минимальная зона касания на мобайле */
}

/* Уплотнённая шкала для мобильных фреймов */
@media (max-width:700px){
  :root{ --wrap-pad:var(--wrap-pad-m); --fs-h3:22px; --fs-h4:17px; }
}

/* Тема секции: тёмная. Ставится на секцию, не на body. */
.on-dark{
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.82); --ink-3:rgba(255,255,255,.62);
  --line:rgba(255,255,255,.16); --line-soft:rgba(255,255,255,.10);
  --white:transparent; --accent:var(--teal); --accent-2:var(--teal);
  --accent-soft:rgba(255,255,255,.12); --ring:0 0 0 4px rgba(102,204,204,.35);
}

/* Тема секции: светлая. Ставится на светлую карточку внутри .on-dark,
   иначе она наследует белый текст тёмной темы и текст пропадает. */
.on-light{
  --ink:#15282A; --ink-2:#3F5557; --ink-3:#7B8E90;
  --line:#E2EAEA; --line-soft:#ECEFEE;
  --white:#FFFFFF; --accent:var(--teal-deep); --accent-2:var(--teal);
  --accent-soft:var(--teal-soft); --ring:0 0 0 4px var(--accent-soft);
}