/* =============================================================================
   @elements/style — button

   The Elements button language is one axis, one class.

     <button>                       — default secondary/ghost look
     <button class="is-primary">       — ink-filled primary CTA
     <button class="is-accent">        — accent-filled (highest-value CTA)
     <button class="is-danger">        — red destructive
     <button class="is-ghost">         — borderless
     <button class="is-sm">            — 36px
     <button class="is-lg">            — 48px
     <button class="is-hero">          — 52px marketing CTA
     <button class="is-block">         — full width
     <button class="is-bare">          — strip chrome
     <button class="copy">          — clipboard affordance (with .is-copied)

   Combine freely — each modifier owns one axis and only touches that
   axis. Order doesn't matter, and there are no hidden requirements:

     <button class="is-primary is-lg is-block">Sign up</button>
     <button class="is-danger is-sm">Delete</button>

   To make a non-button element look like a button, add `.button`:

     <a class="button is-primary" href="/install">Install</a>

   Defaults are wrapped in :where() so they have ZERO specificity — any
   single-class override wins automatically.

   Auto-bare: a <button> whose only child is an <svg> strips its chrome
   so icon-only buttons read as icons without needing a class.
============================================================================= */

/* ─── Base shape ────────────────────────────────────────────────────
   Applies to bare <button> AND <a class="button"> (anchor coercion).
   Wrapped in :where() so any class on either wins by default. */

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2-5);
  height: var(--button-height);
  padding: 0 var(--button-padding-x);
  font-family: var(--font-sans);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--button-radius);
  cursor: pointer;
  user-select: none;
  transition:
    background-color 150ms var(--ease-out),
    border-color 150ms var(--ease-out),
    color 150ms var(--ease-out),
    transform 80ms var(--ease-out),
    box-shadow 150ms var(--ease-out),
    opacity 150ms var(--ease-out);
}

button:hover, .button:hover {
  border-color: var(--ink);
  background: var(--bg-soft);
}

button:active, .button:active {
  border-color: var(--ink);
  background: var(--bg-panel);
  transform: translateY(1px);
}

button:focus-visible, .button:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--blue-dot);
}


  button:disabled,
  button[aria-disabled="true"],
  .button:disabled,
  .button[aria-disabled="true"]
 {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--ink-dim);
  border-color: var(--rule);
  background: transparent;
  opacity: 0.6;
}

/* ─── Skins (intent variants) ───────────────────────────────────────
   Each skin only touches color / background / border. Size and shape
   come from the base. Combine with any size class freely. */

button.is-primary, .button.is-primary {
  background: var(--ink);
  color: #ffffff;
  border-color: var(--ink);
}
button.is-primary:hover, .button.is-primary:hover {
  background: #1f3a52;
  border-color: #1f3a52;
}
button.is-primary:active, .button.is-primary:active {
  background: #000;
  border-color: #000;
  transform: translateY(1px);
}
button.is-primary:focus-visible, .button.is-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-dot);
}
button.is-primary:disabled, .button.is-primary:disabled {
  background: var(--ink-faint);
  border-color: var(--ink-faint);
  color: #ffffff;
  opacity: 1;
}
button.is-primary .arrow, .button.is-primary .arrow {
  color: rgba(255, 255, 255, 0.5);
}

button.is-accent, .button.is-accent {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
button.is-accent:hover, .button.is-accent:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
button.is-accent:active, .button.is-accent:active {
  transform: translateY(1px);
}
button.is-accent:focus-visible, .button.is-accent:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--blue-dot);
}

button.is-ghost, .button.is-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
}
button.is-ghost:hover, .button.is-ghost:hover {
  color: var(--ink);
  background: var(--bg-panel);
  border-color: transparent;
}
button.is-ghost:active, .button.is-ghost:active {
  transform: translateY(1px);
}
button.is-ghost:focus-visible, .button.is-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
}

button.is-danger, .button.is-danger {
  background: var(--red);
  color: #ffffff;
  border-color: var(--red);
}
button.is-danger:hover, .button.is-danger:hover { opacity: 0.9; }
button.is-danger:active, .button.is-danger:active { transform: translateY(1px); }
button.is-danger:focus-visible, .button.is-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--red);
}

/* ─── Sizes ───────────────────────────────────────────────────────── */

button.is-sm, .button.is-sm {
  height: var(--button-height-sm);
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

button.is-lg, .button.is-lg {
  height: var(--button-height-lg);
  padding: 0 var(--space-5);
  font-size: var(--text-sm);
}

button.is-hero, .button.is-hero {
  height: var(--button-height-hero);
  padding: 0 var(--space-6);
  font-size: var(--text-md);
  font-weight: var(--font-bold);
}

/* ─── Width ───────────────────────────────────────────────────────── */

button.is-block, .button.is-block {
  display: flex;
  width: 100%;
}

/* ─── Arrow affordance ──────────────────────────────────────────────
   <button class="is-primary">Install <span class="arrow">→</span></button>
   Keeps the arrow muted within the button's color family. */

button .arrow, .button .arrow {
  color: currentColor;
  opacity: 0.5;
  transition: opacity var(--duration-fast) var(--ease-out);
}
button:hover .arrow, .button:hover .arrow { opacity: 0.7; }

/* ─── Auto-bare for icon-only buttons ───────────────────────────────
   A <button> whose only child is an <svg> auto-strips chrome by
   default. Modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+)
   support :has(). Wrapped in :where() so the rule has ZERO
   specificity — any explicit class chrome on the button wins
   automatically. */

:where(button:has(> svg:only-child)) {
  height: auto;
  padding: 0;
  background: none;
  color: inherit;
  border: none;
  border-radius: 0;
}
:where(button:has(> svg:only-child):hover),
:where(button:has(> svg:only-child):active) {
  background: none;
  border: none;
  transform: none;
}

/* ─── Explicit bare opt-out ─────────────────────────────────────────
   `.is-bare` strips chrome regardless of contents. Class specificity
   (0,1,1)/(0,2,0) wins over the zero-specificity defaults. */

button.is-bare,
.button.is-bare {
  height: auto;
  padding: 0;
  background: none;
  color: inherit;
  border: none;
  border-radius: 0;
}
button.is-bare:hover,
button.is-bare:active,
.button.is-bare:hover,
.button.is-bare:active {
  background: none;
  border: none;
  transform: none;
}

/* ─── Copy button ───────────────────────────────────────────────────
   Standalone clipboard-copy affordance. Mono uppercase, fixed min-width
   so 'COPY' → '✓ COPIED' doesn't reflow neighbors. Toggle via .is-copied
   — JS sets it on success, clears it after a beat.

   Borderless by default (plays well inside framed surfaces like
   .token-row that already provide the visual frame). For the dark
   terminal variant, see .terminal > .copy in terminal.css. */

button.copy,
.button.copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--ink-soft);
  background: transparent;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-xs);
  min-width: 5rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--duration-fast) var(--ease-out);
}
button.copy:hover,
.button.copy:hover { color: var(--accent-deep); background: transparent; border: none; }
button.copy:focus-visible,
.button.copy:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: none;
}
button.copy.is-copied,
.button.copy.is-copied { color: var(--green); }