/* ============================================================
   Конекса — дизайн-токены
   Единственное место, где живут цвета, шрифты, размеры и формы.

   Визуальный язык взят с референсов mpstats.io и skyeng.ru:
   крупные скруглённые блоки, цветные подложки, плотные секции,
   белый фон и мало тёмного. Акцент — электрик, подложки — мята
   и светло-синий.

   ТЗ: wiki/Marketplace-SaaS/koneksa/site-brief.md
   ============================================================ */

:root {
  /* ---- Акцент ---- */
  --blue:       #2B5BE8;
  --blue-700:   #1E46C4;   /* hover */
  --blue-50:    #E6ECFF;   /* подложка блока */
  --blue-100:   #D3DEFF;   /* граница на подложке */

  /* ---- Вторая подложка ---- */
  --mint:       #D8F3EA;
  --mint-200:   #B6E7D6;
  --mint-700:   #0E7A5A;   /* текст на мяте, если нужен цветной */

  /* ---- Чернила ---- */
  --ink-900: #0E1220;   /* заголовки, тёмные блоки */
  --ink-700: #1A2033;
  --ink-600: #454C61;   /* основной текст абзацев */
  --ink-400: #6E7689;   /* вторичный текст */
  --ink-300: #9AA1B2;   /* подписи */

  /* ---- Поверхности ---- */
  --paper:    #FFFFFF;
  --surface:  #F5F6FA;   /* светло-серая секция */
  --line:     #E4E7F0;
  --line-dark:#2A3146;

  /* ---- Текст на тёмном ---- */
  --on-dark:     #FFFFFF;
  --on-dark-dim: #A8AFC2;

  /* ---- Смысловые цвета цифр ---- */
  --loss:    #D8442B;
  --loss-50: #FDE9E5;
  --profit:  #0E7A5A;

  --focus: #2B5BE8;

  /* ---- Шрифты ---- */
  --font-head: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* ---- Шкала кегля ---- */
  --fs-display: clamp(2.125rem, 1.35rem + 3.3vw, 3.5rem);   /* 34 → 56 */
  --fs-h1:      clamp(2rem,     1.40rem + 2.6vw, 3rem);     /* 32 → 48 */
  --fs-h2:      clamp(1.75rem,  1.25rem + 2.1vw, 2.75rem);  /* 28 → 44 */
  --fs-h3:      clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);  /* 22 → 28 */
  --fs-h4:      1.1875rem;
  --fs-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);    /* 17 → 20 */
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  /* ---- Отступы ---- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;   --s-10: 64px;  --s-11: 80px; --s-12: 96px; --s-13: 120px;

  /* ---- Форма. Как на референсах: крупные скругления,
          кнопки-пилюли. ---- */
  --r-block: 32px;  /* секционные плашки */
  --r-card:  24px;  /* карточки */
  --r-sm:    16px;  /* мелкие карточки, поля */
  --r-pill:  999px; /* кнопки, чипы, бейджи */

  /* ---- Тени: мягкие, подкрашены синим ---- */
  --shadow-card: 0 2px 6px rgba(14, 18, 32, .04), 0 12px 32px rgba(43, 91, 232, .07);
  --shadow-pop:  0 24px 60px rgba(14, 18, 32, .20);

  /* ---- Раскладка ---- */
  --container: 1240px;
  --container-text: 760px;
  --gutter: 16px;
  --section-y: clamp(56px, 6.5vw, 104px);
  --header-h: 60px;

  /* ---- Движение ---- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: 180ms;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; --header-h: 72px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}