/* Токени сайту — ОДНЕ джерело на всі сторінки.
 *
 * ЩО БУЛО. Палітра лежала копіями у девʼяти HTML: home, privacy, terms, 404,
 * add, button-page, partner-page, santa-page, i/*, w/*. Кожен редизайн
 * означав девʼять однакових правок, і після першої ж пропущеної сторінка
 * лишалась у старій темі. Саме так сайт і застряг на «Дуеті» — кремовому тлі
 * з корал-градієнтом, — коли застосунок уже пів релізу як інший.
 *
 * ЩО ТЕПЕР. Кольори живуть тут, сторінки їх лише підключають. Місцевого
 * `:root` із кольорами в них більше немає й бути не має.
 *
 * ⚠️ ЦЕ ДЗЕРКАЛО `lib/theme.ts`, А НЕ ОКРЕМА ПАЛІТРА. Значення скопійовані
 * звідти один в один: перехід із лендінга в застосунок мусить читатись як той
 * самий продукт, а не як два схожі. Міняється тема — міняється і цей файл,
 * і в тому ж коміті.
 */
:root{
  /* Поверхні */
  --bg:#F7F4F6; --page:#EFEAED; --card:#FFFFFF; --cardHi:#F2EDF0;
  --ink:#1B1216; --soft:#6A5C63; --faint:#7A6C73; --line:#E9E1E5;

  /* Акцент — «Панч».
   *
   * ⚠️ `--a1`/`--a2` НЕ ГРАДІЄНТ. Вони лишились як імена, бо на них спирається
   * чимало правил, але тепер це два сусідні тони одного кольору: поверхня
   * читається як суцільна з ледь помітним обʼємом. Веселка з корала в рожеве
   * була найпершою ознакою «дизайну з генератора» — від неї відмовились у
   * застосунку (`docs/UI-PATTERNS.md` §1), і сайт іде за ним. */
  --a1:#FF4D7D; --a2:#F5386B;
  --accent:#FF4D7D; --accentText:#C2044D; --accentSoft:#FFE6ED; --accentInk:#FFFFFF;

  --success:#1E7A55; --successSoft:rgba(30,122,85,.12);
  --danger:#B0463E;
  --veil:rgba(255,255,255,.74); --frame:#E4DDE1;

  /* Другий, теплий колір — «корал».
   *
   * ⚠️ ЦЕ НЕ ДЕКОР І НЕ ДРУГИЙ АКЦЕНТ. Це перший колір людини з палітри
   * застосунку (`PERSON_LIGHT[0]` у `lib/theme.ts`), і сайт бере його рівно
   * там, де показує ЛЮДИНУ або її картку — щоб макет на лендінгу був того ж
   * кольору, що екран, який людина побачить.
   *
   * Імена лишились старі (`--peach*`), бо на них спираються 62 місця в
   * чотирьох файлах; переназвати їх — окрема правка, і робити її разом зі
   * зміною палітри означало б не мати змоги сказати, що саме зламалось. */
  --peachSoft:#FFE6DF; --peachInk:#8C4230; --peachSolid:#E06D51;

  /* Святкова поверхня картки «Скоро» — дзеркало `festiveStops()` із
     `lib/theme.ts`, один в один. Це не декор сайту, а колір реального екрана:
     макет у героєві показує ту саму картку, і розійтись їм не можна. Один тон
     у двох ступенях, а не веселка — обґрунтування там же, у theme.ts. */
  --festive1:#FFE0E5; --festive2:#FFD1D9;

  /* Тіні за стандартом iOS 26: низькі, широкі, ледь помітні. Колір —
     глибокий винний, а не сірий: на рожевих нейтралях сіра тінь брудна. */
  --shadow:0 24px 60px rgba(59,16,32,.10); --shadowSm:0 8px 24px rgba(59,16,32,.07);
  /* Це вже не сяйво, а контактна тінь того ж кольору, що кнопка. */
  --glow:0 10px 26px rgba(255,77,125,.24);
  --sheen:rgba(255,255,255,.55);
}

/* Темна — «майже чорний», а не OLED-нуль: тло на L≈0.15, картки на рівнях
   системних темних сірих iOS, і Панч притлумлено. Повне обґрунтування — у
   блоці `dark` в `lib/theme.ts`. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E0A0D; --page:#080507; --card:#20191E; --cardHi:#30272D;
    --ink:#FAF4F6; --soft:#A9A2A6; --faint:#999497; --line:#3B3137;

    --a1:#D64B6F; --a2:#C13E61;
    --accent:#D64B6F; --accentText:#F68CA1; --accentSoft:#3D1820; --accentInk:#FFFFFF;

    --success:#5CD091; --successSoft:rgba(92,208,145,.14);
    --danger:#E87166;
    --veil:rgba(0,0,0,.28); --frame:#2E262B;
    --peachSoft:#45231A; --peachInk:#F0AA91; --peachSolid:#F18267;
    --festive1:#37161D; --festive2:#4C1B27;

    --shadow:0 30px 80px rgba(0,0,0,.55); --shadowSm:0 10px 30px rgba(0,0,0,.4);
    --glow:0 10px 30px rgba(214,75,111,.28);
    --sheen:rgba(255,255,255,.10);
  }
}

/* Вертикальний ритм між секціями.
 *
 * ⚠️ Це не «ще один токен про всяк випадок»: `partner-page` і `button-page`
 * задають ним ВСІ відступи секцій. Він жив копією в їхніх локальних `:root`,
 * поїхав разом із палітрою — і сторінки злиплись, бо невизначена змінна не
 * ламається, а мовчки дає порожнє значення, тобто нуль. Ловить
 * `npm run check:palette`. */
:root{ --gap:clamp(56px,7vw,84px); }

/* Токени руху — дзеркало `lib/motion.ts`. Свого темпу сайт не вигадує:
   інакше перехід із лендінга в застосунок читається як інший продукт. */
:root{
  --d-instant:90ms; --d-fast:160ms; --d-base:240ms; --d-slow:340ms; --d-ambient:620ms;
  --e-enter:cubic-bezier(.33,1,.68,1);
  --e-exit:cubic-bezier(.32,0,.67,0);
  --e-move:cubic-bezier(.65,0,.35,1);
  --e-over:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- позначка Pro ----------
 *
 * Одна плашка на всі сторінки: біля фічі, яку дає Hintik Pro. Пульсує — щоб
 * її помітили в списку, — але ТИХО: масштаб на 6% і прозорість, без кольорових
 * спалахів. Гучніший пульс поруч із десятком рядків читається як реклама, а не
 * як позначка ціни.
 *
 * ⚠️ `prefers-reduced-motion` вимикає рух повністю: сама плашка лишається,
 * тобто зміст не втрачається — правило те саме, що в застосунку. */
.pro-badge{
  display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
  margin-left:8px;padding:3px 9px;border-radius:999px;
  background:var(--accentSoft);color:var(--accentText);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;
  animation:proPulse 2.6s var(--e-move) infinite;
}
.pro-badge svg{width:11px;height:11px;display:block}
@keyframes proPulse{
  0%,72%,100%{transform:scale(1);opacity:1}
  84%{transform:scale(1.06);opacity:.86}
}
@media (prefers-reduced-motion: reduce){
  .pro-badge{animation:none}
}