/* ログアウト導線トップページ用アクセントボタン(Figma: accent-button)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * (SP: guest/button/sp 16px / PC: guest/button/pc-accent 20px) */
.guest-accent-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 300px;
  padding: 16px 28px;
  border: 2px solid var(--guest-color-border-white);
  border-radius: 100px;
  background: linear-gradient(172deg, var(--color-orange-500) 7.1429%, var(--color-orange-300) 92.857%);
  /* Figmaのeffect style "button": offset(0,4) / radius 12 / #FEA1454D */
  box-shadow: 0 4px 12px rgba(254, 161, 69, 0.3);
  color: var(--guest-color-text-white);
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-base);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-none);
  text-align: center;
  white-space: nowrap;
  word-break: break-word;
  cursor: pointer;
  /* Figmaのモーション定義: 文字色 #FFF → #F89641 / 0.3s / ease-out。
   * 同時に変わる枠線色と影も揃えている。
   * 背景(グラデーション→白)はCSSでは補間できないため即時切り替わる(下記コメント参照)。 */
  transition:
    color 0.3s ease-out,
    border-color 0.3s ease-out,
    box-shadow 0.3s ease-out;
}

/* hoverは白背景＋オレンジ枠線/文字に反転し、影は消える。
 * 注意: background はグラデーションから単色への変化なのでCSSのtransitionでは
 * 補間できず、瞬時に切り替わる。フェードさせたい場合は擬似要素で
 * グラデーションを重ねてopacityを遷移させる実装が必要。 */
.guest-accent-button:hover,
.guest-accent-button:active {
  border-color: var(--guest-color-border-orange);
  background: var(--guest-color-background-white);
  box-shadow: none;
  color: var(--guest-color-text-orange);
}

@media (prefers-reduced-motion: reduce) {
  .guest-accent-button {
    transition: none;
  }
}

@media (min-width: 1080px) {
  .guest-accent-button {
    max-width: 400px;
    height: 50px;
    padding: 0 28px;
    font-size: var(--guest-font-size-xl);
  }
}