/* ===================================================================
   Canonical Marbl buttons — ui-items §1-3
   Extracted from ui-items/preview.html, 23 April 2026 (subscribe rollout)
   Source of truth. Consumers: subscribe.marbl.codes, luma, atlas, etc.
   =================================================================== */

/* ═══════════════════════════════════════════════════════
   BUTTONS — SHARED BASE
   ═══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs, 10px);
  height: 48px;
  padding: 0 28px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius, 10px);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* Icon circle */
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-2xl, 28px);
  height: var(--icon-2xl, 28px);
  border-radius: var(--radius-circle, 50%);
  flex-shrink: 0;
  transition: background 0.3s ease;
}
.btn__icon svg {
  width: var(--icon-sm, 14px);
  height: var(--icon-sm, 14px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── FILL UP (outline, fills from bottom) ── */
.btn--fill-up {
  background: transparent;
  color: var(--marbl-ember, #F35226);
  border: 1px solid var(--marbl-ember, #F35226);
  z-index: 1;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.btn--fill-up::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--marbl-ember, #F35226);
  border-radius: var(--radius, 10px);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn--fill-up .btn__icon { background: var(--marbl-ember-10, rgba(243,82,38,0.1)); color: var(--marbl-ember, #F35226); }
.btn--fill-up:hover::before { transform: scaleY(1); }
.btn--fill-up:hover { color: var(--marbl-charcoal-darkest, #131112); border-color: var(--marbl-ember, #F35226); }
.btn--fill-up:hover .btn__icon { background: var(--marbl-black-15, rgba(0,0,0,0.15)); color: var(--marbl-charcoal-darkest, #131112); }
.btn--fill-up:hover .btn__icon svg { transform: rotate(45deg); }

/* ── SOLID (filled ember, darkens on hover) ── */
.btn--solid {
  background: var(--marbl-ember, #F35226);
  color: var(--marbl-charcoal-darkest, #131112);
  border: 1px solid var(--marbl-ember, #F35226);
  z-index: 1;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.btn--solid::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--marbl-ember-dark, #BB2F09);
  border-radius: var(--radius, 10px);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn--solid .btn__icon { background: var(--marbl-black-15, rgba(0,0,0,0.15)); color: var(--marbl-charcoal-darkest, #131112); }
.btn--solid:hover::before { transform: scaleY(1); }
.btn--solid:hover { color: var(--marbl-white, #fff); border-color: var(--marbl-ember-dark, #BB2F09); }
.btn--solid:hover .btn__icon { background: var(--marbl-white-15, rgba(255,255,255,0.15)); color: var(--marbl-white, #fff); }
.btn--solid:hover .btn__icon svg { transform: rotate(45deg); }

/* ── OUTLINE (white border, goes ember) ── */
.btn--outline {
  background: transparent;
  color: var(--marbl-white-85, rgba(255,255,255,0.85));
  border: 1px solid var(--marbl-white-15, rgba(255,255,255,0.15));
  transition: border-color 0.2s ease, color 0.2s ease;
}
.btn--outline .btn__icon { background: var(--marbl-white-06, rgba(255,255,255,0.06)); color: var(--marbl-white-85, rgba(255,255,255,0.85)); }
.btn--outline:hover { border-color: var(--marbl-ember, #F35226); color: var(--marbl-ember, #F35226); }
.btn--outline:hover .btn__icon { background: var(--marbl-ember-10, rgba(243,82,38,0.1)); color: var(--marbl-ember, #F35226); }
.btn--outline:hover .btn__icon svg { transform: rotate(45deg); }

/* ── GHOST (text + arrow, no bg/border) ── */
.btn--ghost {
  background: transparent;
  color: var(--marbl-white-70, rgba(255,255,255,0.7));
  height: auto;
  padding: 14px 0;
  border-radius: 0;
  transition: color 0.2s ease;
}
.btn--ghost .btn__icon { background: var(--marbl-white-06, rgba(255,255,255,0.06)); color: var(--marbl-white-70, rgba(255,255,255,0.7)); width: var(--icon-3xl, 32px); height: var(--icon-3xl, 32px); }
.btn--ghost:hover { color: var(--marbl-ember, #F35226); }
.btn--ghost:hover .btn__icon { background: var(--marbl-ember-10, rgba(243,82,38,0.1)); color: var(--marbl-ember, #F35226); }
.btn--ghost:hover .btn__icon svg { transform: rotate(45deg); }

.btn--ghost-text {
  background: transparent;
  color: var(--marbl-white-70, rgba(255,255,255,0.7));
  height: auto;
  padding: 14px 0;
  border-radius: 0;
  transition: color 0.2s ease;
  gap: 0;
}
.btn--ghost-text:hover { color: var(--marbl-ember, #F35226); }

/* ── Read More (right arrow, slides right on hover) ── */
.btn--read-more {
  background: transparent;
  color: var(--marbl-white-70, rgba(255,255,255,0.7));
  height: auto;
  padding: 14px 0;
  border-radius: 0;
  transition: color 0.2s ease;
}
.btn--read-more .btn__icon { background: var(--marbl-white-06, rgba(255,255,255,0.06)); color: var(--marbl-white-70, rgba(255,255,255,0.7)); width: var(--icon-3xl, 32px); height: var(--icon-3xl, 32px); }
.btn--read-more:hover { color: var(--marbl-ember, #F35226); }
.btn--read-more:hover .btn__icon { background: var(--marbl-ember-10, rgba(243,82,38,0.1)); color: var(--marbl-ember, #F35226); }
.btn--read-more:hover .btn__icon svg { transform: translateX(3px); }

/* ── MINI (compact height — uses --gap-2xs gap, --radius-sm radius) ── */
.btn--mini {
  height: 36px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 600;
  gap: var(--gap-2xs, 8px);
  border-radius: var(--radius-sm, 8px);
}
.btn--mini::before { border-radius: var(--radius-sm, 8px) !important; }
.btn--mini .btn__icon { width: var(--icon-xl, 22px); height: var(--icon-xl, 22px); }
.btn--mini .btn__icon svg { width: var(--icon-xs, 11px); height: var(--icon-xs, 11px); }

/* ═══════════════════════════════════════════════════════
   ICON BUTTONS (icon left or right with text — no circle bg)
   ═══════════════════════════════════════════════════════ */
.btn__icon--bare {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.btn__icon--bare svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════════════════════
   ICON-ONLY BUTTONS
   ═══════════════════════════════════════════════════════ */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius, 10px);
  border: 1px solid var(--marbl-white-15, rgba(255,255,255,0.15));
  background: transparent;
  color: var(--marbl-white-70, rgba(255,255,255,0.7));
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.btn-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-icon:hover {
  border-color: var(--marbl-ember, #F35226);
  color: var(--marbl-ember, #F35226);
}
.btn-icon--circle { border-radius: var(--radius-circle, 50%); }
.btn-icon--filled {
  background: var(--marbl-ember, #F35226);
  border-color: var(--marbl-ember, #F35226);
  color: var(--marbl-charcoal-darkest, #131112);
  transition: background 0.15s ease, filter 0.15s ease;
}
.btn-icon--filled:hover {
  background: var(--marbl-ember-dark, #BB2F09);
  border-color: var(--marbl-ember-dark, #BB2F09);
  color: var(--marbl-white, #fff);
  filter: none;
}
/* Mini icon button — 40px outer (Marbl size token alignment, 30 Apr 2026).
   Was 36/16/8 — non-token values. Now --gap-md / --text-lg / --radius. */
.btn-icon--mini {
  width: var(--gap-md, 40px);
  height: var(--gap-md, 40px);
  border-radius: var(--radius, 10px);
}
.btn-icon--mini svg {
  width: var(--text-lg, 18px);
  height: var(--text-lg, 18px);
}
.btn-icon--mini.btn-icon--circle { border-radius: var(--radius-circle, 50%); }