---
/**
 * docs/02-design-system.md: variants primary (maroon) · ghost (outlined) ·
 * gold (ink background, gold-l text). Renders an <a> or a <button> correctly —
 * a link that navigates must be an <a>, whatever it looks like.
 */
interface Props {
  href?: string;
  variant?: 'primary' | 'ghost' | 'gold';
  type?: 'button' | 'submit';
  class?: string;
}

const {
  href,
  variant = 'primary',
  type = 'button',
  class: className,
} = Astro.props;
const classes = ['btn', `btn-${variant}`, className];
---

{
  href ? (
    <a href={href} class:list={classes}>
      <slot />
    </a>
  ) : (
    <button type={type} class:list={classes}>
      <slot />
    </button>
  )
}

<style>
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* 44 × 44 is the touch-target floor in docs/02. */
    min-block-size: 44px;
    padding-block: var(--space-3);
    padding-inline: var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition:
      background-color var(--dur-hover) var(--ease),
      border-color var(--dur-hover) var(--ease),
      color var(--dur-hover) var(--ease);
  }

  .btn-primary {
    background: var(--accent);
    color: var(--text-inverse);
  }
  .btn-primary:hover {
    background: var(--accent-hover);
    color: var(--text-inverse);
  }

  /* ⚠️ THESE HOOKS ARE WHY `.btn-ghost` IS LEGIBLE ON A DARK BAND. Its own
     colours are ink text on an ink-at-10%-alpha border, which on
     `.section-inverse` and `.section-accent` are the background twice over —
     `/fees/` shipped this at a measured 1.00:1.

     THEY ARE CUSTOM PROPERTIES AND MUST STAY THAT WAY. A parent cannot style a
     child component's root (CLAUDE.md), and a `global.css` descendant rule would
     tie at specificity (0,2,0) with `.btn-ghost[data-astro-cid]` here, so the
     winner would depend on injection order. Custom properties inherit, which is
     the one mechanism that crosses the boundary. `global.css` sets them; the
     fallbacks keep the on-cream appearance identical.

     Do not rely on the accessibility category to catch a regression here: axe
     SKIPS a foreground identical to its background as "unable to determine", and
     scored that page 100. AGENTS.md entry (ah) has the measurements. */
  .btn-ghost {
    background: transparent;
    border-color: var(--btn-ghost-border, var(--border));
    color: var(--btn-ghost-fg, var(--text));
  }
  .btn-ghost:hover {
    border-color: var(--btn-ghost-border-hover, var(--accent));
    color: var(--btn-ghost-fg-hover, var(--accent));
  }

  /* `background: var(--bg-inverse)` is ink, so on an inverse ground this pill has
     no boundary and reads as bare text. It needs an EDGE, not a new ground — the
     gold-l label already measures 11.09:1 on ink. */
  .btn-gold {
    background: var(--bg-inverse);
    border-color: var(--btn-gold-border, transparent);
    color: var(--text-inverse-2);
  }
  .btn-gold:hover {
    background: var(--accent);
    color: var(--text-inverse);
  }
</style>