/* ============================================================
   ВуВу · ТЕМА «Perk» (тест) — по refero DESIGN.md
   northStar: electric lime on warm parchment paper
   Правила: лайм #beff50 — единственный заливной акцент; ink #14140f (не #000);
   радиусы 28px (карточки/кнопки), 9999 (пилюли/теги); НОЛЬ теней и градиентов;
   Inter 400/500; плотный трекинг -0.03em на 28px+; воздух 80–120px.
   Активна при html[data-theme="perk"]. Базовую тему не трогает.
   ============================================================ */

:root[data-theme="perk"]{
  --bg:#f5f5eb;          /* пергамент */
  --bg-2:#eeede1;
  --surface:#ffffff;
  --surface-2:#f5f5eb;
  --line:#e3e2d5;
  --line-soft:#eceadd;
  --ink:#14140f;         /* тёплый почти-чёрный (не #000) */
  --ink-2:#2c2c25;
  --muted:#6e6e64;
  --dim:#9a9a8f;
  --accent:#beff50;      /* электрик-лайм — только заливка */
  --accent-press:#aef23a;
  --accent-soft:#ecf9cd;
  --on-accent:#14140f;   /* тёмный текст на лайме */
  --shadow-sm:none; --shadow:none; --shadow-lg:none;
  --r-sm:14px; --r:18px; --r-lg:28px; --r-pill:9999px;
}

/* Типографика: одно семейство, веса 400/500, плотный трекинг */
[data-theme="perk"] h1,[data-theme="perk"] h2,[data-theme="perk"] h3,[data-theme="perk"] h4{
  font-family:var(--sans);font-weight:500;letter-spacing:-.03em}
[data-theme="perk"] .h-display{letter-spacing:-.035em;line-height:.92}
[data-theme="perk"] .brand{font-family:var(--sans);font-weight:500}
[data-theme="perk"] .hstep h3,[data-theme="perk"] .hstep__big,[data-theme="perk"] .metric b,
[data-theme="perk"] .hero__stat b,[data-theme="perk"] .marquee__item,[data-theme="perk"] .svc-section__title{
  font-family:var(--sans);font-weight:500}

/* Ноль теней и градиентов — тональный контраст */
[data-theme="perk"] .hero__glow,[data-theme="perk"] .cta__glow,
[data-theme="perk"] .svc-card::after,[data-theme="perk"] .info-card::before{display:none!important}
[data-theme="perk"] .svc-card,[data-theme="perk"] .metric,[data-theme="perk"] .info-card,
[data-theme="perk"] .cta{box-shadow:none!important}

/* Кнопки: лайм-заливка, радиус 28px, без теней */
[data-theme="perk"] .btn{border-radius:28px}
[data-theme="perk"] .btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:none;font-weight:500}
[data-theme="perk"] .btn--primary:hover{background:var(--accent-press);box-shadow:none;transform:translateY(-2px)}
[data-theme="perk"] .btn--ghost{border-color:var(--ink);color:var(--ink)}
[data-theme="perk"] .btn--ghost:hover{background:var(--ink);color:var(--bg)}

/* На светлых поверхностях лайм НЕ используется как текст — только ink/графит */
[data-theme="perk"] .kicker,[data-theme="perk"] .num-tag,
[data-theme="perk"] .svc-card__more,[data-theme="perk"] .nav a.is-active,
[data-theme="perk"] .crumbs a:hover,[data-theme="perk"] .prose a{color:var(--ink)}
[data-theme="perk"] .marquee__item::after{background:var(--ink)}
[data-theme="perk"] .nav a.is-active{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

/* Карточки: плоские, ховер — тональный + лайм-рамка */
[data-theme="perk"] .svc-card{border-radius:28px;padding:36px 32px 30px}
[data-theme="perk"] .svc-card:hover{transform:translateY(-4px);border-color:var(--accent);background:#fff}
[data-theme="perk"] .info-card:hover{border-color:var(--accent)}
[data-theme="perk"] .field input,[data-theme="perk"] .field textarea{border-radius:8px}

/* Активная навигация — лайм-подложка как тег */
[data-theme="perk"] .brand__dot{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}

/* Тёмные секции (CTA, сайд-скролл) — здесь лайм играет во всю силу */
[data-theme="perk"] .scroll-progress{background:var(--accent)}
[data-theme="perk"] .hstep__n{color:var(--accent)}
[data-theme="perk"] .hscroll__bar i,[data-theme="perk"] .hscroll__head .kicker{color:var(--accent)}
[data-theme="perk"] .hscroll__bar i{background:var(--accent)}
[data-theme="perk"] .hscroll__head .kicker::before{background:var(--accent)}
[data-theme="perk"] .cta{background:var(--ink)}
[data-theme="perk"] .cta .kicker{color:var(--accent)!important}
[data-theme="perk"] .field input:focus,[data-theme="perk"] .field textarea:focus{border-color:var(--accent)}
[data-theme="perk"] .consent input{accent-color:var(--accent)}

/* Секции-воздух чуть просторнее (editorial rhythm 80–120px) */
[data-theme="perk"] .section{padding:clamp(64px,10vw,120px) 0}

/* Тег «tag» и лайм-пилюля-эмфаза */
[data-theme="perk"] .tag:hover{border-color:var(--accent);background:var(--accent-soft)}
[data-theme="perk"] .callout{background:var(--accent-soft);border-color:#d6ee9e;color:var(--ink)}