/* ═══════════════════════════════════════════════════════════════════════
   EstateHome — UI Components (public landing surface)
   Reusable component classes built on the design tokens (tokens.css). All
   classes are namespaced `.eh-*` so they never collide with existing landing
   styles. Load AFTER tokens.css. Doctrine: calm, one warm accent, 1px borders,
   little/no shadow, outline icons, whitespace before containers.
   ═══════════════════════════════════════════════════════════════════════ */

/* Eyebrow — mono, uppercase, muted (section kicker). */
.eh-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 500;
}

/* Buttons — black primary, white secondary, one accent variant. */
.eh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 500;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.eh-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(180, 116, 79, 0.30); /* --accent at 30% */
}
.eh-btn--primary { background: var(--text); color: var(--surface); }
.eh-btn--primary:hover { opacity: 0.9; }
.eh-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.eh-btn--secondary:hover { background: var(--hover); }
/* Accent variant — reserve for the single most important CTA on a page. */
.eh-btn--accent { background: var(--accent); color: var(--surface); }
.eh-btn--accent:hover { background: var(--accent-hover); }

/* Card — white, 1px border, generous padding, no/low shadow. */
.eh-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
}

/* Badge — small pill; status carries meaning, not decoration. */
.eh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--surface);
}
.eh-badge--success { color: var(--success); background: var(--success-soft); border-color: transparent; }
.eh-badge--pending { color: var(--pending); background: var(--pending-soft); border-color: transparent; }
.eh-badge--accent  { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }

/* Link — the one accent, sparingly. */
.eh-link { color: var(--accent); text-underline-offset: 2px; }
.eh-link:hover { color: var(--accent-hover); }

/* Section — full-bleed band + centered container with generous rhythm. */
.eh-section { width: 100%; padding-block: 112px; }
.eh-section--muted { background: var(--hover); }
.eh-section--surface { background: var(--surface); }
.eh-section--ink { background: var(--ink); color: var(--surface); }
.eh-container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 64px;
  width: 100%;
}
@media (max-width: 900px) { .eh-container { padding-inline: 24px; } }
@media (max-width: 700px) { .eh-section { padding-block: 72px; } }