@layer components {
  /* Button Component
   *
   * Every visual property of `.btn` is driven by a custom property, so a colour
   * variant is just a handful of variable overrides — no !important cascade wars.
   *
   * Colour variants:
   *   .btn--dark      primary actions (submit, create, involved flows)
   *   .btn--light     secondary actions (edit, cancel)
   *   .btn--delete    destructive actions (solid red fill)
   *   .btn--negative  destructive text-only (inline icon buttons)
   *   .btn--secondary marketing / landing CTAs (green)
   *
   * Shape/size modifiers: .btn--small, .btn--square / .btn--circle (icon-only),
   * and .btn--collapse (shrinks a labelled button to an icon-only square on mobile).
   */

  .btn {
    --btn-padding: var(--space-xxxs) var(--space-s);
    --btn-gap: 0.5ch;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-padding);
    border: solid 2px var(--btn-border-color, transparent);
    border-radius: var(--border-radius);
    background-color: var(--btn-background, transparent);
    color: var(--btn-color, inherit);
    /* font-size: var(--font-small-responsive); */
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    transition:
      background-color 200ms,
      filter 200ms,
      color 200ms;
  }

  /* Keyboard focus. `.btn` above clears `outline` (style included), and the
     global rule in base.css only restores width/colour/offset — so without this
     a tabbing user gets a 2px outline that never paints. Ink rather than
     currentColor: the offset puts the ring on the page, where a white label on a
     filled button would be invisible. */
  .btn:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }

  /* Hover only where a real pointer exists — never sticky-hover on touch */
  @media (any-hover: hover) {
    .btn:hover,
    .btn:focus-visible,
    .btn:focus-within,
    .btn:active {
      background-color: var(--btn-background-hover, var(--btn-background));
      filter: var(--btn-hover-filter, none);
    }
  }

  /* Dark — primary actions */
  .btn--dark {
    --btn-background: var(--color-ink-dark);
    --btn-border-color: var(--color-ink-dark);
    --btn-color: var(--color-white);
  }

  /* Light — secondary actions (edit, cancel) */
  .btn--light {
    --btn-background: var(--color-gray-light);
    --btn-color: var(--color-ink-dark);
    --btn-hover-filter: brightness(92%);
  }

  /* Delete — destructive, solid red fill. The -fill token stays dark in dark
     mode so the white label keeps its contrast; hover just deepens the fill. */
  .btn--delete {
    --btn-background: var(--color-red-fill);
    --btn-border-color: var(--color-red-fill);
    --btn-color: var(--color-always-white);
    --btn-background-hover: color-mix(in oklch, var(--color-red-fill), var(--color-always-black) 15%);
  }

  /* Secondary — marketing / landing CTAs (brand green) */
  .btn--secondary {
    --btn-background: var(--color-green);
    --btn-color: var(--color-white);
    --btn-background-hover: var(--color-green-dark);
  }

  /* Negative — destructive text-only (kept for inline icon buttons) */
  .btn--negative {
    --btn-color: var(--color-red);
    --btn-background-hover: transparent;
    --btn-hover-filter: none;
  }

  .btn--negative:hover,
  .btn--negative:focus,
  .btn--negative:active {
    --btn-color: var(--color-red-dark);
  }

  /* Size modifier */
  .btn--small {
    --btn-padding: var(--space-xxxs) var(--space-xs);
    font-size: 0.8rem;
  }

  /* Square icon-only button modifier */
  .btn--square {
    --btn-padding: 0;

    display: inline-grid;
    place-items: center;
    width: 1.75em;
    height: 1.75em;
  }

  /* Circle icon-only button modifier */
  .btn--circle {
    --btn-size: 2rem;
    --btn-padding: 0;

    display: inline-grid;
    place-items: center;
    aspect-ratio: 1;
    inline-size: var(--btn-size);
    block-size: var(--btn-size);
  }

  /* Collapse — on small screens, shrink to an icon-only square. The square is
   * sized to the button's intrinsic height (line-height + vertical padding +
   * 2px border × 2), so it always lines up with the expanded buttons next to it
   * and tracks any future font/padding change automatically. The button must
   * contain an icon and a label <span>; the label is hidden and the accessible
   * name comes from the button's aria-label. */
  @media (max-width: 50rem) {
    .btn--collapse {
      --btn-padding: 0;
      --btn-collapse-size: calc(1lh + 2 * var(--space-xxxs) + 4px);

      display: inline-grid;
      place-items: center;
      inline-size: var(--btn-collapse-size);
      block-size: var(--btn-collapse-size);
    }

    .btn--collapse > :not(i):not(.for-screen-reader) {
      display: none;
    }
  }

  /* Translucent button — semi-transparent until hovered */
  .btn.translucent {
    opacity: 0.5;
    transition: opacity 150ms ease;
  }

  .btn.translucent:hover,
  .btn.translucent:focus {
    opacity: 1;
  }

  /* Dark mode: btn--dark stays dark instead of inverting to near-white */
  html[data-theme="dark"] .btn--dark {
    --btn-background: var(--color-gray);
    --btn-border-color: var(--color-gray);
    --btn-color: var(--color-ink);
  }

  @media (prefers-color-scheme: dark) {
    html:not([data-theme]) .btn--dark {
      --btn-background: var(--color-gray);
      --btn-border-color: var(--color-gray);
      --btn-color: var(--color-ink);
    }
  }

  /* Icon-action reset: blue, static on hover like every other link. Composed
     with .link (loaded later) it gains the text-link underline. */
  .button {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-blue);
    text-decoration: none;
    cursor: pointer;
  }
}