/* ============================================================================
   ファイル名: app/assets/stylesheets/devise_registration_sakura.css
   コメント付与日: 2026-07-04
   【ファイルの役割】devise_registration.css の桜テーマ（夜桜 sakura_night / 昼桜 sakura_day）専用オーバーライド。
     base の行数ガードレール spec 超過回避のため base から分離した companion。base の
     stylesheet_link_tag 直後に読み込む（Propshaft により app/assets 配下は自動配信・assets.rb 登録不要）。
   【リファクタリング基準】※コメント行・空行は行数カウントから除外（CSS 基準）
     1. 500 行未満: 完璧 / 2. 800 行未満: 問題なし / 3. 1200 行未満: 注意喚起・要検討 / 4. 1200 行以上: 必須
     実コード行数: 約 275 行（コメント・空行除外・2026-07-04 計測）→ 判定: 完璧
   【ジュニア向け解説】夜桜は wood テーマの色（コッパー/木目）を桜ピンク/花びらへ、昼桜は light テーマの
     色（ブラウンゴールド）を濃ローズへ写したミラー。値の対応は docs/design-system/themes.md 参照。
============================================================================ */

/* ===== 桜テーマ（夜桜 sakura_night / 昼桜 sakura_day）— Phase 2 Stage3 / 2026-07-02・devise_registration.css の wood/light ミラー ===== */

/* ========================================
   sakura_night — [data-theme="wood"] からの移植（copper → 桜ピンク）
   ======================================== */

/* 背景コンテナ・カード: wood テーマの copper/amber 系を深紫（#1a1019〜#33243a）+ 桜ピンク（rgba(255,157,196)）へ置換 */
[data-theme="sakura_night"] .luxury-auth-container {
  background: linear-gradient(135deg, #1a1019 0%, #33243a 50%, #33243a 100%);
}

[data-theme="sakura_night"] .luxury-auth-bg-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255, 157, 196, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(255, 157, 196, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 157, 196, 0.03) 0%, transparent 70%);
}

[data-theme="sakura_night"] .luxury-auth-card {
  background: linear-gradient(135deg, rgba(255, 157, 196, 0.12) 0%, rgba(255, 157, 196, 0.06) 100%);
  background-image: var(--sakura-petal-card);
  border: 1px solid rgba(255, 157, 196, 0.15);
  box-shadow: 0 30px 80px rgba(15, 8, 14, 0.4);
}

[data-theme="sakura_night"] .luxury-auth-glow {
  background: radial-gradient(circle, rgba(255, 157, 196, 0.1) 0%, transparent 70%);
}

/* ロゴアイコン: wood テーマの copper (#8b6c5c 系) → 桜ピンク (#ff9dc4 〜 #f06595) */
[data-theme="sakura_night"] .luxury-auth-logo {
  background: linear-gradient(135deg, #ff9dc4 0%, #f06595 100%);
  box-shadow:
    0 20px 40px rgba(255, 157, 196, 0.3),
    0 0 0 1px rgba(255, 157, 196, 0.2);
}

[data-theme="sakura_night"] .luxury-auth-logo::before {
  background: linear-gradient(135deg, #ff9dc4 0%, #f06595 100%);
}

/* テキスト・リンク: copper グラデーション → 桜ピンク (#ff9dc4 〜 #f06595) グラデーション */
[data-theme="sakura_night"] .luxury-auth-title {
  background: linear-gradient(135deg, #ff9dc4 0%, #f06595 50%, #ff9dc4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

[data-theme="sakura_night"] .luxury-auth-subtitle {
  color: rgba(245, 230, 238, 0.8);
}

[data-theme="sakura_night"] .luxury-auth-link {
  color: rgba(255, 157, 196, 0.6);
}

[data-theme="sakura_night"] .luxury-link {
  color: #ff9dc4;
}

[data-theme="sakura_night"] .luxury-link::after {
  background: linear-gradient(90deg, #ff9dc4 0%, #f06595 100%);
}

[data-theme="sakura_night"] .luxury-link:hover {
  color: #f06595;
  text-shadow: 0 0 10px rgba(255, 157, 196, 0.5);
}

/* フォームラベル・バッジ: ラベル文字・必須／任意バッジの色を桜ピンクへ */
[data-theme="sakura_night"] .luxury-form-label {
  color: rgba(245, 230, 238, 0.9);
}

[data-theme="sakura_night"] .luxury-required-badge {
  color: #ff9dc4;
  background: rgba(255, 157, 196, 0.15);
  border: 1px solid rgba(255, 157, 196, 0.3);
}

[data-theme="sakura_night"] .luxury-optional-badge {
  color: rgba(255, 157, 196, 0.5);
  background: rgba(255, 157, 196, 0.05);
  border: 1px solid rgba(255, 157, 196, 0.15);
}

/* 入力フィールド: 背景・枠線・プレースホルダー・フォーカスリングをすべて桜ピンク系に統一 */
[data-theme="sakura_night"] .luxury-input-icon {
  color: rgba(255, 157, 196, 0.5);
}

[data-theme="sakura_night"] .luxury-input {
  background: rgba(255, 157, 196, 0.05);
  border: 1px solid rgba(255, 157, 196, 0.12);
  color: #f5e6ee;
}

[data-theme="sakura_night"] .luxury-input::placeholder {
  color: rgba(255, 157, 196, 0.4);
}

[data-theme="sakura_night"] .luxury-input:focus {
  border-color: rgba(255, 157, 196, 0.5);
  background: rgba(255, 157, 196, 0.08);
  box-shadow:
    0 0 0 3px rgba(255, 157, 196, 0.1),
    0 8px 25px rgba(255, 157, 196, 0.1);
}

[data-theme="sakura_night"] .luxury-input:focus + .luxury-input-icon {
  color: #ff9dc4;
}

[data-theme="sakura_night"] .luxury-input-hint {
  color: rgba(255, 157, 196, 0.6);
}

/* 送信ボタン: copper グラデーション → 桜ピンク。文字色は深紫 (#1a1019) で視認性を確保 */
[data-theme="sakura_night"] .luxury-submit-btn {
  background: linear-gradient(135deg, #ff9dc4 0%, #f06595 100%);
  color: #1a1019;
  box-shadow: 0 8px 25px rgba(255, 157, 196, 0.3);
}

[data-theme="sakura_night"] .luxury-submit-btn:hover {
  box-shadow: 0 12px 35px rgba(255, 157, 196, 0.4);
}

[data-theme="sakura_night"] .luxury-submit-btn:disabled {
  background: linear-gradient(135deg, rgba(255, 157, 196, 0.3) 0%, rgba(240, 101, 149, 0.3) 100%);
  color: rgba(26, 16, 25, 0.4);
}

/* 規約テキスト・パスワード強度バー */
[data-theme="sakura_night"] .luxury-terms-note p {
  color: rgba(255, 157, 196, 0.6);
}

[data-theme="sakura_night"] .password-strength-bar {
  background: rgba(255, 157, 196, 0.1);
}

/* 言語セレクタ（ドロップダウン）: 入力フィールドと同じ桜ピンク系で統一 */
[data-theme="sakura_night"] .luxury-auth-form .luxury-locale-dropdown__trigger {
  background: rgba(255, 157, 196, 0.05);
  border: 1px solid rgba(255, 157, 196, 0.12);
  color: #f5e6ee;
}

[data-theme="sakura_night"] .luxury-auth-form .luxury-locale-dropdown__trigger:hover {
  background: rgba(255, 157, 196, 0.08);
  border-color: rgba(255, 157, 196, 0.4);
}

[data-theme="sakura_night"] .luxury-auth-form .luxury-locale-dropdown__trigger:focus {
  border-color: rgba(255, 157, 196, 0.5);
  background: rgba(255, 157, 196, 0.08);
  box-shadow:
    0 0 0 3px rgba(255, 157, 196, 0.1),
    0 8px 25px rgba(255, 157, 196, 0.1);
}

[data-theme="sakura_night"] .luxury-auth-form .luxury-locale-dropdown__menu {
  background: linear-gradient(135deg, rgba(40, 28, 44, 0.98) 0%, rgba(26, 16, 25, 0.98) 100%);
  border: 1px solid rgba(255, 157, 196, 0.2);
}

[data-theme="sakura_night"] .luxury-auth-form .luxury-locale-dropdown__item {
  color: rgba(245, 230, 238, 0.85);
}

[data-theme="sakura_night"] .luxury-auth-form .luxury-locale-dropdown__item:hover {
  background: rgba(255, 157, 196, 0.1);
  color: rgba(245, 230, 238, 1);
}

[data-theme="sakura_night"] .luxury-auth-form .luxury-locale-dropdown__item--active {
  background: rgba(255, 157, 196, 0.15);
}

[data-theme="sakura_night"] .luxury-auth-form .luxury-locale-dropdown__item--active::after {
  background: #ff9dc4;
}

/* ========================================
   sakura_day — [data-theme="light"] からの移植（brown-gold → 濃ローズ）
   ======================================== */

/* 背景コンテナ・カード: light テーマの白/ベージュ系を維持しつつ、強調色を濃ローズ (#c2185b) へ置換 */
[data-theme="sakura_day"] .luxury-auth-container {
  background: linear-gradient(135deg, #ffeaf1 0%, #fff5f8 50%, #ffffff 100%);
}

[data-theme="sakura_day"] .luxury-auth-bg-pattern {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(194, 24, 91, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(194, 24, 91, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(194, 24, 91, 0.02) 0%, transparent 70%);
}

[data-theme="sakura_day"] .luxury-auth-card {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.08);
}

[data-theme="sakura_day"] .luxury-auth-glow {
  background: radial-gradient(circle, rgba(194, 24, 91, 0.08) 0%, transparent 70%);
}

/* ロゴアイコン: light テーマの brown-gold → 濃ローズ (#c2185b 〜 #d6336c) */
[data-theme="sakura_day"] .luxury-auth-logo {
  background: linear-gradient(135deg, #c2185b 0%, #d6336c 100%);
  box-shadow:
    0 20px 40px rgba(194, 24, 91, 0.2),
    0 0 0 1px rgba(194, 24, 91, 0.15);
}

[data-theme="sakura_day"] .luxury-auth-logo::before {
  background: linear-gradient(135deg, #c2185b 0%, #d6336c 100%);
}

/* テキスト・リンク: brown-gold グラデーション → 濃ローズ (#c2185b 〜 #d6336c) グラデーション */
[data-theme="sakura_day"] .luxury-auth-title {
  background: linear-gradient(135deg, #c2185b 0%, #d6336c 50%, #c2185b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

[data-theme="sakura_day"] .luxury-auth-subtitle {
  color: rgba(0, 0, 0, 0.7);
}

[data-theme="sakura_day"] .luxury-auth-link {
  color: rgba(0, 0, 0, 0.55);
}

[data-theme="sakura_day"] .luxury-link {
  color: #c2185b;
}

[data-theme="sakura_day"] .luxury-link::after {
  background: linear-gradient(90deg, #c2185b 0%, #d6336c 100%);
}

[data-theme="sakura_day"] .luxury-link:hover {
  color: #d6336c;
  text-shadow: 0 0 10px rgba(194, 24, 91, 0.3);
}

/* フォームラベル・バッジ: light テーマの黒系テキストを維持。必須バッジのみ濃ローズへ */
[data-theme="sakura_day"] .luxury-form-label {
  color: rgba(0, 0, 0, 0.85);
}

[data-theme="sakura_day"] .luxury-required-badge {
  color: #c2185b;
  background: rgba(194, 24, 91, 0.1);
  border: 1px solid rgba(194, 24, 91, 0.25);
}

[data-theme="sakura_day"] .luxury-optional-badge {
  color: rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

/* 入力フィールド: light テーマと同じ黒系の薄い背景・枠線。フォーカスリングのみ濃ローズ系 */
[data-theme="sakura_day"] .luxury-input-icon {
  color: rgba(0, 0, 0, 0.45);
}

[data-theme="sakura_day"] .luxury-input {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #3d2b32;
}

[data-theme="sakura_day"] .luxury-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

[data-theme="sakura_day"] .luxury-input:focus {
  border-color: rgba(194, 24, 91, 0.5);
  background: rgba(0, 0, 0, 0.02);
  box-shadow:
    0 0 0 3px rgba(194, 24, 91, 0.1),
    0 8px 25px rgba(194, 24, 91, 0.1);
}

[data-theme="sakura_day"] .luxury-input:focus + .luxury-input-icon {
  color: #c2185b;
}

[data-theme="sakura_day"] .luxury-input-hint {
  color: rgba(0, 0, 0, 0.55);
}

/* 送信ボタン: brown-gold グラデーション → 濃ローズ。文字色は白（ライト背景に合わせた視認性）*/
[data-theme="sakura_day"] .luxury-submit-btn {
  background: linear-gradient(135deg, #c2185b 0%, #d6336c 100%);
  color: #fff;
  box-shadow: 0 8px 25px rgba(194, 24, 91, 0.2);
}

[data-theme="sakura_day"] .luxury-submit-btn:hover {
  box-shadow: 0 12px 35px rgba(194, 24, 91, 0.3);
}

[data-theme="sakura_day"] .luxury-submit-btn:disabled {
  background: linear-gradient(135deg, rgba(194, 24, 91, 0.3) 0%, rgba(214, 51, 108, 0.3) 100%);
  color: rgba(255, 255, 255, 0.4);
}

/* 規約テキスト・パスワード強度バー */
[data-theme="sakura_day"] .luxury-terms-note p {
  color: rgba(0, 0, 0, 0.55);
}

[data-theme="sakura_day"] .password-strength-bar {
  background: rgba(0, 0, 0, 0.08);
}

/* 言語セレクタ（ドロップダウン）: light テーマの黒系を維持しつつ、フォーカス・選択色を濃ローズへ */
[data-theme="sakura_day"] .luxury-auth-form .luxury-locale-dropdown__trigger {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #3d2b32;
}

[data-theme="sakura_day"] .luxury-auth-form .luxury-locale-dropdown__trigger:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(194, 24, 91, 0.4);
}

[data-theme="sakura_day"] .luxury-auth-form .luxury-locale-dropdown__trigger:focus {
  border-color: rgba(194, 24, 91, 0.5);
  background: rgba(0, 0, 0, 0.02);
  box-shadow:
    0 0 0 3px rgba(194, 24, 91, 0.1),
    0 8px 25px rgba(194, 24, 91, 0.1);
}

[data-theme="sakura_day"] .luxury-auth-form .luxury-locale-dropdown__menu {
  background: linear-gradient(135deg, rgba(255, 245, 248, 0.98) 0%, rgba(255, 234, 241, 0.98) 100%);
  border: 1px solid rgba(194, 24, 91, 0.15);
}

[data-theme="sakura_day"] .luxury-auth-form .luxury-locale-dropdown__item {
  color: rgba(0, 0, 0, 0.8);
}

[data-theme="sakura_day"] .luxury-auth-form .luxury-locale-dropdown__item:hover {
  background: rgba(194, 24, 91, 0.08);
  color: rgba(0, 0, 0, 0.9);
}

[data-theme="sakura_day"] .luxury-auth-form .luxury-locale-dropdown__item--active {
  background: rgba(194, 24, 91, 0.12);
}

[data-theme="sakura_day"] .luxury-auth-form .luxury-locale-dropdown__item--active::after {
  background: #c2185b;
}