/* ============================================================
   COMPONENTS — статические CSS-версии примитивов дизайн-системы
   «Без лишних цифр». Классы и значения повторяют React-компоненты
   из components/{forms,data} один в один, но без React-рантайма:
   маркетинговому сайту не нужен babel-standalone в браузере.

   Источник: Button.jsx, Card.jsx, Stat.jsx, Badge.jsx,
             Input.jsx, Textarea.jsx, Checkbox.jsx, Divider.jsx
   ============================================================ */

/* ---------------- Button ---------------- */
.bl-btn{
  --_bg: var(--brand);
  --_fg: var(--text-on-brand);
  --_bd: transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-weight:var(--weight-semibold);
  line-height:1; white-space:nowrap; text-decoration:none; cursor:pointer;
  border:1px solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-control);
  transition:var(--transition-control);
  -webkit-font-smoothing:antialiased; user-select:none;
}
.bl-btn:focus-visible{ outline:none; box-shadow:var(--ring); }
.bl-btn:active{ transform:translateY(0.5px); }
.bl-btn[disabled]{ cursor:not-allowed; opacity:.5; }
.bl-btn__ic{ display:inline-flex; flex:0 0 auto; }
.bl-btn__ic svg{ display:block; width:1em; height:1em; }

.bl-btn--sm{ height:34px; padding:0 14px; font-size:var(--text-sm); }
.bl-btn--md{ height:42px; padding:0 18px; font-size:var(--text-md); }
.bl-btn--lg{ height:50px; padding:0 24px; font-size:var(--text-lg); }
.bl-btn--full{ width:100%; }

.bl-btn--primary{ --_bg:var(--brand); --_fg:var(--text-on-brand); box-shadow:var(--shadow-xs); }
.bl-btn--primary:hover:not([disabled]){ --_bg:var(--brand-hover); }
.bl-btn--primary:active:not([disabled]){ --_bg:var(--brand-active); }

.bl-btn--secondary{ --_bg:var(--white); --_fg:var(--text-strong); --_bd:var(--border-strong); }
.bl-btn--secondary:hover:not([disabled]){ --_bg:var(--ink-50); --_bd:var(--ink-400); }
.bl-btn--secondary:active:not([disabled]){ --_bg:var(--ink-100); }

.bl-btn--ghost{ --_bg:transparent; --_fg:var(--text-brand); }
.bl-btn--ghost:hover:not([disabled]){ --_bg:var(--surface-brand-soft); }
.bl-btn--ghost:active:not([disabled]){ --_bg:var(--blue-100); }

/* На тёмной подложке (forest / ink) */
.bl-btn--on-dark{ --_bg:var(--white); --_fg:var(--blue-700); }
.bl-btn--on-dark:hover:not([disabled]){ --_bg:var(--blue-50); }
.bl-btn--outline-light{ --_bg:transparent; --_fg:var(--white); --_bd:rgba(255,255,255,.34); }
.bl-btn--outline-light:hover:not([disabled]){ --_bg:rgba(255,255,255,.10); --_bd:rgba(255,255,255,.55); }

/* ---------------- Card ---------------- */
.bl-card{
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-card); box-sizing:border-box;
  transition:box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.bl-card--pad{ padding:var(--pad-card); }
.bl-card--flat{ box-shadow:none; }
.bl-card--raised{ box-shadow:var(--shadow-sm); }
.bl-card--floating{ box-shadow:var(--shadow-md); }
.bl-card--interactive{ cursor:pointer; }
.bl-card--interactive:hover{ box-shadow:var(--shadow-md); border-color:var(--border-strong); }
.bl-card--brand{ background:var(--surface-brand-soft); border-color:var(--blue-200); }
.bl-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.bl-card--accent{ border-top-width:3px; }
.bl-card--accent-gold{ border-top-color:var(--accent-gold); }
.bl-card--accent-forest{ border-top-color:var(--secondary); }
.bl-card--accent-blue{ border-top-color:var(--brand); }
.bl-card__titles{ display:flex; flex-direction:column; gap:2px; }
.bl-card__title{ margin:0; font-family:var(--font-sans); font-size:var(--text-lg); font-weight:var(--weight-semibold); color:var(--text-strong); }
.bl-card__sub{ margin:0; font-size:var(--text-sm); color:var(--text-muted); }

/* ---------------- Stat ---------------- */
.bl-stat{ display:flex; flex-direction:column; gap:8px; font-family:var(--font-sans); }
.bl-stat__label{ font-size:var(--text-sm); color:var(--text-muted); font-weight:var(--weight-medium); margin:0; }
.bl-stat__value{ font-family:var(--font-numeric); font-weight:var(--weight-semibold); color:var(--text-strong); line-height:1; letter-spacing:-0.01em; font-variant-numeric:tabular-nums; margin:0; }
.bl-stat--sm .bl-stat__value{ font-size:22px; }
.bl-stat--md .bl-stat__value{ font-size:30px; }
.bl-stat--lg .bl-stat__value{ font-size:40px; }
.bl-stat__unit{ font-family:var(--font-sans); font-weight:var(--weight-medium); color:var(--text-muted); font-size:.5em; margin-left:4px; }
.bl-stat__foot{ display:flex; align-items:center; gap:8px; }
.bl-stat__delta{ display:inline-flex; align-items:center; gap:3px; font-size:var(--text-sm); font-weight:var(--weight-semibold); font-variant-numeric:tabular-nums; }
.bl-stat__delta svg{ width:15px; height:15px; }
.bl-stat__delta--up{ color:var(--positive-600); }
.bl-stat__delta--down{ color:var(--negative-600); }
.bl-stat__note{ font-size:var(--text-sm); color:var(--text-subtle); }

/* ---------------- Badge ---------------- */
.bl-badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-sans);
  font-size:var(--text-xs); font-weight:var(--weight-semibold); line-height:1;
  padding:4px 9px; border-radius:var(--radius-pill); white-space:nowrap;
}
.bl-badge--lg{ font-size:var(--text-sm); padding:6px 12px; }
.bl-badge__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.bl-badge--neutral{ background:var(--ink-100); color:var(--ink-600); }
.bl-badge--brand{ background:var(--surface-brand-soft); color:var(--blue-700); }
.bl-badge--positive{ background:var(--positive-50); color:var(--positive-600); }
.bl-badge--warning{ background:var(--warning-50); color:var(--warning-600); }
.bl-badge--info{ background:var(--info-50); color:var(--info-600); }
.bl-badge--solid.bl-badge--brand{ background:var(--brand); color:var(--white); }

/* ---------------- Divider ---------------- */
.bl-divider{ border:0; border-top:1px solid var(--border-default); margin:0; }

/* ---------------- Fields ---------------- */
.bl-field{ display:flex; flex-direction:column; gap:6px; font-family:var(--font-sans); }
.bl-field__label{ font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--text-strong); }
.bl-field__req{ color:var(--negative-500); margin-left:2px; }

.bl-input{
  width:100%; font-family:inherit; font-size:var(--text-md); color:var(--text-strong);
  background:var(--white); border:1px solid var(--border-default);
  border-radius:var(--radius-control); height:42px; padding:0 14px;
  transition:var(--transition-control); box-sizing:border-box;
}
.bl-input::placeholder{ color:var(--text-subtle); }
.bl-input:hover:not(:disabled){ border-color:var(--border-strong); }
.bl-input:focus{ outline:none; border-color:var(--border-focus); box-shadow:var(--ring); }
.bl-input--error{ border-color:var(--negative-500); }

.bl-textarea{
  width:100%; font-family:var(--font-sans); font-size:var(--text-md); color:var(--text-strong);
  background:var(--white); border:1px solid var(--border-default);
  border-radius:var(--radius-control); padding:10px 14px; line-height:var(--leading-normal);
  transition:var(--transition-control); box-sizing:border-box; resize:vertical; min-height:96px;
}
.bl-textarea::placeholder{ color:var(--text-subtle); }
.bl-textarea:hover:not(:disabled){ border-color:var(--border-strong); }
.bl-textarea:focus{ outline:none; border-color:var(--border-focus); box-shadow:var(--ring); }

.bl-check{ display:inline-flex; align-items:flex-start; gap:10px; font-family:var(--font-sans); cursor:pointer; }
.bl-check input{ position:absolute; opacity:0; width:0; height:0; }
.bl-check__box{
  flex:0 0 auto; width:20px; height:20px; margin-top:1px;
  border:1.5px solid var(--border-strong); border-radius:var(--radius-xs);
  background:var(--white); display:inline-flex; align-items:center; justify-content:center;
  color:var(--white); transition:var(--transition-control);
}
.bl-check__box svg{ width:14px; height:14px; opacity:0; transform:scale(.6); transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.bl-check input:checked + .bl-check__box{ background:var(--brand); border-color:var(--brand); }
.bl-check input:checked + .bl-check__box svg{ opacity:1; transform:scale(1); }
.bl-check input:focus-visible + .bl-check__box{ box-shadow:var(--ring); }
.bl-check:hover input:not(:disabled):not(:checked) + .bl-check__box{ border-color:var(--brand); }
.bl-check__label{ font-size:var(--text-sm); color:var(--text-body); line-height:1.5; }