/* nvm-tokens.css — токены D0. Только переменные. */

/* ---- design/demo/css/nvm-ed-tokens-v1.css ---- */
/* nvm-ed-tokens-v1.css — токены единого стиля «НОВА МИ» (макет D0, 08.10.2026).
   Только :root. Значения из design-system.md v2 §2 + решения D0 (см. design/demo/SPEC.md).
   Контраст каждой текстовой пары посчитан в SPEC.md §6. */
:root {

  /* Шрифты */
  --nvm-ed-font-display: "Bellota", sans-serif;
  --nvm-ed-font-serif: var(--nvm-font-heading);
  --nvm-ed-font-sans: "Inter", sans-serif;

  /* Сетка */
  --nvm-ed-container: 1240px;
  --nvm-ed-reading: 880px;
  --nvm-ed-gutter: 20px;
  --nvm-ed-gutter-lg: 40px;

  /* Отступы (база 4) */
  --nvm-ed-s1: 4px;  --nvm-ed-s2: 8px;  --nvm-ed-s3: 12px; --nvm-ed-s4: 16px;
  --nvm-ed-s5: 20px; --nvm-ed-s6: 24px; --nvm-ed-s7: 30px; --nvm-ed-s8: 44px;
  --nvm-ed-s9: 54px; --nvm-ed-s10: 72px;

  /* Радиусы */
  --nvm-ed-r-img: 9px;
  --nvm-ed-r-sm: 12px;
  --nvm-ed-r-md: 16px;
  --nvm-ed-r-lg: 20px;
  --nvm-ed-r-pill: 999px;

  /* Тени (статичные; при hover меняется только opacity слоя с тенью) */
  --nvm-ed-shadow-photo: 0 18px 40px rgba(15, 23, 42, .10);
  --nvm-ed-shadow-card: 0 1px 2px rgba(15, 23, 42, .04);
  --nvm-ed-shadow-lift: 0 12px 28px rgba(15, 23, 42, .08);

  /* Движение: анимируются только transform и opacity */
  --nvm-ed-ease: cubic-bezier(.16, 1, .3, 1);
  --nvm-ed-t-state: 160ms;         /* opacity слоя состояния (hover/press) */
  --nvm-ed-t-ui: 200ms;            /* шеврон, подъём карточки */
  --nvm-ed-t-reveal: 600ms;
  --nvm-ed-t-bar: 1300ms;
  --nvm-ed-t-count: 1400ms;

  /* Движение страниц — как в статьях блога (nvm-blog-countup.js, CSS r118–r121).
     Появление: ease, не --nvm-ed-ease. Порог IntersectionObserver 0.2 и
     rootMargin 0 0 -40px задаются в js/nvm-motion.js, в CSS их нет. */
  --nvm-motion-y: 18px;
  --nvm-motion-reveal: 600ms;
  --nvm-motion-reveal-ease: ease;
  --nvm-motion-bar: 1300ms;
  --nvm-motion-bar-ease: cubic-bezier(.16, 1, .3, 1);
  --nvm-motion-bar-stagger: 120ms;
  --nvm-motion-count: 1400ms;
  --nvm-motion-sticky: 105px;
  --nvm-motion-scroll-margin: 110px;
  --nvm-ed-glass-blur: 12px;
}

/* Сетка и отступ карточки. 390 берёт мобильные значения, 834 и 1440 — полные. */
:root {
  --nvm-font-heading: "Bellota", Georgia, serif;
  --nvm-container: 1240px;
  --nvm-container-narrow: 880px;
  --nvm-gap-card: 16px;
  --nvm-gap-card-lg: 24px;
  --nvm-gap-list: 12px;
  --nvm-plaque-label: 0.75rem;
  --nvm-plaque-leading: 1.2;
  --nvm-card-pad: 24px;
  --nvm-card-pad-lg: 30px;
  --nvm-card-pad-sm: 20px;
  --nvm-section-y: clamp(56px, 8vw, 104px);
  --nvm-section-y-compact: clamp(40px, 5vw, 64px);
  --nvm-gutter: 16px;
  --nvm-h2-size: 42px;
  --nvm-s1: 8px;
  --nvm-s2: 12px;
  --nvm-gap: 24px;
  --nvm-gap-sm: 16px;
  --nvm-tap: 44px;
  --nvm-actionbar-h: 84px;
  --nvm-ratio-portrait: 3 / 4;
  --r-card: var(--nvm-radius-card, 20px);
  --font-num: "Bellota", sans-serif;
  --nvm-step-num: 20px;
  --nvm-step-badge: 48px;
  --nvm-step-gap: 16px;
}
/* DEV-FIX 1: на планшете шаг секций фиксированный, кратный 8 (было 8vw = 66.72 на 834). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  :root { --nvm-section-y: 72px; --nvm-section-y-compact: 40px; --nvm-h2-size: 34px; }
}

@media (max-width: 767px) {
  :root { --nvm-h2-size: 28px; }
}

@media (min-width: 768px) {
  :root { --nvm-gutter: 32px; }
}
@media (min-width: 1025px) {
  :root {
    --nvm-step-num: 22px;
    --nvm-step-badge: 56px;
    --nvm-step-gap: 20px;
  }
}
@media (max-width: 700px) {
  :root {
    --nvm-gap-card: 12px;
    --nvm-gap-card-lg: 16px;
    --nvm-card-pad: 20px;
    --nvm-card-pad-lg: 24px;
    --nvm-card-pad-sm: 16px;
  }
}

/* Значок play на видео: контур без подложки. 1440 — 72 px, 390 — 48 px. */
:root {
  --nvm-video-play-size: var(--nvm-ed-s10);
  --nvm-video-play-stroke: 2.25px;
  --nvm-video-play-color: color-mix(in srgb, var(--nvm-ed-white) 90%, transparent);
  --nvm-video-play-shadow: drop-shadow(0 0 6px color-mix(in srgb, var(--nvm-ed-ink) 35%, transparent));
}
@media (max-width: 700px) {
  :root {
    --nvm-video-play-size: var(--nvm-step-badge);
  }
}

/* Фото с подписью: один размер на услугах, препаратах и в статьях. */
:root {
  --nvm-photo-w: 420px;
  --nvm-photo-ratio: 3 / 4;
  --nvm-photo-caption-h: 64px;
}

/* Цвет плашки hero по группе. Карта ждёт утверждения: смена группы — одна строка. */
:root {
  --nvm-group-hardware: var(--nvm-ed-mint);
  --nvm-group-injection: var(--nvm-ed-coral);
  --nvm-group-care: var(--nvm-ed-bronze);
  --nvm-group-massage: var(--nvm-group-hardware);
}

/* Эталон палитры «НОВА МИ», 20.10.2026.
   Тёплый фон, молочная поверхность, коралловое действие и зелёная навигация.
   Алиасы сохраняют совместимость существующих компонентов. */
:root {
  --nvm-color-page: #f6f1ea;
  --nvm-color-surface: #fdfbf7;
  --nvm-color-inset: #ece4d8;
  --nvm-color-ink: #29261f;
  --nvm-color-muted: #655d52;
  --nvm-color-line: #d8cbbb;
  --nvm-color-control: #877b6d;
  --nvm-h-cta: #bc5850;
  --nvm-h-cta-ink: #fff;
  --nvm-color-action: #a24a42;
  --nvm-color-action-hover: #93443c;
  --nvm-color-action-active: #7c3933;
  --nvm-color-link: #15655d;
  --nvm-color-link-hover: #0f4d47;
  --nvm-color-bronze: #71512f;
  --nvm-color-dark: #302a26;
  --nvm-color-dark-inset: #453d36;
  --nvm-color-on-dark: var(--nvm-color-surface);
  --nvm-color-on-dark-muted: var(--nvm-color-line);
  --nvm-color-on-dark-action: #f0a396;
  --nvm-color-on-dark-hover: #f6b9ae;
  --nvm-color-on-dark-active: #e99486;
  --nvm-color-error: var(--nvm-color-action-active);
  --nvm-color-success: var(--nvm-color-link);
  --nvm-color-disabled-bg: var(--nvm-color-inset);
  --nvm-color-disabled-text: var(--nvm-color-muted);
  --nvm-palette-wheel-opacity: 1;
  --nvm-palette-wheel-mask: none;

  --nvm-ed-ink: var(--nvm-color-ink);
  --nvm-ed-text: var(--nvm-color-ink);
  --nvm-ed-lead: var(--nvm-color-muted);
  --nvm-ed-muted: var(--nvm-color-muted);
  --nvm-ed-note: var(--nvm-color-ink);
  --nvm-ed-white: var(--nvm-color-surface);
  --nvm-ed-paper: var(--nvm-color-page);
  --nvm-ed-page: var(--nvm-color-page);
  --nvm-ed-note-bg: var(--nvm-color-surface);
  --nvm-ed-mint-tint: var(--nvm-color-inset);
  --nvm-ed-coral-tint: var(--nvm-color-inset);
  --nvm-ed-amber-tint: var(--nvm-color-inset);
  --nvm-ed-dark: var(--nvm-color-dark);
  --nvm-ed-disabled-bg: var(--nvm-color-disabled-bg);
  --nvm-ed-line: var(--nvm-color-line);
  --nvm-ed-line-soft: var(--nvm-color-line);
  --nvm-ed-line-row: var(--nvm-color-line);
  --nvm-ed-line-strong: var(--nvm-color-control);
  --nvm-ed-coral: var(--nvm-color-action);
  --nvm-ed-coral-hover: var(--nvm-color-action-hover);
  --nvm-ed-coral-text: var(--nvm-color-action);
  --nvm-ed-mint: var(--nvm-color-link);
  --nvm-ed-mint-text: var(--nvm-color-link);
  --nvm-ed-mint-link: var(--nvm-color-link);
  --nvm-ed-amber: var(--nvm-color-line);
  --nvm-ed-amber-text: var(--nvm-color-bronze);
  --nvm-ed-bronze: var(--nvm-color-bronze);
  --nvm-ed-focus: var(--nvm-color-link);
  --nvm-ed-glass-bg: color-mix(in srgb, var(--nvm-color-surface) 96%, transparent);
  --nvm-ed-glass-fallback: var(--nvm-color-surface);
  --nvm-ed-glass-border: var(--nvm-color-line);
  --nvm-eyebrow: var(--nvm-color-link);
  --nvm-eyebrow-on-dark: var(--nvm-color-on-dark-action);
  --nvm-on-dark-muted: var(--nvm-color-on-dark-muted);
  --nvm-bg-band: var(--nvm-color-page);
  --nv-gold: var(--nvm-color-bronze);
}