/* ============================================================
   handrail-contour — design tokens
   r1 · light / strict / modern
   Единственный источник значений. Компоненты не содержат
   «магических» цветов, размеров и таймингов.
   ============================================================ */

:root {
  /* ---------- 1. Бренд (D6, nst-comp.ru) ---------- */
  --brand-primary:   #3c4b5c;
  --brand-secondary: #243548;
  --brand-accent:    #910202;
  --brand-support:   #597a9b;
  --brand-white:     #ffffff;
  --brand-black:     #000000;

  /* ---------- 2. Производные нейтрали ----------
     Тот же холодный сине-серый hue, что и primary, без «грязных» серых. */
  --c-ink:        #141b24;  /* заголовки, максимальный контраст */
  --c-text:       #1f2a36;  /* основной текст */
  --c-text-2:     #4b5a6b;  /* вторичный: 7.06:1 на #fff */
  --c-text-3:     #576777;  /* третичный: 5.81:1 на #fff, 5.41:1 на --c-bg, 5.04:1 на --c-bg-2 */
  --c-line:       #dde3ea;  /* hairline-разделители (декор, не контролы) */
  --c-line-2:     #78848f;  /* границы контролов: 3.82:1 на #fff, 3.32:1 на --c-bg-2 */
  --c-bg:         #f5f7f9;  /* фон страницы */
  --c-bg-2:       #eceff4;  /* альтернативные секции */
  --c-surface:    #ffffff;  /* карточки, поля */
  --c-surface-2:  #fafbfc;  /* вложенные поверхности */

  /* ---------- 3. Действия ---------- */
  --c-primary:        var(--brand-primary);
  --c-primary-hover:  #33414f;
  --c-primary-active: #2b3846;
  --c-secondary:      var(--brand-secondary);
  --c-accent:         var(--brand-accent);
  --c-accent-hover:   #7a0202;
  --c-accent-active:  #650101;
  --c-support:        var(--brand-support);
  --c-support-soft:   #e9eff5;
  --c-link:           #3b5b7c;  /* 7.04:1 на #fff — ссылки в тексте */
  --c-link-hover:     var(--brand-accent);
  --c-focus:          var(--brand-support);
  --c-success:        #1f6b46;
  --c-error:          #8f1212;

  /* ---------- 4. Семантические алиасы (темизация — здесь) ---------- */
  --ui-page:        var(--c-bg);
  --ui-card:        var(--c-surface);
  --ui-text:        var(--c-text);
  --ui-text-strong: var(--c-ink);
  --ui-text-muted:  var(--c-text-2);
  --ui-text-faint:  var(--c-text-3);
  --ui-border:      var(--c-line);
  --ui-border-ctrl: var(--c-line-2);
  --ui-action:      var(--c-accent);      /* главный CTA — фирменный красный */
  --ui-action-hover:var(--c-accent-hover);

  /* ---------- 5. Типографика ----------
     Системный стек (D2): без webfonts и CDN. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  --fs-display: clamp(2.25rem, 1.35rem + 3.55vw, 4rem);      /* 36 → 64 */
  --fs-h1:      clamp(1.875rem, 1.28rem + 2.5vw, 3rem);      /* 30 → 48 */
  --fs-h2:      clamp(1.5rem, 1.12rem + 1.6vw, 2.25rem);     /* 24 → 36 */
  --fs-h3:      clamp(1.1875rem, 1.05rem + .6vw, 1.5rem);    /* 19 → 24 */
  --fs-h4:      clamp(1.0625rem, 1rem + .3vw, 1.1875rem);    /* 17 → 19 */
  --fs-lead:    clamp(1.0625rem, 1rem + .45vw, 1.25rem);     /* 17 → 20 */
  --fs-body:    1rem;                                        /* 16 */
  --fs-sm:      0.9375rem;                                   /* 15 */
  --fs-xs:      0.8125rem;                                   /* 13 */
  --fs-eyebrow: 0.75rem;                                     /* 12 */

  --lh-display: 1.04;
  --lh-h:       1.15;
  --lh-h3:      1.3;
  --lh-body:    1.6;
  --lh-lead:    1.55;
  --lh-tight:   1.35;

  --ls-display: -0.03em;
  --ls-h:       -0.02em;
  --ls-body:    0;
  --ls-eyebrow: 0.11em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  --measure: 68ch;          /* комфортная строка */
  --measure-narrow: 46ch;

  /* ---------- 6. Пространство (шаг 4px) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  --container: 1280px;
  --container-narrow: 880px;
  --gutter: clamp(16px, 3.4vw, 40px);
  --section-y: clamp(48px, 5.4vw, 96px);      /* вертикальный ритм секций */
  --section-y-tight: clamp(32px, 3.4vw, 56px);
  --stack: clamp(16px, 1.6vw, 24px);          /* базовый шаг между блоками */

  /* ---------- 7. Радиусы ---------- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-full: 999px;

  /* ---------- 8. Тени (холодные, многослойные) ---------- */
  --sh-1: 0 1px 2px rgba(36, 53, 72, .06), 0 2px 6px rgba(36, 53, 72, .04);
  --sh-2: 0 2px 4px rgba(36, 53, 72, .06), 0 8px 20px rgba(36, 53, 72, .07);
  --sh-3: 0 4px 8px rgba(36, 53, 72, .07), 0 18px 40px rgba(36, 53, 72, .12);
  --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, .65);
  --sh-focus: 0 0 0 3px rgba(89, 122, 155, .38);

  /* ---------- 9. Движение (D11) ---------- */
  --ease-out:    cubic-bezier(.16, .84, .44, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-spring: cubic-bezier(.22, 1.12, .36, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 680ms;

  /* ---------- 10. Слои ---------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-drawer: 200;
  --z-progress: 300;

  /* ---------- 11. Метрики компонентов ---------- */
  --header-h: 76px;
  --header-h-compact: 60px;
  --tap: 44px;               /* минимальная тач-цель (D9) */
  --ctrl-h: 48px;            /* высота полей и кнопок */
  --card-media-ratio: 4 / 3;
}

/* Плотнее на узких экранах — «воздух без пустот» */
@media (max-width: 767px) {
  :root {
    --header-h: 64px;
    --header-h-compact: 56px;
    --section-y: clamp(40px, 9vw, 56px);
    --stack: 16px;
  }
}

/* Тёмная тема не входит в r1: сайт светлый по ТЗ.
   Точка расширения оставлена намеренно. */