/* =============================================================================
   button.css — reusable button component
   Used across all pages. Do not add page-specific rules here.

   Component ownership:
     .btn          — base: resets native button, sets shared typography
     .btn-outline  — variant: 1px solid Grey 100 border, carbon fill, white label
   ============================================================================= */


/* ── Base ────────────────────────────────────────────────────────────────────── */
/*
 * Shared defaults for all button variants.
 * Applied to both <button> and <a> elements used as buttons.
 */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;                        /* 48px */
  padding-inline: var(--space-6);      /* 24px — shrinks to content on full-width */
  border-radius: 0.5rem;               /* 8px — design spec */
  border: 1px solid transparent;       /* overridden per variant */
  font-family: var(--font-family-base);
  font-size: 1rem;                     /* 16px */
  font-weight: 600;                    /* Semibold */
  color: var(--color-white);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}

.btn:hover {
  opacity: 0.85;
}


/* ── Outline variant ─────────────────────────────────────────────────────────── */
/*
 * 1px solid Grey 100 border, carbon fill, white label.
 * Full-width when wrapped in a block container.
 */

.btn-outline {
  width: 100%;
  border: 1px solid var(--color-gray-300); /* Grey 300 — more visible border */
  background: var(--color-carbon);          /* solid dark fill — matches page surface */
}