/* ============================================================================
   МКК · ДИЗАЙН-СИСТЕМА — атомарный фундамент (Brad Frost: tokens → atoms →
   molecules → organisms). Единый источник, на котором строятся ВСЕ страницы.

   Подключается ПЕРЕД css/mkk.css. Правила:
   • Моушн/микроанимации сюда НЕ входят (правятся отдельно вместе с камнем) —
     из моушна оставлен только --ease-out, т.к. на нём висят все transition.
   • Скругления — единая шкала (--radius-*); хардкоды в mkk.css мигрируем постепенно.
   • Обратная совместимость: старые имена токенов (--sp-*, --r-*, --cyan-*, …)
     сохранены как есть — существующий mkk.css работает без правок.

   СТРУКТURA файла:
     1. ATOMS · TOKENS      — :root, все примитивы (цвет/отступы/скругления/…)
     2. ATOMS · COMPONENTS  — кнопки, бейджи, поля (добавляются слоем ниже)
     3. MOLECULES           — карточки, таб-бары, алерты
     4. ORGANISMS           — шапки секций, композиции
   ============================================================================ */

/* ═══════════════════════════════ 1. ATOMS · TOKENS ═══════════════════════════════ */
:root{

  /* ─────── Цвет · бренд ─────── */
  --cyan-1:#3EC5FE;                 /* светлый бренд-циан (верх градиента) */
  --cyan-2:#0BAAEC;                 /* основной бренд-циан: акцент, ссылки, активное */
  --brand:var(--cyan-2);

  /* ─────── Цвет · текст (ink) ─────── */
  --ink-cold:#14303C;               /* заголовки */
  --ink-body:#3F3F3F;               /* основной текст */
  --ink-mut:#4A6572;                /* приглушённый / подписи */

  /* ─────── Цвет · поверхности (ice) ─────── */
  --ice-0:#fff;                     /* белая карточка / поверхность */
  --ice-1:#F6FBFE;                  /* едва заметный тинт */
  --ice-2:#EAF6FD;                  /* ледяной тинт — фоны секций (цены и т.п.) */
  --background-bg:#F8FAFF;          /* фон меню / страницы */
  --surface:var(--ice-0);
  --surface-tint:var(--ice-2);

  /* ─────── Цвет · семантика ─────── */
  --gold:#FFC700;                   /* внимание / жёлтый акцент */
  --stone:#39444D;
  --stone-red:#E2564A;              /* ошибка / скидка / опасность */

  /* ─────── Цвет · границы и стекло ─────── */
  --border-blue:rgba(199,211,255,.46);  /* базовая обводка карточек/пилюль */
  --border-ink:rgba(20,48,60,.1);        /* нейтральная обводка */
  --glass-bg:rgba(255,255,255,.12);
  --glass-br:rgba(255,255,255,.25);

  /* ─────── Градиенты ─────── */
  --grad-cta:linear-gradient(177deg,var(--cyan-1),var(--cyan-2));   /* кнопки / активные табы */
  --grad-brand:var(--grad-cta);
  --grad-hero-legal:linear-gradient(105deg,#2649A6 0%,#2B83EB 45%,#1DC7FE 100%); /* синий херо легал-страниц */

  /* ─────── Отступы (spacing) ─────── */
  /* Блочная 4pt-шкала — весь ритм ВНУТРИ блоков и компонентов */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  /* Страничные отступы */
  --sec-pad:clamp(var(--sp-8),8vw,var(--sp-9));  /* вертикальный паддинг секции */
  --head-gap:var(--sp-8);                        /* заголовок секции → контент (мобилка переопр. на 40) */

  /* ─────── Скругления (radius) · единая шкала ─────── */
  --radius-sm:12px;                 /* мелкие элементы (пункты меню, поля) */
  --radius-md:16px;                 /* карточки на мобилке, алерты */
  --radius-lg:20px;                 /* карточки цен */
  --radius-xl:24px;                 /* крупные легал-карточки */
  --radius-2xl:28px;                /* самые крупные блоки */
  --radius-pill:100px;              /* кнопки, табы, бейджи-пилюли */
  --radius-round:50%;               /* круг (иконки-подложки) */
  /* Обратная совместимость (mkk.css использует старые имена) */
  --r-sm:var(--radius-sm);          /* 12 */
  --r-md:var(--radius-md);          /* 16 */
  --r-lg:var(--radius-2xl);         /* 28 */

  /* ─────── Типографика ─────── */
  --font-sans:'Onest',system-ui,-apple-system,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --lh-tight:1.1; --lh-snug:1.3; --lh-normal:1.5;
  --text-h1:clamp(44px,5.6vw,80px);
  --text-h2:clamp(32px,3.6vw,52px);
  --text-h3:clamp(19px,2.3vw,24px);
  --text-lead:clamp(16px,1.9vw,24px);
  --text-body:16px;
  --text-sm:14px;
  --text-xs:12px;

  /* ─────── Тени (elevation) ─────── */
  --shadow-sm:0 1px 2px rgba(20,48,60,.04);
  --shadow-md:0 16px 32px -24px rgba(20,48,60,.24);
  --shadow-lg:0 22px 44px -22px rgba(20,48,60,.3);
  --shadow-glow:0 14px 34px -14px rgba(11,170,236,.55);   /* акцентная подсветка (primary hover) */

  /* ─────── Границы ─────── */
  --border-w:1px;

  /* ─────── Z-index · шкала ─────── */
  --z-stone:900; --z-nav:1030; --z-sticky:1040; --z-toast:1080;

  /* ─────── Easing (единственный моушн-токен; микроанимации — отдельно) ─────── */
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* ─────── Layout-константы ─────── */
  --promo-h:40px; --nav-h:70px;
}

/* ═══════════════════════════════ 2. ATOMS · COMPONENTS ═══════════════════════════════ */
/* Чистый неймспейс .ds-* на токенах — для НОВЫХ страниц. Существующие .btn-mkk/.price-card
   работают как есть, мигрируют постепенно (решение Романа). */

/* ── Атом: кнопка ── */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);
  padding:16px 28px;border:var(--border-w) solid transparent;border-radius:var(--radius-pill);
  font:var(--fw-medium) 15px/1 var(--font-sans);text-decoration:none;cursor:pointer;
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .3s var(--ease-out),border-color .3s var(--ease-out)}
.ds-btn--primary{background:var(--grad-cta);color:#fff}
.ds-btn--primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow)}
.ds-btn--light{background:var(--ice-0);color:var(--ink-cold);border-color:var(--border-ink)}
.ds-btn--light:hover{transform:translateY(-1px);background:var(--ice-1);border-color:var(--cyan-2)}
.ds-btn--ghost{background:transparent;color:var(--ink-cold);border-color:var(--border-ink)}
.ds-btn--ghost:hover{border-color:var(--cyan-2);color:var(--cyan-2)}
.ds-btn--block{width:100%}

/* ── Атом: бейдж ── */
.ds-badge{display:inline-flex;align-items:center;gap:var(--sp-1);padding:5px var(--sp-3);
  border-radius:var(--radius-pill);background:var(--ice-2);color:var(--ink-body);
  font:var(--fw-semibold) 13px/1.3 var(--font-sans);letter-spacing:.02em}
.ds-badge--accent{background:rgba(11,170,236,.1);color:var(--cyan-2)}
.ds-badge--danger{background:rgba(226,86,74,.1);color:var(--stone-red)}
.ds-badge--gold{background:rgba(255,199,0,.14);color:#9a7500}

/* ── Атом: кикер секции (акцентная надпись над заголовком) ── */
/* text-indent .06em компенсирует трейлинг letter-spacing → текст ровно по центру бейджа. */
.ds-kicker{display:inline-block;color:var(--cyan-2);font:var(--fw-bold) 13px/1 var(--font-sans);
  text-transform:uppercase;letter-spacing:.12em;text-indent:.06em}
.ds-kicker--badge{padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-pill);background:rgba(11,170,236,.1)}

/* ── Атом: поле формы (label + control) ── */
.ds-field{display:flex;flex-direction:column;gap:var(--sp-2)}
.ds-label{color:var(--ink-cold);font:var(--fw-semibold) var(--text-sm)/1.3 var(--font-sans)}

/* ── Атом: инпут / textarea (пилюльный стиль сайта) ── */
.ds-input,.ds-textarea{width:100%;padding:0 var(--sp-4);border:var(--border-w) solid var(--border-ink);
  background:var(--ice-0);color:var(--ink-cold);font:var(--fw-regular) var(--text-sm)/1.3 var(--font-sans);
  transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.ds-input{height:48px;border-radius:var(--radius-pill)}
.ds-textarea{min-height:120px;padding:14px var(--sp-4);border-radius:var(--radius-md);line-height:var(--lh-snug);resize:vertical}
.ds-input::placeholder,.ds-textarea::placeholder{color:rgba(63,63,63,.8)}
.ds-input:focus,.ds-textarea:focus{outline:0;border-color:var(--cyan-2);box-shadow:0 0 0 3px rgba(11,170,236,.15)}
.ds-input:focus-visible,.ds-textarea:focus-visible{outline:2px solid var(--cyan-2);outline-offset:2px}
.ds-input.is-invalid,.ds-input[aria-invalid="true"]{border-color:var(--stone-red)}

/* ── Молекула: КАСТОМНЫЙ select (дроп в стиле ДС, НЕ системный) ──
   Нативный <select> нельзя стилизовать в открытом виде (список опций рисует ОС). Поэтому
   виджет из триггера + панели. Поведение — js/design-system.js (инициализирует [data-ds-select]).
   Внутри — скрытый <input>, чтобы значение уходило в форму. */
.ds-select{position:relative;display:block;width:100%}
.ds-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;height:48px;
  padding:0 var(--sp-4);border:var(--border-w) solid var(--border-ink);border-radius:var(--radius-pill);
  background:var(--ice-0);color:var(--ink-cold);font:var(--fw-regular) var(--text-sm)/1.3 var(--font-sans);
  text-align:left;cursor:pointer;transition:border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.ds-select__trigger:hover,.ds-select[data-open] .ds-select__trigger{border-color:var(--cyan-2)}
.ds-select__trigger:focus-visible{outline:2px solid var(--cyan-2);outline-offset:2px}
.ds-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-select__chevron{flex:none;width:9px;height:9px;border-right:2px solid var(--ink-mut);border-bottom:2px solid var(--ink-mut);
  transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease-out)}
.ds-select[data-open] .ds-select__chevron{transform:translateY(2px) rotate(-135deg)}
.ds-select__panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:var(--z-sticky);max-height:264px;overflow:auto;
  display:flex;flex-direction:column;gap:2px;padding:var(--sp-2);margin:0;list-style:none;
  background:var(--surface);border:var(--border-w) solid var(--border-blue);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s linear .2s}
.ds-select[data-open] .ds-select__panel{opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s}
.ds-select__option{padding:10px var(--sp-3);border-radius:var(--radius-sm);color:var(--ink-body);font-size:var(--text-sm);cursor:pointer;
  transition:background .15s var(--ease-out),color .15s var(--ease-out)}
.ds-select__option:hover,.ds-select__option[data-active]{background:var(--ice-2);color:var(--cyan-2)}
.ds-select__option[aria-selected="true"]{color:var(--cyan-2);font-weight:var(--fw-semibold)}

/* ── Атом: чекбокс (кастомный, как в лид-модалке) ── */
/* Галка — тот же чек, что в лид-модалке (svg M3.5 8.5l3 3 6-7); бокс ЦЕНТРИРОВАН с текстом. */
.ds-checkbox{display:inline-flex;gap:var(--sp-3);align-items:center;cursor:pointer;font-size:var(--text-xs);line-height:1.45;color:var(--ink-mut)}
.ds-checkbox input{position:absolute;opacity:0;width:1px;height:1px}
.ds-checkbox__box{flex:none;width:20px;height:20px;border-radius:7px;border:1.5px solid rgba(20,48,60,.25);
  background:var(--ice-0) center/13px no-repeat;transition:background-color .2s var(--ease-out),border-color .2s var(--ease-out)}
.ds-checkbox input:checked+.ds-checkbox__box{background-color:var(--cyan-2);border-color:var(--cyan-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E")}
.ds-checkbox input:focus-visible+.ds-checkbox__box{outline:2px solid var(--cyan-2);outline-offset:2px}

/* ═══════════════════════════════ 3. MOLECULES ═══════════════════════════════ */

/* ── Молекула: карточка ── */
.ds-card{background:var(--surface);border:var(--border-w) solid var(--border-blue);
  border-radius:var(--radius-lg);padding:var(--sp-5);box-shadow:var(--shadow-sm),var(--shadow-md)}
.ds-card--flat{box-shadow:none}
.ds-card--lg{padding:var(--sp-6);border-radius:var(--radius-xl)}
.ds-card--hover{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.ds-card--hover:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

/* ── Молекула: таб-бар (целостная пилюля, активный = акцент; без JS-индикатора) ── */
.ds-tabs{display:inline-flex;flex-wrap:wrap;gap:var(--sp-1);padding:6px;
  background:var(--surface);border:var(--border-w) solid var(--border-blue);border-radius:var(--radius-pill)}
.ds-tab{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 20px;
  border:0;border-radius:var(--radius-pill);background:transparent;color:var(--ink-body);
  font:var(--fw-semibold) 14px/1 var(--font-sans);cursor:pointer;
  transition:color .3s var(--ease-out),background .3s var(--ease-out)}
.ds-tab:hover{color:var(--cyan-2)}
.ds-tab.is-active{background:var(--grad-cta);color:#fff}

/* ── Молекула: алерт/дисклеймер ── */
.ds-alert{display:flex;gap:var(--sp-4);align-items:center;padding:var(--sp-5);
  border-radius:var(--radius-xl);background:var(--surface);border:var(--border-w) solid var(--border-blue)}
.ds-alert__icon{flex:none;color:var(--cyan-2)}
.ds-alert__text{margin:0;color:var(--ink-body);font-size:var(--text-body);line-height:var(--lh-snug)}

/* ── Молекула: чек-лист (самодостаточный — галочка через ::before, инлайн-svg не нужен) ── */
.ds-check-list{display:flex;flex-direction:column;gap:var(--sp-3);margin:0;padding:0;list-style:none}
.ds-check-list li{display:flex;align-items:flex-start;gap:var(--sp-2);color:var(--ink-body);font-size:var(--text-sm);line-height:var(--lh-snug)}
.ds-check-list li::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;border-radius:var(--radius-round);
  background:rgba(11,170,236,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230BAAEC' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/10px no-repeat}

/* ── Молекула: дропдаун / поповер (плавающая панель, .is-open открывает) ── */
.ds-dropdown{position:absolute;z-index:var(--z-sticky);min-width:200px;display:flex;flex-direction:column;gap:var(--sp-1);
  padding:var(--sp-2);background:var(--surface);border:var(--border-w) solid var(--border-blue);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s linear .25s}
.ds-dropdown.is-open{opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out),visibility 0s}
.ds-dropdown__item{display:flex;align-items:center;gap:var(--sp-3);padding:10px var(--sp-3);border-radius:var(--radius-sm);
  color:var(--ink-body);font-size:var(--text-sm);text-decoration:none;cursor:pointer;
  transition:background .15s var(--ease-out),color .15s var(--ease-out)}
.ds-dropdown__item:hover,.ds-dropdown__item:focus-visible{background:var(--ice-2);color:var(--cyan-2)}

/* ═══════════════════════════════ 4. ORGANISMS ═══════════════════════════════ */

/* ── Организм: шапка секции (кикер + H2 + лид) ── */
.ds-section-head{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:var(--head-gap)}
.ds-section-head--center{align-items:center;text-align:center}
.ds-section-head h2{margin:0;color:var(--ink-cold);font-size:var(--text-h2);line-height:var(--lh-tight);font-weight:var(--fw-extrabold)}
.ds-section-head .ds-lead{margin:0;max-width:65ch;color:var(--ink-body);font-size:var(--text-lead);line-height:var(--lh-normal);font-weight:var(--fw-medium)}

/* ── Доступность: гасим hover-сдвиги при prefers-reduced-motion (единственная моушн-уступка) ── */
@media (prefers-reduced-motion:reduce){
  .ds-btn,.ds-card--hover{transition:none}
  .ds-btn--primary:hover,.ds-btn--light:hover,.ds-card--hover:hover{transform:none}
}

/* ═══════════════════════════════ 5. ANTI-PATTERNS · КОНТРАКТ ═══════════════════════════════
   Чего дизайн-система НЕ делает (методология стартера: forbidden patterns). Новые страницы
   держат стиль, сверяясь с этим списком. Живой do/don't — в styleguide.html.

   ЦВЕТ И ФОН
   ✗ Тёплые/кремовые/бежевые фоны. Палитра ЛЕДЯНАЯ (--ice-*, синевато-белые). Тепло не вводим.
   ✗ Сырые hex/rgba в стилях. Только токены (--cyan-2, --ink-body, --ice-2, …).
   ✗ Серый текст на цветном фоне (выцветает). Берём затемнённый оттенок фона или прозрачность текста.

   ТИПОГРАФИКА
   ✗ Градиентный текст (background-clip:text). Акцент — цветом/весом, не градиентом.
   ✗ Мелкий тречёный капс-«eyebrow» над КАЖДОЙ секцией. Кикер (.ds-kicker) — осознанный
     единичный элемент, не на каждый блок.
   ✗ Шрифты кроме Onest (--font-sans). Веса — только из --fw-* (400/500/600/700/800).
   ✗ Текст, вылезающий за контейнер: проверяем длинные заголовки на всех брейкпоинтах.
   ✗ Висящие предлоги/союзы. Короткие слова (в, и, на, с, к, по, от, до, для, что…) НЕ оставляем
     в конце строки — привязываем к следующему слову через &nbsp;.
   ✗ Одно слово на отдельной строке (сирота). Последние два слова заголовка/абзаца связываем &nbsp;
     (для длинной прозы — text-wrap:pretty, для заголовков — text-wrap:balance).

   ОТСТУПЫ И СКРУГЛЕНИЯ
   ✗ Off-scale отступы. Только 4pt-шкала --sp-* (внутри блоков) и --sec-pad/--head-gap (страница).
   ✗ Хардкод border-radius. Только шкала --radius-* (миграция старых идёт постепенно).

   БРЕЙКПОИНТЫ (три слоя: мобилка ≤767.98 / планшет 768–991.98 / десктоп ≥992)
   ✗ Новые граничные значения. В проекте ровно два числа: 767.98 и 991.98. Появилось третье —
     значит слой поехал. Подробности и обоснование — docs/design-rules.md §1.1.
   ✗ Дубль правила в новый @media, если у существующего блока достаточно сдвинуть границу.
   ✗ Правка границы в CSS без парной правки в JS. Границы живут парами
     (например .cta-scene-sec ↔ js/finale-stones.js). Разъедутся — сцена поедет по чужой шкале.
   ✗ Планшет «по остаточному принципу» (десктопная раскладка в узком окне). Планшет — свой слой:
     свои --sec-pad/--head-gap, свои кегли, свои внутренние отступы карточек.
   ✗ Правило без учёта веса базового. Базовые часто (0,2,0) — `.prices-ice .price-card`;
     голый `.price-card` их НЕ перебьёт, порядок не спасёт.

   КОМПОНЕНТЫ И ЛЕЙАУТ
   ✗ Карточка в карточке (вложенные .ds-card). Максимум — один уровень.
   ✗ Высота, прибитая в px, если её может дать контент. Сменится ширина — контейнер сломается
     (превью уехали в портрет; aspect-ratio при height:100% посчитал ширину ОТ высоты и вылез
     из колонки). Одна ось в px + другая от родителя = мина.
   ✗ Отчёт «готово» по габаритам блока. Габариты сходятся, а внутри карточки текст рвётся —
     считаем СТРОКИ и переполнение внутри. Чек-лист — docs/design-rules.md §12.1.
   ✗ Боковые цветные полоски-бордеры (border-left-акцент). Полная обводка/тинт/иконка вместо.
   ✗ Кнопка/интерактив без hover-состояния. Любой контрол даёт фидбэк.
   ✗ Стеклянные (glass/blur) панели по умолчанию. Редко и осознанно.

   МОУШН
   ✗ Bounce/elastic/overshoot-easing. Только --ease-out (exponential). Моушн-система — отдельно с камнем.
   ✗ Анимации без @media (prefers-reduced-motion) альтернативы.

   БРЕНД / КОНТЕНТ
   ✗ «Кёрлинг» через Ё. Пишем «керлинг» БЕЗ ё везде (даже если в Figma с ё).
   ✗ Доступность: контраст body-текста ≥4.5:1; фокус виден (outline cyan-2); плейсхолдер не бледнее текста.
   ═════════════════════════════════════════════════════════════════════════════════════════ */