/**
 * Stitch Theme Overrides
 * 旧テンプレートのクラスをStitchテーマに自動変換
 * 
 * カラーパレット by Stitch:
 * - Neon Pink (Primary): #FF0080
 * - Electric Blue (Secondary): #00D1FF
 * - Mint Green (Success): #3DFFC1
 * - Cyber Purple (Gradient): #9D00FF
 */

/* ==================================
   カラー変数（Stitch公式パレット）
   ================================== */
:root {
    /* アクセントカラー */
    --stitch-primary: #FF0080;
    /* Neon Pink */
    --stitch-secondary: #00D1FF;
    /* Electric Blue */
    --stitch-mint: #3DFFC1;
    /* Mint Green (Success) */
    --stitch-purple: #9D00FF;
    /* Cyber Purple */

    /* ベースカラー */
    --stitch-bg: #0A0A0C;
    /* Deep Space Black */
    --stitch-surface: #16161A;
    /* Card Glass */
    --stitch-border: #2A2A30;
    /* Border Gray */

    /* テキストカラー */
    --stitch-text-primary: #FFFFFF;
    /* Pure White */
    --stitch-text-body: #A1A1AA;
    /* Muted Silver */
    --stitch-text-muted: #71717A;
    /* Darker Muted */

    /* ボタンカラー */
    --btn-primary-bg: #FF0080;
    --btn-primary-text: #FFFFFF;

    --btn-secondary-bg: rgba(0, 209, 255, 0.1);
    --btn-secondary-text: #00D1FF;
    --btn-secondary-border: rgba(0, 209, 255, 0.3);

    --btn-tertiary-bg: rgba(61, 255, 193, 0.1);
    --btn-tertiary-text: #3DFFC1;
    --btn-tertiary-border: rgba(61, 255, 193, 0.3);

    --btn-danger-bg: rgba(220, 38, 38, 0.1);
    --btn-danger-text: #ef4444;
    --btn-danger-border: rgba(220, 38, 38, 0.3);
}

/* ==================================
   ボタンスタイル（Stitchモック準拠）
   ================================== */

/* プライマリ（ピンク背景 + 白文字） */
.bg-indigo-600,
.bg-indigo-500 {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
}

.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-600:hover {
    background-color: var(--btn-primary-bg) !important;
    box-shadow: 0 0 20px -5px rgba(255, 0, 128, 0.5) !important;
}

/* セカンダリ（緑・青→透過背景 + シアン文字） */
.bg-green-600,
.bg-green-500,
.bg-blue-600,
.bg-blue-500 {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border: 1px solid var(--btn-secondary-border) !important;
}

.hover\:bg-green-700:hover,
.hover\:bg-green-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover {
    background-color: rgba(0, 209, 255, 0.2) !important;
    box-shadow: 0 0 25px -8px rgba(0, 209, 255, 0.4) !important;
}

/* デンジャー（赤→透過背景 + 赤文字） */
.bg-red-600,
.bg-red-500 {
    background-color: var(--btn-danger-bg) !important;
    color: var(--btn-danger-text) !important;
    border: 1px solid var(--btn-danger-border) !important;
}

.hover\:bg-red-700:hover,
.hover\:bg-red-600:hover {
    background-color: rgba(220, 38, 38, 0.2) !important;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.3) !important;
}

/* ニュートラル（グレー→透過背景 + ミント文字） */
.bg-gray-600,
.bg-gray-500 {
    background-color: var(--btn-tertiary-bg) !important;
    color: var(--btn-tertiary-text) !important;
    border: 1px solid var(--btn-tertiary-border) !important;
}

.hover\:bg-gray-700:hover,
.hover\:bg-gray-600:hover {
    background-color: rgba(61, 255, 193, 0.2) !important;
    box-shadow: 0 0 25px -8px rgba(61, 255, 193, 0.4) !important;
}

/* ==================================
   背景色の統一
   ================================== */

/* ライト背景→ダーク背景 */
.bg-gray-100,
.bg-gray-200,
.bg-gray-50,
.bg-white {
    background-color: var(--stitch-surface) !important;
}

/* ダーク背景（調整） */
.bg-gray-800,
.bg-gray-900 {
    background-color: var(--stitch-surface) !important;
}

/* ==================================
   テキストカラーの統一
   ================================== */

/* ダーク文字→ライト文字 */
.text-gray-900,
.text-gray-800 {
    color: var(--stitch-text-primary) !important;
}

.text-gray-700 {
    color: var(--stitch-text-body) !important;
}

.text-gray-600,
.text-gray-500 {
    color: var(--stitch-text-muted) !important;
}

/* ==================================
   ボーダーの統一
   ================================== */

.border-gray-200,
.border-gray-300,
.border-gray-700,
.border-gray-800 {
    border-color: var(--stitch-border) !important;
}

.divide-gray-200> :not([hidden])~ :not([hidden]),
.divide-gray-700> :not([hidden])~ :not([hidden]) {
    border-color: var(--stitch-border) !important;
}

/* ==================================
   ホバー効果の統一
   ================================== */

.hover\:bg-gray-50:hover,
.hover\:bg-gray-100:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ==================================
   フォーカスリングの統一
   ================================== */

.focus\:ring-indigo-500:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-green-500:focus {
    --tw-ring-color: var(--stitch-primary) !important;
    --tw-ring-opacity: 0.4 !important;
}

.focus\:border-indigo-500:focus,
.focus\:border-blue-500:focus {
    border-color: var(--stitch-primary) !important;
}

/* ==================================
   ネオンシャドウ効果（Stitch公式）
   ================================== */

.shadow-neon,
.shadow-neon-pink {
    box-shadow: 0 0 20px -5px rgba(255, 0, 128, 0.5) !important;
}

.shadow-neon-blue {
    box-shadow: 0 0 25px -8px rgba(0, 209, 255, 0.4) !important;
}

.shadow-neon-mint {
    box-shadow: 0 0 25px -8px rgba(61, 255, 193, 0.4) !important;
}

/* ==================================
   テキストグロー効果
   ================================== */

.text-glow-pink {
    text-shadow: 0 0 15px rgba(255, 0, 128, 0.6) !important;
}

.text-glow-blue {
    text-shadow: 0 0 15px rgba(0, 209, 255, 0.6) !important;
}

.text-glow-mint {
    text-shadow: 0 0 15px rgba(61, 255, 193, 0.6) !important;
}

/* ==================================
   ガラスパネル（Stitch公式）
   ================================== */

.glass-panel {
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.glass-panel:hover {
    border-color: rgba(255, 0, 128, 0.3) !important;
}

/* ガラスボタン */
.glass-button {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
}

/* ==================================
   アクセントカラークラス
   ================================== */

/* プライマリ（ネオンピンク） */
.text-primary,
.text-indigo-600 {
    color: var(--stitch-primary) !important;
}

/* セカンダリ（エレクトリックブルー） */
.text-secondary,
.text-cyan-400 {
    color: var(--stitch-secondary) !important;
}

/* ミント（成功系） */
.text-mint,
.text-green-400 {
    color: var(--stitch-mint) !important;
}

/* パープル（グロー用） */
.text-purple {
    color: var(--stitch-purple) !important;
}

/* ==================================
   フォント
   ================================== */

body {
    font-family: 'Inter', 'Noto Sans JP', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
    font-family: 'Space Grotesk', 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif !important;
    letter-spacing: -0.02em;
}

.font-mono {
    font-family: 'Space Mono', 'Courier New', monospace !important;
}

.logo-font,
header h2 {
    font-family: 'Lexend', 'Outfit', sans-serif !important;
}

/* ==================================
   入力フィールド
   Tailwind formsプラグインが全inputに background-color: #fff を適用するため、
   全タイプを網羅してダーク背景にオーバーライドする必要がある
   ================================== */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
input:not([type]),
textarea,
select {
    background-color: var(--stitch-surface) !important;
    border-color: var(--stitch-border) !important;
    color: var(--stitch-text-primary) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--stitch-text-muted) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--stitch-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 0, 128, 0.2) !important;
}

/* ==================================
   カスタムスクロールバー
   ================================== */

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}