/* Ported from app/design-system/components/{Button,Card,MainTitle,TitleBadge} */

/* ── Button ── */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-base);
  border-radius: var(--radius-sm);
  height: 40px;
}
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); height: 32px; }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--font-size-lg); height: 48px; }

.btn--primary { background: var(--color-primary-500); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); }
.btn--primary:hover { box-shadow: var(--shadow-md); background: var(--color-neutral-900); }
.btn--secondary { background: transparent; color: var(--color-text-primary); border: 2px solid var(--color-border-secondary); }
.btn--secondary:hover { border-color: var(--color-primary-500); color: var(--color-primary-500); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }

.btn .btn-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Card ── */
.card { position: relative; border-radius: var(--radius-xl); background: var(--color-bg-primary); transition: all var(--transition-base); }
.card--elevated { box-shadow: var(--shadow-sm); border: 1px solid var(--color-border-tertiary); }
.card--elevated:hover { box-shadow: var(--shadow-md); }
.card--outlined { border: 2px solid var(--color-border-secondary); }
.card--outlined:hover { border-color: var(--color-border-primary); }
.card--glass { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: var(--shadow-md); }
.card--pad-sm { padding: var(--space-4); }
.card--pad-md { padding: var(--space-6); }
.card--pad-lg { padding: var(--space-8); }

/* ── MainTitle ── */
.main-title { font-family: var(--font-display); line-height: 1.1; color: var(--text); }
.main-title span { color: var(--primary); }
/* NOTE: <em> inside a heading is intentionally left alone here — the
   global h1 em / h2 em rules in base.css (ported from app.css) already
   apply italic + primary color + bold, matching source exactly. An
   earlier version of this rule wrongly included `em` and forced
   font-style back to normal, killing the italic. */

/* ── TitleBadge ── */
.title-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-secondary-100);
  color: var(--color-secondary-500);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--color-secondary-200);
}


.title-badge:before,
.title-badge:after {
  content: "";
  display: block;
  position: absolute;
  width: 82px;
  height: 1px;
  top: 50%;
}

.title-badge:before {
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF1EB 100%);
}
.title-badge:after {
  right: 0;
  transform: translateX(100%);
  background: linear-gradient(90deg, #FFF1EB 0%, rgba(255, 255, 255, 0.00) 100%);
}