/* =========================================================================
   Canonical component: Button (Requirement 3.8)

   `.tkc-btn` is the base -- box model, type, focus ring, hover transition --
   and carries no fill of its own. Two modifiers set the fill:

     `.tkc-btn-primary`   accent fill, page color for the label
     `.tkc-btn-quiet`     transparent fill, hairline border, text color

   Applies to `<button>`, `<a>`, and `<input type="submit">` alike, which is why
   the base resets `text-decoration` and sets `cursor`. Compositions add layout
   only; they may not restate padding, radius, border, or background.

   Every declared value reaches `assets/css/tokens.css` through `var(--tkc-...)`
   (Requirements 3.6, 9.5). The bare words here are keywords rather than values:
   `thin` and `medium` name border and outline widths, `transparent` names an
   absence, `ease` names a timing curve, and `0` carries no design decision.

   The focus ring uses `--tkc-color-focus`, a deliberately different hue from
   the accent, so keyboard focus is never mistaken for a hover state. It is an
   `outline` rather than a `box-shadow` so it survives a forced-colors mode, and
   it is offset by one spacing step so it stays legible against an accent fill.
   ========================================================================= */

.tkc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tkc-space-2);
  padding: var(--tkc-space-3) var(--tkc-space-5);
  border: thin solid transparent;
  border-radius: var(--tkc-radius-sm);
  background-color: transparent;
  color: var(--tkc-color-accent);
  font-family: var(--tkc-font-text);
  font-size: var(--tkc-size-100);
  font-weight: var(--tkc-weight-medium);
  line-height: var(--tkc-leading-normal);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--tkc-motion-fast) ease,
    border-color var(--tkc-motion-fast) ease,
    color var(--tkc-motion-fast) ease;
}

.tkc-btn:focus-visible {
  outline: medium solid var(--tkc-color-focus);
  outline-offset: var(--tkc-space-1);
}

/* `:focus-visible` shares the hover treatment as well as the ring, so a
   keyboard visitor sees the same state change a pointer visitor sees. */
.tkc-btn-primary {
  background-color: var(--tkc-color-accent);
  border-color: var(--tkc-color-accent);
  color: var(--tkc-color-bg);
}

.tkc-btn-primary:hover,
.tkc-btn-primary:focus-visible {
  background-color: var(--tkc-color-accent-strong);
  border-color: var(--tkc-color-accent-strong);
}

.tkc-btn-quiet {
  background-color: transparent;
  border-color: var(--tkc-color-border);
  color: var(--tkc-color-text);
}

.tkc-btn-quiet:hover,
.tkc-btn-quiet:focus-visible {
  border-color: var(--tkc-color-accent);
  color: var(--tkc-color-accent);
}

/* A disabled button keeps its fill and loses only its affordance: dimming it
   with a derived color would spend a token the caps do not have. */
.tkc-btn[disabled],
.tkc-btn[aria-disabled="true"] {
  cursor: default;
  color: var(--tkc-color-text-muted);
  border-color: var(--tkc-color-border);
  background-color: var(--tkc-color-surface);
}

/* -------------------------------------------------------------------------
   Reduced motion (Requirement 3.10)

   Zero duration and zero delay. The button transitions color only, so at 0s it
   is already in its final visible state in every one of its states -- there is
   no reveal here to leave half-played.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tkc-btn {
    transition-duration: 0s;
    transition-delay: 0s;
  }
}