/* ════════════════════════════════════════════════════════════════════
   TOGETHER — ДИЗАЙН-СИСТЕМА v2. СЛОЙ ТОКЕНОВ.

   Источник: «Together - Design System v2.dc.html» из Claude Design,
   проект 021dfa43-7ec0-45a9-89bb-ad6a50e5e052, перенесено 2026-07-27.
   Заменяет прежний слой, портированный из CRM-системы: у той были
   другие шрифт, палитра, плотность и тёмная тема.

   Тема одна — светлая. Тёмной в v2 нет: сама система выносит её в
   следующий этап («тёмная тема от Navy»), поэтому выдумывать её здесь
   было бы дописыванием за автора. Переключатель тем с сайта убран.

   ОТКЛОНЕНИЯ ОТ МАКЕТА помечены по месту словом «правка контраста» и
   собраны списком в конце файла. Правились только те цвета, где низкий
   контраст мешает пользоваться: надписи на кнопках, границы полей и
   чекбоксов, подписи под полями. Декоративные хайрлайны карточек
   оставлены как нарисовано — это решение владельца от 2026-07-27.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Синий: голос сервиса ─────────────────────────────────────── */
  --blue-50:   #EAF2FE;
  --blue-100:  #D5E5FD;
  --blue-200:  #A8CBFA;   /* панель hero */
  --blue-400:  #6BA5F5;
  --blue-500:  #3D8BF0;   /* бренд */
  --blue-600:  #2A73D4;
  --blue-700:  #1D5AAC;
  --navy:      #12294A;   /* промо-полоса, футер, тёмные панели */
  --navy-text:        #93A7C1;   /* 5,92 на navy */
  --navy-text-strong: #C6D3E2;   /* 9,58 на navy */
  --on-panel:      #12294A;   /* текст на blue-200: 8,73 */
  --on-panel-soft: #20456F;   /* лид на blue-200: 5,88 */
  --on-blue-50:    #3E6491;   /* подпись на blue-50: 5,42 */

  /* ── Оранжевый: только действие ───────────────────────────────── */
  --orange-50:  #FFF1EA;
  --orange-100: #FFE0CE;
  --orange-200: #FFC7A8;
  --orange-500: #FF6A2B;   /* фирменный: блики, тени, декор без надписей */

  /* правка контраста — поверхность кнопки и ценового чипа.
     Белый на #FF6A2B давал 2,86 при норме 4,5, то есть надпись главной
     кнопки плохо читалась на каждом экране сайта. #D64224 — самый
     светлый оранжевый того же тона, который проходит порог (4,50). */
  --orange-cta:       #D64224;
  --orange-cta-hover: #B83518;   /* 5,90 */

  --orange-text:  #BA4E1D;   /* правка контраста: было #C4521F 4,16 → 4,53 */
  --orange-soft:  #8A5C42;   /* правка контраста: было #96654A 4,47 → 5,15 */
  --orange-quote: #4A3527;   /* 10,40 на orange-50 */
  --orange-warn:  #8A4B25;   /* 6,11 на orange-50 */

  /* ── Нейтральные ──────────────────────────────────────────────── */
  --page:        #F2F4F7;   /* фон страницы */
  --surface:     #FFFFFF;   /* поверхность */
  --surface-2:   #F7F9FC;   /* подложка внутри поверхности */
  --border:      #E4E8EF;   /* декоративная граница карточек и панелей */
  --border-soft: #EDF0F5;   /* разделитель внутри карточки */

  /* правка контраста — граница интерактивного контрола: поле ввода,
     чекбокс, радио, невыбранный сегмент, ячейка выбора времени.
     #E4E8EF давал 1,23 при норме 3 — контрол было не видно.
     #7B8EB0 проходит на всех трёх поверхностях: белая 3,31,
     #F7F9FC 3,14, #F2F4F7 3,01. Мягкая --border при этом не тронута:
     декоративная и функциональная границы разведены намеренно. */
  --border-control: #7B8EB0;
  --border-control-blue: var(--blue-500);  /* контурная кнопка: 3,41 на белом */

  --ink:           #101828;   /* 17,75 на белом */
  --text-sub:      #475467;   /* 7,69 */
  --text-muted:    #53637A;   /* правка контраста: было #667A8E 4,43 → 6,12 */
  --text-faint:    #5E6F86;   /* правка контраста: было #8494A8 3,10 → 5,13 */
  --text-disabled: #A9B6C6;   /* выключенные контролы, WCAG их не меряет */
  --text-on-disabled: #98A6B8;
  --text-on-accent: #FFFFFF;

  /* ── Состояния ────────────────────────────────────────────────── */
  --success:        #2FA36B;
  --success-bg:     #E9F7F0;
  --success-bg-2:   #D9F1E4;
  --success-border: #B7E3CD;
  --success-text:   #1F7A4F;   /* 4,81 на success-bg */

  --attention:        #F2B01E;
  --attention-bg:     #FEF6E3;
  --attention-border: #F6DFA6;
  --attention-text:   #8A6410;   /* 4,99 */
  --attention-text-2: #7A6430;   /* 5,28 */

  --error:        #E5484D;
  --error-bg:     #FDF3F3;
  --error-border: #F5C6C7;
  --error-text:   #C93A3F;   /* 4,64 */

  /* ── Ссылки ───────────────────────────────────────────────────── */
  --link:         var(--blue-600);   /* 4,67 на белом */
  --link-hover:   var(--blue-700);
  --link-on-blue: var(--blue-700);   /* правка контраста: было 4,14 на blue-50 → 5,99 */

  /* ── Типографика ──────────────────────────────────────────────── */
  --font-head:   "Onest", system-ui, -apple-system, sans-serif;
  --font-body:   "Manrope", system-ui, -apple-system, sans-serif;
  --font-script: "Caveat", cursive;
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, monospace;

  --display-size:  54px;   --display-lh: 1.06;  --display-ls: -.03em;
  --h1-size:       40px;   --h1-lh: 1.15;       --h1-ls: -.025em;
  --h2-size:       30px;   --h2-lh: 1.2;        --h2-ls: -.02em;
  --h3-size:       22px;   --h3-lh: 1.3;        --h3-ls: -.01em;
  --lead-size:     18px;   --lead-lh: 1.6;
  --body-size:     16px;   --body-lh: 1.65;
  --small-size:    14px;   --small-lh: 1.5;
  --caption-size:  12.5px; --caption-lh: 1.4;
  --overline-size: 12px;   --overline-ls: .14em;
  --script-size:   26px;   --script-lh: 1.2;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* ── Форма ────────────────────────────────────────────────────── */
  --r-chip:  12px;
  --r-field: 16px;
  --r-card:  24px;
  --r-panel: 32px;
  --r-pill:  99px;
  --r-sm:    10px;
  --r-blob:  52% 48% 42% 58% / 48% 52% 48% 52%;

  --border-w:         1px;
  --border-w-control: 1.5px;

  /* ── Сетка и ритм ─────────────────────────────────────────────── */
  --container:    1200px;   /* 12 колонок, gutter 24 */
  --gutter:       24px;
  --page-pad:        40px;
  --page-pad-mobile: 20px;
  --section-gap:    96px;    /* секции лендинга 96–120 друг от друга */
  --section-gap-lg: 120px;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* ── Размеры контролов ────────────────────────────────────────── */
  --control-lg:   56px;
  --control-md:   48px;
  --control-sm:   36px;   /* см. примечание про область нажатия ниже */
  --field-h:      52px;
  --touch-target: 48px;   /* решение владельца от 2026-07-27, сохранено */
  --header-h:     72px;

  /* ── Тени ─────────────────────────────────────────────────────── */
  --shadow-card:       0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.05);
  --shadow-card-hover: 0 20px 40px rgba(16,24,40,.12);
  --shadow-raised:     0 1px 2px rgba(16,24,40,.05), 0 10px 28px rgba(16,24,40,.06);
  --shadow-float:      0 12px 28px rgba(16,24,40,.12);
  --shadow-modal:      0 24px 56px rgba(16,24,40,.3);
  --shadow-pop:        0 20px 44px rgba(16,24,40,.14);
  --shadow-toast:      0 10px 24px rgba(16,24,40,.1);
  --shadow-soft:       0 6px 16px rgba(16,24,40,.05);
  --shadow-chip:       0 2px 6px rgba(16,24,40,.08);

  --shadow-cta:       0 10px 24px rgba(214,66,36,.34);
  --shadow-cta-hover: 0 14px 28px rgba(214,66,36,.38);
  --shadow-cta-sm:    0 6px 16px rgba(214,66,36,.3);
  --shadow-blue:      0 10px 24px rgba(61,139,240,.28);
  --shadow-blue-sm:   0 8px 18px rgba(61,139,240,.3);

  --ring:        0 0 0 4px rgba(61,139,240,.14);
  --ring-strong: 0 0 0 4px rgba(61,139,240,.16);
  --scrim:       rgba(16,24,40,.42);

  /* ── Движение ─────────────────────────────────────────────────── */
  --t-instant: 120ms;   /* цвет, фон, бордер */
  --t-fast:    180ms;   /* hover кнопок, чипов, карточек — база */
  --t-base:    240ms;   /* раскрытие, смена таба, тост */
  --t-slow:    320ms;   /* модалка, шит, появление блока */
  --t-stagger:  60ms;   /* шаг каскада в списке */

  --ease-standard: cubic-bezier(.2,.8,.25,1);   /* выход */
  --ease-enter:    cubic-bezier(.16,1,.3,1);    /* вход элемента */
  --ease-smooth:   cubic-bezier(.4,0,.2,1);     /* перестановка */

  /* ── Слои ─────────────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-skip:     600;
}

/* ── Кадры анимаций. Имена сохранены как в макете ────────────────── */
@keyframes tg-spin    { to { transform: rotate(360deg); } }
@keyframes tg-pulse   { 0%,100% { opacity:.5 }  50% { opacity:1 } }
@keyframes tg-rise    { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }
@keyframes tg-slide-in{ from { opacity:0; transform:translateX(24px) } to { opacity:1; transform:none } }
@keyframes tg-scale-in{ from { opacity:0; transform:scale(.96) }      to { opacity:1; transform:none } }
@keyframes tg-fade    { from { opacity:0 } to { opacity:1 } }
@keyframes tg-tick    { 0% { opacity:0; transform:scale(.3) } 60% { opacity:1; transform:scale(1.18) } 100% { opacity:1; transform:scale(1) } }
@keyframes tg-shimmer { 0% { background-position:-180% 0 } 100% { background-position:180% 0 } }
@keyframes tg-nudge   { 0%,100% { transform:translateX(0) } 50% { transform:translateX(4px) } }
@keyframes tg-breathe { 0%,100% { transform:scale(1); opacity:.5 } 50% { transform:scale(1.5); opacity:0 } }

/* Система прямо требует выключатель движения:
   «prefers-reduced-motion — оставляем только opacity». */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;
    transition-duration: var(--t-instant) !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   СПИСОК ОТКЛОНЕНИЙ ОТ МАКЕТА. Всё остальное перенесено значение
   в значение. Каждая цифра ниже — замер по формуле WCAG, не оценка.

   1. --orange-cta #D64224 вместо #FF6A2B под белым текстом (было 2,86
      при норме 4,5). Фирменный #FF6A2B остался в --orange-500 и живёт
      там, где на нём нет надписи: тени, блики, декоративные пятна.
   2. --border-control #7B8EB0 вместо #E4E8EF на полях, чекбоксах,
      радио и невыбранных сегментах (было 1,23 при норме 3).
      Декоративная граница карточек #E4E8EF не тронута.
   3. --text-faint #5E6F86 вместо #8494A8 (было 3,10).
   4. --text-muted #53637A вместо #667A8E (было 4,43).
   5. --orange-text #BA4E1D вместо #C4521F (было 4,16);
      --orange-soft #8A5C42 вместо #96654A (было 4,47).
   6. Ссылка на голубом фоне берёт --blue-700 вместо --blue-600
      (было 4,14).
   7. Синяя кнопка: поверхность --blue-600 вместо --blue-500 (белый на
      #3D8BF0 давал 3,41). Сам --blue-500 остался границей контурной
      кнопки — там нужно 3, и он даёт 3,41.

   НЕ ПРАВИЛОСЬ НАМЕРЕННО: хайрлайны карточек и панелей, рамки статусных
   плашек, звезда рейтинга (рядом с ней всегда стоит число), текст
   выключенной кнопки — WCAG не меряет выключенные контролы.

   ОТКРЫТЫЙ ВОПРОС К ВЛАДЕЛЬЦУ: маленькая кнопка S в макете 36px, а
   ваше прежнее решение — область нажатия от 48px. Кнопка перенесена
   как нарисована; если 48 важнее, поднимаем --control-sm и правило
   .btn--sm в одном месте.
   ════════════════════════════════════════════════════════════════════ */