/**
 * Kingsong Vision Canon — button primitives
 * Load AFTER assets/ks-tokens.css.
 *
 * Fill/color/border use REAL class specificity (not :where) so they win over
 * common page rules like `a { color: inherit }`. Geometry/motion stay in
 * :where so pages can still refine anatomy without forking fills.
 *
 * Markup:
 *   <a class="ks-btn ks-btn--ink" href="…">Shop Now</a>
 *   <button type="button" class="ks-btn ks-btn--action">Add to cart</button>
 */

:where(.ks-btn) {
  display: inline-flex;
  min-block-size: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--ks-r-control, 4px);
  font-family: var(--ks-font-body, "Public Sans", "Noto Sans SC", sans-serif);
  font-size: var(--ks-fs-ui, 0.9375rem);
  font-weight: var(--ks-fw-medium, 500);
  letter-spacing: 0;
  line-height: var(--ks-lh-ui, 1.45);
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color var(--ks-dur-fast, 0.18s) ease,
    color var(--ks-dur-fast, 0.18s) ease,
    border-color var(--ks-dur-fast, 0.18s) ease,
    transform 0.28s var(--ks-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow 0.28s var(--ks-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

:where(.ks-btn:active) {
  transform: translateY(0) scale(0.985);
}

:where(.ks-btn:focus-visible) {
  outline: 2px solid var(--ks-ink, #171a20);
  outline-offset: 3px;
}

/* Discovery / peer Shop Now — light surfaces */
.ks-btn--ink,
a.ks-btn--ink:link,
a.ks-btn--ink:visited {
  background: #171a20;
  color: #fff;
  border-color: #171a20;
}

.ks-btn--ink:hover,
a.ks-btn--ink:hover {
  background: #2c2e33;
  border-color: #2c2e33;
  color: #fff;
  transform: translateY(-1px);
}

/* High-intent purchase — PDP Add to cart / sticky buy / checkout */
.ks-btn--action,
a.ks-btn--action:link,
a.ks-btn--action:visited {
  min-block-size: 46px;
  background: var(--ks-action, #3a6fe5);
  color: var(--ks-action-ink, #fff);
  border-color: var(--ks-action, #3a6fe5);
}

.ks-btn--action:hover,
a.ks-btn--action:hover {
  background: var(--ks-action-hover, #2f5ecc);
  border-color: var(--ks-action-hover, #2f5ecc);
  color: var(--ks-action-ink, #fff);
  transform: translateY(-1px);
}

.ks-btn--action:focus-visible {
  outline-color: var(--ks-action, #3a6fe5);
}

/* Soft / tonal secondary on light surfaces */
.ks-btn--tonal,
a.ks-btn--tonal:link,
a.ks-btn--tonal:visited {
  background: var(--ks-action-soft, #e8effc);
  color: var(--ks-action, #3a6fe5);
  border-color: transparent;
}

.ks-btn--tonal:hover,
a.ks-btn--tonal:hover {
  background: var(--ks-action-soft-hover, #dce7fa);
  color: var(--ks-action-hover, #2f5ecc);
  transform: translateY(-1px);
}

/* Neutral gray tonal (PDP secondary / home ghost on light) */
.ks-btn--muted,
a.ks-btn--muted:link,
a.ks-btn--muted:visited {
  background: #e2e3e3;
  color: #393c41;
  border-color: transparent;
}

.ks-btn--muted:hover,
a.ks-btn--muted:hover {
  background: #d5d6d7;
  color: #171a20;
  transform: translateY(-1px);
}

/* Outline secondary on light surfaces */
.ks-btn--secondary,
a.ks-btn--secondary:link,
a.ks-btn--secondary:visited {
  background: transparent;
  color: #171a20;
  border-color: #171a20;
}

.ks-btn--secondary:hover,
a.ks-btn--secondary:hover {
  background: #171a20;
  color: #fff;
  transform: translateY(-1px);
}

/* On-dark photography — light fill primary */
.ks-btn--on-dark,
a.ks-btn--on-dark:link,
a.ks-btn--on-dark:visited {
  background: rgba(255, 255, 255, 0.94);
  color: #171a20;
  border-color: rgba(255, 255, 255, 0.94);
}

.ks-btn--on-dark:hover,
a.ks-btn--on-dark:hover {
  background: #fff;
  border-color: #fff;
  color: #171a20;
  transform: translateY(-1px);
}

.ks-btn--on-dark:focus-visible {
  outline-color: #fff;
}

/* On-dark glass / outline secondary */
.ks-btn--on-dark-ghost,
a.ks-btn--on-dark-ghost:link,
a.ks-btn--on-dark-ghost:visited {
  background: rgba(23, 26, 32, 0.28);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

.ks-btn--on-dark-ghost:hover,
a.ks-btn--on-dark-ghost:hover {
  background: rgba(23, 26, 32, 0.4);
  border-color: #fff;
  color: #fff;
  transform: translateY(-1px);
}

.ks-btn--on-dark-outline,
a.ks-btn--on-dark-outline:link,
a.ks-btn--on-dark-outline:visited {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.ks-btn--on-dark-outline:hover,
a.ks-btn--on-dark-outline:hover {
  background: #fff;
  color: #171a20;
  border-color: #fff;
  transform: translateY(-1px);
}

@media (hover: none) {
  .ks-btn--ink:hover,
  .ks-btn--action:hover,
  .ks-btn--secondary:hover,
  .ks-btn--on-dark:hover,
  .ks-btn--on-dark-ghost:hover,
  .ks-btn--on-dark-outline:hover,
  .ks-btn--tonal:hover,
  .ks-btn--muted:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(.ks-btn) {
    transition: none;
  }

  :where(.ks-btn:hover),
  :where(.ks-btn:active) {
    transform: none;
  }
}