/* ─── Shared Components ─── */

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 800;
  line-height: 1;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.btn:active { transform: translateY(1px); }

/* sizes */
.btn--sm  { padding: 10px 24px; font-size: var(--text-sm); }
.btn--lg  { padding: 18px 52px; font-size: var(--text-lg); }
.btn--xl  { padding: 26px 80px; font-size: var(--text-xl); }

/* colours */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-btn);
}
.btn--accent:hover { background-color: var(--color-accent-hover); }

.btn--dark {
  background-color: var(--color-brown-dark);
  color: var(--color-text-on-dark);
}
.btn--dark:hover { background-color: #2a1e15; }

/* ── Tag pill ── */
.tag {
  display: inline-block;
  padding: 6px 16px;
  background-color: var(--color-accent-soft);
  color: var(--color-brown-dark);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--radius-pill);
}
.tag--sm { padding: 5px 14px; font-size: 0.7rem; }

/* ── Section header block (tag + h2 + sub) ── */
.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-12);
}
.section-header .tag { margin-bottom: var(--space-4); }
.section-header h2 {
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-brown-dark);
  margin-bottom: var(--space-4);
}
.section-header p {
  font-size: var(--text-lg);
  color: var(--color-brown-mid);
  line-height: 1.7;
}

/* ── Section title (centred h2 alone) ── */
.section-title {
  text-align: center;
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--color-brown-dark);
  margin-bottom: var(--space-12);
}