/* ============================================================
   auth.css — 認証フロー (signup / login / verify-otp) 共通 light レイヤー.

   2026-06-12 Apple TTP リニューアル (TASK-21):
     signup.astro / login.astro が各々 inline で持っていた .signup-page の
     --color-* light 再マッピングを 1 箇所に集約し、verify-otp.astro にも適用する。
     従来 verify-otp.astro は再マッピングが無く globals.css の dark token
     (#15181d / #0d0f12) のまま「ダークカード」が出ていた (CV 直前フローでテーマ断絶)。

   なぜ partial 化が構造解決か:
     - 3 page で値がドリフトしない (真鍮 #a07d3e → 朱赤 #C02010 の置換を 1 回で済ませる)。
     - verify-otp の「再マッピング漏れ」を再発させない (同一 .signup-page スコープを共有)。

   スコープは .signup-page 配下のみ。MarketingLayout の `.mkt` 配下にネストされるが、
   .signup-page に直接 --color-* を再宣言することで内部の <SignupForm /> /
   <OtpVerifyForm /> (shadcn Button/Input/Label = Tailwind v4 の var(--color-*) 参照) を
   light + 朱赤で描画する。globals.css の dark --color-* を意図的に上書きする。

   ⚠️ 公開 LP (lp.css / .lp-page) には一切影響しない (.signup-page スコープ限定)。
   色値の SSOT: marketing.css `.mkt` token (washi #FAF7F0 / sumi #1A1614 / 朱赤 #C02010)。
   出典: docs/superpowers/specs/2026-06-12-marketing-top-apple-ttp-redesign-design.md
   ============================================================ */

.signup-page {
  /* warm washi light 基調 token を local に再マッピング (globals.css dark を上書き)。
     SignupForm / OtpVerifyForm 内の shadcn Button/Input/Label にも追従する
     (Tailwind は var(--color-*) を読む)。値は marketing.css `.mkt` と意味同期。 */
  --color-background: #faf7f0; /* warm washi (純白でない) */
  --color-card: #ffffff;
  --color-card-foreground: #1a1614; /* sumi warm-black */
  --color-popover: #ffffff;
  --color-popover-foreground: #1a1614;
  --color-primary: #c02010; /* 朱赤 CTA (旧 真鍮 #a07d3e を置換) */
  --color-primary-foreground: #ffffff;
  --color-secondary: #f2ede2; /* 沈み面 */
  --color-secondary-foreground: #1a1614;
  --color-border: #d9d2c4; /* washi hairline */
  --color-input: #d9d2c4;
  --color-muted: #f2ede2;
  --color-muted-foreground: #6e6e73; /* Apple グレー (washi 上 AA) */
  --color-foreground: #1a1614;
  --color-accent: #c02010; /* 朱赤 (点アクセント) */
  --color-accent-foreground: #ffffff;
  --color-ring: #c02010; /* 朱赤 focus ring */
  --color-destructive: #dc2626;
  --color-destructive-foreground: #ffffff;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background-color: var(--color-background);
  color: var(--color-foreground);
  color-scheme: light;
}

/* カード共通 (signup / login / verify-otp で同一)。
   warm washi 面用に上品な淡い影 (sumi シャドウ、marketing.css --mkt-shadow-lg 同形)。 */
.signup-card {
  width: 100%;
  max-width: 400px;
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 40px;
  box-shadow:
    0 2px 4px rgba(26, 22, 20, 0.04),
    0 12px 28px -8px rgba(26, 22, 20, 0.12);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* フォームエラー (role="alert") の色を destructive 赤に固定 (TASK-21 ④)。
   SignupForm / OtpVerifyForm のエラー <p class="text-destructive"> は marketing.css の
   `.mkt p { color: var(--ink-300) }` (詳細度 0,1,1) に負けて warm-gray に発色していた。
   `.signup-card .text-destructive` (詳細度 0,2,0) で勝たせ、エラーを赤で視認させる
   (a11y: role="alert" による SR 通知に加え、視覚でも識別可能にする)。!important 不要。 */
.signup-card .text-destructive {
  color: var(--color-destructive);
}

/* スマホ (≤480px) の余白縮小 — 375px で入力欄が狭くなる問題を解消。
   verify-otp にも届くよう共通化 (従来 verify-otp には @media が無かった、TASK-21 ⑤)。 */
@media (max-width: 480px) {
  .signup-page {
    padding: 1rem 0.75rem;
  }
  .signup-card {
    padding: 24px 20px;
  }
}