/* v1.1.6.300 (REV46): акцентний текст на власному м'якому тлі переведено на
   --n-accent-ink. Патерн узятий із канону, але я перевірив його на всіх десяти
   акцентах: у світлій схемі 9 із 10 не дотягують до WCAG AA (2.24-4.01 при
   порозі 4.5). Чорнило — той самий акцент, затемнений рівно до 4.5 і ні на крок
   далі; у темній схемі воно дорівнює акценту, бо там патерн і так проходить.
   Обґрунтування з числами — у tokens.css над оголошенням токена. */
/* v1.1.6.291 (REV46, CANON-STEP-8): значення, які ВЖЕ дорівнювали кроку
   канонної шкали, отримали її ім'я: радіус 0, pill 0,
   відступи 3, вага 0. Жодне число не змінено — це
   перейменування, не редизайн. Значення поза шкалою лишились літералами
   свідомо: прев'ю канону саме вживає 10/14/6px для падінгів компонентів,
   тож стягувати їх до шкали означало б відійти ВІД прев'ю, а не до нього. */
/* canon-primitives.css · v1.1.6.285 (REV46, CANON-STEP-2)
 * ============================================================================
 * КАНОНІЧНІ ПРИМІТИВИ з kolo_plus_new_theme_preview_CANON_REV6.html.
 *
 * Канон описує рівно чотири примітиви — і це вся його абетка:
 *   .kp-card · .kp-btn (+6 модифікаторів) · .kp-badge (+4) · .kp-form-field
 *
 * ВИМІРЮВАННЯ ПЕРЕД ПРАВКОЮ (1.1.6.284):
 *   .kp-card       — 212 вживань у розмітці; глобальна база Є (css/style.css);
 *   .kp-btn        —  84 вживання у розмітці; глобальної бази НЕМА ЖОДНОЇ;
 *   .kp-badge      —   2 вживання; база лише у widgets/ui/badge (вантажиться,
 *                      тільки коли рендериться той віджет);
 *   .kp-form-field —   2 вживання; база лише у widgets/account/account_shell.
 *
 * 🔴 ДЕФЕКТ, який видно з цих чисел. `.kp-btn` — центральний примітив канону —
 * не має глобального правила взагалі. 22 CSS-правила, що його згадують, живуть
 * у 5 файлах і всі СКОУПОВАНІ (`:is(.kp-page--account,…)` у nova-bridge,
 * `.kp-level-up__actions …`, auth). Поза цими скоупами `<button class="kp-btn">`
 * дістає з base.css рівно `background:none;border:none` — тобто виглядає як
 * звичайний текст. Це 19 кнопок на 8 сторінках:
 *   communities/earn_schedule (6), social/friends_suggested (3),
 *   posts/edit (2), communities/rules_view (2), communities/broadcast (2),
 *   messages/broadcasts_inbox (2), posts/post (1), lib/quick_fields (1).
 *
 * ── ДВА ШАРИ І ЧОМУ САМЕ ТАК ────────────────────────────────────────────────
 *
 * ШАР 1 (типовий, БЕЗ прапорця) — примітиви, яких глобально не існує:
 * `.kp-btn` і `.kp-form-field`. Тут нема чого перефарбовувати: вони лише
 * вдягають те, що зараз голе. Специфічність навмисно мінімальна (0,1,0), тож
 * КОЖНЕ наявне скоуповане правило (nova-bridge, level, auth, account) виграє,
 * як вигравало досі — вигляд уже стилізованих кнопок не змінюється.
 *
 * ШАР 2 (з .293 — типово; був за прапорцем) — примітиви, що мали глобальний
 * вигляд: `.kp-card` і `.kp-badge`. Переписати їх «на місці» означало б
 * перефарбувати 212 карток одним комітом. Тому канонний вигляд вмикається тим
 * самим перемикачем, що й палітра (KP_CANON=1).
 *
 * Правила написані ВИКЛЮЧНО на токенах канону. Через це один файл обслуговує
 * обидва режими: геометрія канонна вже зараз, а кольори підставляє той набір
 * токенів, який активний. Прапорець міняє значення — не правила.
 *
 * ⚠️ КІНЦЕВА ТОЧКА: коли палітра стане типовою, префікс `html[data-kp-canon="1"]`
 * знімається одним sed, а прапорець зникає з head.php і .env. Поки він тут —
 * міграція не завершена, і проба це рахує (`canonPending`, `gatedPrimitives`).
 *
 * ── СВІДОМІ ВІДХИЛЕННЯ ВІД ПРЕВ'Ю (не «майже те саме», а перелік) ───────────
 * 1. `font-weight:720/750` → `var(--kp-weight-bold)` (700). Пакет вантажить
 *    Inter дискретними накресленнями 400/500/600/700 (head.php), 720 фізично
 *    немає — браузер і так намалює 700. Токен робить це видимим.
 * 2. `.kp-badge--success/--warning/--danger` у прев'ю мають зашиті
 *    `rgba(20,167,101,.13)`, `rgba(233,156,21,.14)`, `#ae6c00`,
 *    `rgba(233,66,89,.12)`. Перенести їх дослівно = додати рівно ті літерали,
 *    які ця міграція прибирає. Тут вони виведені через color-mix із
 *    відповідних токенів: відтінок той самий, значення трохи інше.
 * 3. `.kp-btn--primary/--soft` у прев'ю позначені `!important`. У пакеті —
 *    без нього: інакше глобальне правило переб'є nova-bridge і перефарбує
 *    кнопки акаунта, чого цей крок робити не має.
 * 4. `.kp-card` у каноні БЕЗ padding — відступ дає контекстний клас
 *    (`.post{padding:15px}`, `.state-card{padding:var(--kp-space-4)}`). У пакеті таких
 *    класів ще нема, а 212 карток покладаються на padding зі style.css. Тому
 *    в канон-шарі padding збережено (`--kp-space-5`); зняти — коли з'являться
 *    контекстні класи. Борг названий, а не прихований.
 * 5. `.kp-btn--sm` немає в каноні (там `--small`), але розмітка вживає його
 *    10 разів проти 1. Аліас нижче не дає цим кнопкам лишитись без розміру;
 *    зводити розмітку на `--small` — робота модульних кроків.
 * ============================================================================ */

/* ══ ШАР 1 · ТИПОВО ═════════════════════════════════════════════════════════ */


/* ══ ЛЕГАСІ-ІМЕНА КНОПОК — ТА САМА КНОПКА ═══════════════════════════════════
   v1.1.6.301 (REV46).

   У проекті виявилось 183 різні родини кнопок на 844 правила. Канон має ОДНУ.
   Найбільша з чужих — не модульна, а друга ГЛОБАЛЬНА система з
   css/cyber-components.css: `.btn-primary` (164 вживання в розмітці) і
   `.btn-ghost` (387). Разом 551 — це більше, ніж у самого `.kp-btn` (84).

   Тобто дві глобальні кнопки жили паралельно й розходились у геометрії:
       канон .kp-btn : min-height 40, радіус 8, padding 10/14, рамка контролю
       .btn-primary  : без min-height, радіус 11, padding 9/18, плюс світіння
       .btn-ghost    : без min-height, радіус 11, padding 9/16, колір тексту
                       приглушений, рамка --border (той самий роздільник, чий
                       контраст 1.16:1 — див. .298)

   Переписувати 551 місце в шаблонах не треба: достатньо, щоб легасі-імена
   означали ТУ САМУ кнопку. Тому вони просто додані до канонних селекторів.

   Модульні перекриття (68 правил для .btn-ghost, 38 для .btn-primary) мають
   вищу специфічність і діють як діяли — сторінки зі свідомим власним стилем не
   змінюються. Змінюється БАЗА: там, де кнопку ніхто не перевизначав, вона тепер
   канонна.
   ═══════════════════════════════════════════════════════════════════════════ */
.kp-btn,
.btn-primary,
.btn-ghost,
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kp-space-2);
  min-height: var(--kp-control-height-md);
  padding: 10px 14px;              /* канон дає саме ці числа, не крок шкали */
  border: var(--kp-border-width) solid var(--kp-color-border);
  border-radius: var(--kp-radius-md);
  background: var(--kp-color-surface);
  color: var(--kp-color-text);
  font-weight: var(--kp-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--kp-motion-normal) var(--kp-ease-standard),
              box-shadow var(--kp-motion-normal) var(--kp-ease-standard),
              background var(--kp-motion-normal) var(--kp-ease-standard),
              border-color var(--kp-motion-normal) var(--kp-ease-standard);
  touch-action: manipulation;
}
.btn-primary:hover,
.btn-ghost:hover,
.btn-icon:hover,
.kp-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--kp-shadow-sm);
}
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.btn-icon:focus-visible,
.kp-btn:focus-visible {
  outline: var(--kp-focus-ring-width) solid var(--kp-color-focus-ring);
  outline-offset: var(--kp-focus-ring-offset);
}
.kp-btn:disabled,
.kp-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.kp-btn--primary,
.btn-primary {
  background: var(--kp-accent);
  border-color: transparent;
  color: var(--kp-on-accent);
}
.kp-btn--soft {
  background: var(--kp-accent-soft);
  border-color: color-mix(in srgb, var(--kp-accent) 22%, var(--kp-color-border));
  color: var(--kp-color-text);
}
/* v1.1.6.298: прозора кнопка позначає себе ЛИШЕ рамкою, тож рамка мусить бути
   видимою: --kp-color-border (роздільник) дає на тлі сторінки 1.16:1, канонний
   колір контролю — 3.2:1 при порозі WCAG 3:1 для не-текстових елементів. */
.kp-btn--ghost,
.btn-ghost { background: transparent; border-color: var(--kp-color-control-border); }
.kp-btn--danger { color: var(--kp-color-danger); }
.kp-btn--icon,
.btn-icon {
  width: var(--kp-control-height-md);
  height: var(--kp-control-height-md);
  padding: 0;
  border-radius: 11px;
}
.kp-btn--small,
.kp-btn--sm {                      /* див. відхилення 5 */
  min-height: var(--kp-control-height-sm);
  padding: 7px 10px;
  font-size: var(--kp-text-xs);
}

.kp-form-field { display: grid; gap: 7px; }
.kp-form-field label {
  font-size: var(--kp-text-xs);
  font-weight: var(--kp-weight-bold);
  color: var(--kp-color-text-muted);
}
.kp-form-field input,
.kp-form-field textarea,
.kp-form-field select {
  width: 100%;
  min-height: var(--kp-control-height-md);
  padding: 11px var(--kp-space-3);
  border: var(--kp-border-width) solid var(--kp-color-control-border);
  border-radius: var(--kp-radius-md);
  background: var(--kp-color-surface);
  color: var(--kp-color-text);
  outline: none;
}
.kp-form-field textarea { min-height: 110px; resize: vertical; }
.kp-form-field input:focus-visible,
.kp-form-field textarea:focus-visible,
.kp-form-field select:focus-visible {
  outline: var(--kp-focus-ring-width) solid var(--kp-color-focus-ring);
  outline-offset: var(--kp-focus-ring-offset);
}


/* ══ ПОЛЕ ВВОДУ — ГЛОБАЛЬНА БАЗА ═══════════════════════════════════════════
   v1.1.6.302 (REV46).

   Перепис показав: `input`/`textarea`/`select` описані 109 разів у 34 файлах, і
   в цих описах **14 різних радіусів, 16 різних мінімальних висот, 12 різних
   падінгів**. Канон дає одне поле.

   Причина розсипу проста: глобальної бази для полів НЕ ІСНУВАЛО. `base.css` дає
   їм лише шрифт (`font-family: inherit`), а `css/kp-form.css`, попри загальну
   назву, описує рівно одну форму — створення спільноти. Тобто кожен модуль,
   якому знадобилось поле, малював його з нуля — або не малював, і тоді поле
   лишалось із типовим виглядом браузера: тонка сіра рамка, майже без радіуса,
   висота менша за поріг дотику.

   Тепер база є, і вона канонна: та сама геометрія, що в `.kp-form-field input`
   вище. Специфічність `input[type="…"]` — (0,1,1); усі 109 наявних описів мають
   таку саму або вищу і йдуть пізніше, тож свідомо оформлені поля не змінюються.
   Змінюються ті, які ніхто не оформлював.


   ⚠️ ЧОМУ `:where()`. Спершу я написав селектори прямо — `input[type="text"], …`.
   Це (0,1,1). Потім перевірив, а не повірив собі: серед 109 наявних описів
   знайшлось ПʼЯТЬ зі СЛАБШОЮ специфічністю — `.kp-input`, `.kp-comm-create-input`,
   `.kp-bcast-search-input` (0,1,0) і два голі `select`/`textarea` (0,0,1). Тобто
   моя «база» перекрила б поля, які хтось свідомо оформив — рівно та несподіванка,
   якої база робити не має.
   `:where()` обнуляє специфічність усього списку. Тепер це справді ПІДЛОГА: діє
   там, де поле не оформлював ніхто, і поступається будь-якому правилу.

   Типи перелічені поіменно навмисно: `checkbox`, `radio`, `file`, `range`,
   `color` мають власний вигляд, і накладати на них геометрію текстового поля —
   зіпсувати їх. `input:not([type])` теж тут: без атрибута браузер вважає поле
   текстовим.
   ═══════════════════════════════════════════════════════════════════════════ */
:where(
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="number"], input[type="tel"], input[type="url"], input[type="date"],
  input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"],
  input:not([type]), textarea, select
) {
  min-height: var(--kp-control-height-md);
  padding: 11px 12px;
  border: var(--kp-border-width) solid var(--kp-color-control-border);
  border-radius: var(--kp-radius-md);
  background: var(--kp-color-surface);
  color: var(--kp-color-text);
}
:where(textarea) { min-height: 110px; resize: vertical; }
:where(input, textarea)::placeholder { color: var(--kp-color-text-muted); }

/* Канон: на дотиковому вводі ціль не менша за --kp-target-min. */
@media (pointer: coarse) {
  .kp-btn { min-height: var(--kp-target-min); }
  .kp-btn--icon { min-width: var(--kp-target-min); height: var(--kp-target-min); }
}
@media (prefers-contrast: more) {
  .kp-btn,
  .kp-form-field input,
  .kp-form-field textarea,
  .kp-form-field select { border-width: 2px; }
}

/* ══ ШАР 2 · v1.1.6.293: БІЛЬШЕ НЕ ЗА ПРАПОРЦЕМ ═════════════════════════════
   `html[…]` дає (0,2,1) — вище за скоуповані `.kp-page--X .kp-card` (0,2,0),
   тож канон виграє незалежно від порядку підключення. `!important` у чужих
   файлах він НЕ перебиває — такі місця мають виправлятись у модульних кроках,
   а не глушитись звідси. */

.kp-card {
  background: var(--kp-color-surface);
  border: var(--kp-border-width) solid var(--kp-color-border);
  border-radius: var(--kp-radius-lg);
  box-shadow: var(--kp-shadow-sm);
  padding: var(--kp-space-5);      /* див. відхилення 4 */
  min-width: 0;                    /* канон: картка не розпирає грід */
}
@media (max-width: 480px) {
  .kp-card { border-radius: 14px; }
}
@media (prefers-contrast: more) {
  .kp-card { border-width: 2px; }
}

.kp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--kp-space-2);
  border: 0;
  border-radius: var(--kp-radius-pill);
  background: var(--kp-color-surface-muted);
  color: var(--kp-color-text-muted);
  font-size: var(--kp-text-xs);
  font-weight: var(--kp-weight-bold);
}
.kp-badge--accent {
  background: var(--kp-accent-soft);
  color: var(--n-accent-ink);
}
.kp-badge--success {
  background: color-mix(in srgb, var(--kp-color-success) 13%, transparent);
  color: var(--kp-color-success);
}
.kp-badge--warning {
  background: color-mix(in srgb, var(--kp-color-warning) 14%, transparent);
  color: var(--kp-color-warning);
}
.kp-badge--danger {
  background: color-mix(in srgb, var(--kp-color-danger) 12%, transparent);
  color: var(--kp-color-danger);
}