/* BubaLab — переиспользуемые компоненты. Подключай ПОСЛЕ base.css. */

/* ---- Кнопки ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:600;font-size:15px;line-height:1;
  padding:12px 22px;border-radius:var(--radius-pill);
  border:1.5px solid transparent;cursor:pointer;
  transition:transform var(--t),background var(--t),color var(--t),border-color var(--t);
  text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--indigo);color:#fff}
.btn-primary:hover{background:#16215a;color:#fff}
.btn-teal{background:var(--teal);color:#fff}
.btn-teal:hover{background:#11a9b0;color:#fff}
.btn-ghost{background:transparent;color:var(--indigo);border-color:var(--indigo-25)}
.btn-ghost:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}

/* ---- Переключатель языка ---- */
.lang-toggle{
  border:1.5px solid var(--indigo-25);background:transparent;color:var(--indigo);
  font-weight:600;font-size:13px;letter-spacing:.04em;
  padding:7px 14px;border-radius:var(--radius-pill);transition:var(--t-fast);
}
.lang-toggle:hover{background:var(--indigo);color:#fff;border-color:var(--indigo)}

/* ---- Иконочные кнопки / соцсети ---- */
.icon-btn{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--border);color:var(--indigo);transition:var(--t);
}
.icon-btn:hover{background:var(--indigo);color:#fff;transform:translateY(-2px);border-color:var(--indigo);text-decoration:none}
.icon-btn svg{width:22px;height:22px;fill:currentColor}

/* ---- Бейдж ---- */
.badge{
  display:inline-block;font-weight:600;font-size:clamp(15px,2.6vw,18px);
  letter-spacing:.18em;color:var(--teal);text-transform:uppercase;
  border:1.5px solid var(--teal-40);border-radius:var(--radius-pill);padding:8px 22px;
}

/* ---- Вордмарк (временный логотип; заменить позже на assets/images/logo.svg) ---- */
.wordmark{font-weight:800;letter-spacing:-.02em;line-height:1}
.wordmark .b{color:var(--indigo)}
.wordmark .l{color:var(--teal)}