/* Unified Button System (Phase 3 Overhaul) — TASTEOME
   既存 .primary / .hero-cta-primary / .dc-surprise-btn / .share-btn を canonical な
   .btn family と一致させる。 新規 code は .btn variants を使うこと。 */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5em;
  padding: 0.65rem 1.1rem;
  border-radius: var(--t-r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--t-fg);
  font-family: var(--t-font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-trans-fast);
  white-space: nowrap;
}

/* ボタンに付随する 1 行メッセージ (押した結果が **恒久的な拒否**の時だけ出す)。
   ⚠ ここに置く理由 = 消費する 2 面 (/profile/ と /people/) が **どちらも既に button.css を
   link しており**、専用 file を新設すると 3 宣言のために 2 面へ <link> を足すことになる。
   逆に page 側 CSS へ 2 本書くと「同じ契約が 2 箇所」になり片方だけ直る。
   ⚠ 消費側はいずれも flex 容器 (.pp-actions / .ppl-row) なので、既定で**自分の行へ折り返す**。 */
.btn-note {
  /* 🔴 order で **必ず容器の最後**へ回す — `.pp-actions` のように後続 button (ブロック) が
     並ぶ容器では、DOM 順のままだと note が 1 行を占めて**後ろの button が 3 行目へ押し出される**
     (実測: 押した直後に「ブロック」が 80px 下がる)。非 focusable な `<p>` なので
     DOM 順と視覚順の乖離は tab 順・読み上げ順に影響しない。 */
  order: 1;
  flex: 1 0 100%;
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  color: var(--t-danger);
}
/* 拒否ではなく**今の状態**を言う 1 行 (profile の「ブロック中です」= `FollowControls.tsx`)。赤くしない。 */
.btn-note--state { color: var(--t-muted); }

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Primary — gradient + shadow (highest emphasis CTA) */
.btn-primary {
  background: var(--t-accent-grad);
  color: var(--t-on-accent);
  font-weight: 700;
  box-shadow: var(--t-shadow-cta);
  border-color: transparent;
}
.btn-primary:hover { box-shadow: var(--t-shadow-md); }

/* Secondary — solid accent fill */
.btn-secondary {
  background: var(--t-accent);
  color: var(--t-on-accent);
  font-weight: 600;
}
.btn-secondary:hover { background: color-mix(in srgb, var(--t-accent) 85%, transparent); }

/* Ghost — transparent + border (low emphasis) */
.btn-ghost {
  background: transparent;
  border-color: var(--t-border-strong);
  color: var(--t-fg-soft);
}
.btn-ghost:hover { border-color: var(--t-accent); color: var(--t-accent); background: var(--t-bg-elev); }

/* Sizes */
.btn-small { padding: 0.35rem 0.7rem; font-size: 0.78rem; }
.btn-large { padding: 0.85rem 1.6rem; font-size: 1rem; }

/* Icon button */
.btn-icon {
  padding: 0.45rem;
  width: 2.2em; height: 2.2em;
  border-radius: var(--t-r-pill);
}

/* ── Legacy class unification (apply same look to existing names) ──
   既存 page で使われている button class を canonical style に揃える。 */
.hero-cta-primary,
.dc-surprise-btn,
.daily-cta-btn {
  background: var(--t-accent-grad);
  color: var(--t-on-accent);
  font-weight: 700;
  box-shadow: var(--t-shadow-cta);
  border: 1px solid transparent;
}