/* ============================================================
   БЕЛЫЙ КИТ — дизайн-токены

   Направление: операционная логистика, не «SaaS-лендинг».
   Герой страницы — коридор доставки. Ультрамарин тратится
   на линию коридора и на действие; всё остальное молчит.
   ============================================================ */

:root {
  /* --- Цвет ------------------------------------------------ */
  --ink-deep:      #101A47;   /* поле героя: глубокий чернильный синий */
  --ink-deep-2:    #18245C;   /* подложки внутри героя */

  --accent:        #3D5CFF;   /* ультрамарин: линия коридора и действие */
  --accent-ink:    #2A44D6;   /* нажатие / hover */
  --accent-soft:   #EEF1FF;   /* светлая подложка акцента */
  --accent-line:   #C9D2FF;   /* граница в акцентных блоках */

  --ink:           #151515;   /* текст и заголовки */
  --ink-2:         #5B5B60;   /* вторичный текст (6.7:1) */
  --ink-3:         #6B6B73;   /* подписи (5.3:1 — WCAG AA) */

  --surface:       #F9F9F9;   /* фон секций */
  --surface-2:     #F2F2F4;   /* пилюли, шапки таблиц */
  --line:          #E8E8EC;   /* волосяная линия */
  --white:         #FFFFFF;

  /* Статусные цвета. Всегда дублируются иконкой и словом —
     цвет не единственный носитель смысла (WCAG 1.4.1). */
  --ok:            #0E8A44;
  --warn:          #A35C00;   /* также метка «данные условные» */
  --no:            #C42B2B;

  /* --- Шрифт ------------------------------------------------
     Одна гарнитура. Иерархия строится весом и кеглем, а не
     второй семьёй. Onest — геометрический гротеск с кириллицей,
     ближайший свободный аналог Atyp Display из референса.      */
  --font: 'Onest', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Модульная шкала ≈1.25 (большая терция) */
  --fs-display: clamp(38px, 5.6vw, 72px);
  --fs-h1:      clamp(32px, 4.4vw, 54px);
  --fs-h2:      clamp(25px, 3.1vw, 38px);
  --fs-h3:      clamp(19px, 1.9vw, 24px);
  --fs-h4:      17px;
  --fs-lead:    clamp(16px, 1.3vw, 18px);
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      13px;

  /* --- Радиус кодирует роль, а не украшает ----------------- */
  --r-control:  10px;   /* поля ввода */
  --r-data:     14px;   /* карточки данных, таблицы, шаги */
  --r-card:     20px;   /* обычные карточки */
  --r-surface:  30px;   /* крупные поверхности: коридор, плитки, CTA */
  --r-pill:     999px;  /* кнопки и теги */

  /* Совместимость с ранее написанными правилами */
  --r-sm: var(--r-control);
  --r-md: var(--r-data);
  --r-lg: var(--r-card);
  --r-xl: var(--r-surface);

  /* --- Тень: одна, слабая, только под поднятым объектом ----- */
  --sh-sm:     0 1px 2px rgba(21, 21, 21, .05);
  --sh-md:     0 6px 24px rgba(21, 21, 21, .07);
  --sh-lg:     0 18px 50px rgba(21, 21, 21, .10);
  --sh-accent: 0 8px 24px rgba(61, 92, 255, .26);

  /* --- Ритм ------------------------------------------------- */
  --gap:       24px;
  --section-y: clamp(56px, 7vw, 104px);
  --container: 1240px;
  --pad-x:     clamp(16px, 3vw, 32px);
  --header-h:  76px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 720px) {
  :root { --header-h: 64px; }
}