/* ============================================================
   Я зову — альтернативное оформление «Праздник»
   ------------------------------------------------------------
   Второе визуальное направление для сравнения. Включается
   переключателем в левом нижнем углу (это контрол прототипа,
   на живом сайте его не будет).

   Основное направление «Бумага» намеренно тихое: интерфейс
   не должен спорить с каталогом разноцветных приглашений.
   Здесь ставка обратная — бодрый, «приложенческий» вид:
   белый фон, малиновый акцент, круглые кнопки, геометрический
   гротеск в заголовках.

   Важно: сами приглашения не меняются ни на йоту. Тема трогает
   только хром — доказательство того, что палитра сайта и палитры
   шаблонов живут в разных слоях.
   ============================================================ */

:root[data-skin="prazdnik"]{
  --paper:#FFFFFF;
  --paper-2:#FFF2EC;
  --card:#FFFFFF;

  --ink:#1E1A2E;
  /* Серые расставлены по контрасту, а не на глаз: 15 / 7 / 4.7.
     Было #5B5470 и #8C84A0, и второй давал 3.24 на врезке при
     норме 4.5 — см. tokens.css, там же почему. */
  --ink-2:#564F6A;
  --ink-3:#726988;

  --rule:#F0E7EE;
  --rule-2:#DFD3DE;

  /* МАЛИНОВЫЙ ПОТЕМНЕЛ НА ПОЛТОНА

     Было #DE2F57. На чистом белом он давал ровно 4.52 — впритык,
     — а на своих же подложках проваливался: 4.12 на --paper-2,
     3.98 на --brand-soft. Это цвет ссылок, наведения и белых
     букв на кнопке «В корзину»; белое на нём читалось теми же
     4.52.

     Потемнение чинит оба конца сразу: и малиновые буквы на
     светлом, и белые буквы на малиновом. Малиновым он при этом
     остался — тон и насыщенность не тронуты, сдвинута светлота. */
  --brand:#D12149;
  --brand-2:#C22648;
  --brand-soft:#FFECF1;
  --amber:#E8930C;        /* солнечный второй акцент */
  --amber-soft:#FFF3DC;
  --brick:#C4462F;
  --good:#1E9E6A;         /* «придут» не должно совпадать с малиновым брендом */
  --good-soft:#E3F6EE;
  /* Буквы поверх -soft: тот же тон, читаемая насыщенность.
     Почему исходные не годились — см. tokens.css. */
  --good-ink:#177B53;
  --amber-ink:#996108;
  /* Буквы поверх заливки брендом. Малиновый тёмный — буквы
     светлые. Зачем переменная, а не правило в base.css, —
     см. tokens.css. */
  --on-brand:#FFF7F9;
  /* Роли кнопок в «Празднике». Зачем они и как подобраны —
     в tokens.css, у объявления --extra-soft. */
  --extra-soft:#F4EFF8; --extra-ink:#4A3F66;
  --up-soft:#CFE9DA;    --up-ink:#2E684A;

  /* Лиловый — только для конфетти.

     Больше его на сайте нет нигде, и это не упущение: в палитре
     три акцента (бренд, янтарь, зелёный), и все три что-то
     значат. Конфетти не значат ничего — они разноцветные по
     своей природе, и третьего-четвёртого цвета им не хватало.
     Отдельная переменная, а не число в правиле: тёмной теме
     нужен свой, посветлее. */
  --lilac:#C2A9E6;

  /* ============================================================
     ПОЛОСА ПРИЗЫВА ПЕРЕД ПОДВАЛОМ
     ------------------------------------------------------------
     Полоса была залита брендом целиком: красный прямоугольник во
     всю ширину и белая кнопка на нём. Это единственное место на
     сайте, где фирменный цвет работал ФОНОМ, а не кнопкой, — то
     есть седьмая роль сверх четырёх заведённых, и вдобавок самая
     громкая на странице.

     Теперь наоборот: полоса светлая, а красная на ней ровно одна
     вещь — кнопка. Ради этого и заводились роли.

     ПОЧЕМУ ЗДЕСЬ ПЕРЕМЕННЫЕ, А НЕ ЧИСЛА ИЗ МАКЕТА

     Числа в задании даны для одного случая — светлого
     «Праздника», и в нём они стоят ровно так, как присланы.
     Написать их прямо в правилах значило бы получить тёмно-синий
     заголовок #111538 на почти чёрном фоне в тёмной теме: макет
     про неё ничего не знает, а человек, у которого она включена,
     увидел бы нечитаемую полосу. Поэтому у полосы своя семёрка
     переменных, и каждая палитра называет их сама.
     ============================================================ */
  --final-a:#FFF0EC; --final-b:#FDF0F0; --final-c:#F9EEF3;
  --final-edge:#F0D9DF;
  --final-ink:#111538; --final-ink-2:#5D5877;
  --final-line:#D8788E; --final-gold:#EBA83F;

  --shadow-s:0 1px 2px rgba(30,26,46,.06);
  --shadow-m:0 4px 10px -4px rgba(222,47,87,.16), 0 16px 34px -20px rgba(30,26,46,.4);
  --shadow-l:0 8px 20px -8px rgba(222,47,87,.18), 0 30px 60px -30px rgba(30,26,46,.5);

  --serif:"Unbounded","Onest","Segoe UI",system-ui,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root[data-skin="prazdnik"]:not([data-theme="light"]){
    --paper:#15121C;
    --paper-2:#1F1A28;
    --card:#241E2E;
    --ink:#F4EFF6;
    --ink-2:#B4AAC2;
    --ink-3:#8F879D;
    --rule:#332B3E;
    --rule-2:#463B54;
    --brand:#FF6E8E;
    --brand-2:#FF8AA5;
    --brand-soft:#331823;
    --amber:#F0B357;
    --amber-soft:#32250F;
    /* ОТКАЗ ТОЖЕ СВЕТЛЕЕТ

       Здесь --brick не переопределялся вовсе, и тёмный
       «Праздник» держал светлый #C4462F — рыжий кирпич на
       почти чёрной карточке, 3.28 при норме 4.5. Это цвет
       всех ошибок сайта: рамка незаполненного поля, строка
       «впишите почту», счётчик знаков на пределе, кнопка
       «Не смогу». То есть хуже всего читалось ровно то,
       что человек обязан прочесть. */
    --brick:#E8836F;
    --good:#5AD3A1;
    --good-soft:#123329;
    --good-ink:#5AD3A1;
    --amber-ink:#F0B357;
    --on-brand:#15121C;
    --extra-soft:#2E2540; --extra-ink:#CDBCE6;
    --up-soft:#14302A;    --up-ink:#79D2AC;
    --lilac:#B79BE0;
    --final-a:#241B21; --final-b:#201A1F; --final-c:#1E1A22;
    --final-edge:#3A2E35;
    --final-ink:#F2EAE2; --final-ink-2:#B3A7AC;
    --final-line:#B9657E; --final-gold:#D99E42;
  }
}
:root[data-skin="prazdnik"][data-theme="dark"]{
  --paper:#15121C; --paper-2:#1F1A28; --card:#241E2E;
  --ink:#F4EFF6; --ink-2:#B4AAC2; --ink-3:#8F879D;
  --rule:#332B3E; --rule-2:#463B54;
  --brand:#FF6E8E; --brand-2:#FF8AA5; --brand-soft:#331823;
  --amber:#F0B357; --amber-soft:#32250F; --brick:#E8836F;
  --good:#5AD3A1; --good-soft:#123329;
  --good-ink:#5AD3A1; --amber-ink:#F0B357;
  --on-brand:#15121C;
  --extra-soft:#2E2540; --extra-ink:#CDBCE6;
  --up-soft:#14302A;    --up-ink:#79D2AC;
  --lilac:#B79BE0;
  --final-a:#241B21; --final-b:#201A1F; --final-c:#1E1A22;
  --final-edge:#3A2E35;
  --final-ink:#F2EAE2; --final-ink-2:#B3A7AC;
  --final-line:#B9657E; --final-gold:#D99E42;
}

/* ---------- форма: скруглённая, «приложенческая» ---------- */
[data-skin="prazdnik"] .btn{border-radius:100px;font-weight:600;letter-spacing:.005em}
[data-skin="prazdnik"] .f input,
[data-skin="prazdnik"] .f select,
[data-skin="prazdnik"] .fld input,
[data-skin="prazdnik"] .fld select,
[data-skin="prazdnik"] .fld textarea,
[data-skin="prazdnik"] .pay-field input,
[data-skin="prazdnik"] .promo input,
[data-skin="prazdnik"] .share input,
[data-skin="prazdnik"] .linkbox input,
[data-skin="prazdnik"] .b2b-form input{border-radius:10px}
[data-skin="prazdnik"] .tier,
[data-skin="prazdnik"] .quote,
[data-skin="prazdnik"] .tile,
[data-skin="prazdnik"] .bump,
[data-skin="prazdnik"] .bm-opt,
[data-skin="prazdnik"] .get,
[data-skin="prazdnik"] .file,
[data-skin="prazdnik"] .rev,
[data-skin="prazdnik"] .guests,
[data-skin="prazdnik"] .ev,
[data-skin="prazdnik"] .sum,
[data-skin="prazdnik"] .editor,
[data-skin="prazdnik"] .b2b,
[data-skin="prazdnik"] .cat-facts,
[data-skin="prazdnik"] .buy,
[data-skin="prazdnik"] .methods label,
[data-skin="prazdnik"] .plan label,
[data-skin="prazdnik"] .side section,
[data-skin="prazdnik"] .scroll,
[data-skin="prazdnik"] .upsell{border-radius:14px}
[data-skin="prazdnik"] .stats{border-radius:14px;overflow:hidden}
[data-skin="prazdnik"] .styles button,
[data-skin="prazdnik"] .seg button,
[data-skin="prazdnik"] .tools button,
[data-skin="prazdnik"] .promo button,
[data-skin="prazdnik"] .pv-tabs,
[data-skin="prazdnik"] .pv-switch{border-radius:100px}
[data-skin="prazdnik"] .pv-tabs button,
[data-skin="prazdnik"] .pv-switch button{border-radius:100px}

/* ---------- заголовки: геометрический гротеск вместо антиквы ---------- */
[data-skin="prazdnik"] h1,
[data-skin="prazdnik"] h2,
[data-skin="prazdnik"] .tier h3,
[data-skin="prazdnik"] .panel-h h2{letter-spacing:-.02em;font-weight:600}
[data-skin="prazdnik"] h1{line-height:1.12}
[data-skin="prazdnik"] .step .n,
[data-skin="prazdnik"] .count b,
[data-skin="prazdnik"] .stat b,
[data-skin="prazdnik"] .sum .total b,
[data-skin="prazdnik"] .tier .price,
[data-skin="prazdnik"] .g-sum b,
[data-skin="prazdnik"] .cat-facts b{font-family:var(--sans);font-weight:700;letter-spacing:-.02em}

/* ---------- герой: цветная подложка вместо чистой бумаги ---------- */
[data-skin="prazdnik"] .hero{
  background:
    radial-gradient(ellipse 60% 70% at 88% 0%, rgba(222,47,87,.08), transparent 65%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(232,147,12,.09), transparent 65%);
}
/* ---------- маркер под заголовком ----------------------------------
   Подложка была ровным прямоугольником в 28% высоты строки — то
   есть аккуратной плашкой, которую глаз читает как элемент
   интерфейса и перестаёт замечать через секунду.

   Теперь это след маркера: полоса чуть толще, с наклонным началом
   и концом, и она прочерчивается один раз при загрузке — слева
   направо, как рукой. Ровно тот жест, которым на бумажном
   приглашении подчёркивают главное, и ровно то обещание, которое
   даёт первый экран: здесь всё живое.

   ПОЧЕМУ box-decoration-break

   Заголовок переносится, и без него подложка рисуется одним
   прямоугольником на все строки сразу — вместе с пустотой справа
   от короткой строки. С clone каждая строка получает свой след,
   и прочерчиваются они по очереди.

   ПОЧЕМУ ОДИН РАЗ, А НЕ ПО КРУГУ

   Заголовок — не индикатор. Полоса, которая ездит туда-сюда всё
   время, пока человек заполняет форму, мешает ему заполнять
   форму. */
[data-skin="prazdnik"] .hero h1 em{
  color:var(--brand);
  background-image:linear-gradient(180deg,
    transparent 62%,
    var(--brand-soft) 62%,
    var(--brand-soft) 94%,
    transparent 94%);
  background-repeat:no-repeat;
  background-size:100% 100%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:0 .06em;
  animation:yz-marker .75s cubic-bezier(.2,.7,.3,1) .25s both;
}
@keyframes yz-marker{
  from{background-size:0 100%}
  to{background-size:100% 100%}
}
@media (prefers-reduced-motion:reduce){
  [data-skin="prazdnik"] .hero h1 em{animation:none;background-size:100% 100%}
}
[data-skin="prazdnik"] .logo .mark{background:var(--brand)}
[data-skin="prazdnik"] .logo .word{font-family:var(--sans);font-weight:700;letter-spacing:-.03em}

/* акцентные тарифы и допродажи заметнее */
[data-skin="prazdnik"] .tier.main{box-shadow:var(--shadow-m);border-width:2px}
[data-skin="prazdnik"] .step.accent h3::after{border-radius:100px}
[data-skin="prazdnik"] .tag,
[data-skin="prazdnik"] .ev .badge{font-weight:500}

/* Переключатели переехали в полосу прототипа над шапкой —
   её стили лежат в base.css рядом с остальным общим хромом. */
[data-skin="prazdnik"] .burger{border-radius:100px}
[data-skin="prazdnik"] .cookie{border-radius:14px}
/* Скругление последней кнопки переехало в base.css: теперь
   она круглая во всех оформлениях, и второго числа для того же
   скругления не нужно. */