/**
 * モダンWebデザイン配色システム
 * Material Design 3.0 + アクセシビリティ準拠の高品質配色
 */

/* デフォルトテーマカラー（モダンブルー） */
:root {
    /* プライマリカラーパレット */
    --theme-primary: #2563eb;
    --theme-primary-light: #3b82f6;
    --theme-primary-dark: #1d4ed8;
    --theme-primary-50: #eff6ff;
    --theme-primary-100: #dbeafe;
    --theme-primary-200: #bfdbfe;
    --theme-primary-500: #3b82f6;
    --theme-primary-600: #2563eb;
    --theme-primary-700: #1d4ed8;
    --theme-primary-800: #1e40af;
    --theme-primary-900: #1e3a8a;
    
    /* セカンダリカラーパレット */
    --theme-secondary: #64748b;
    --theme-secondary-light: #94a3b8;
    --theme-secondary-dark: #475569;
    --theme-secondary-50: #f8fafc;
    --theme-secondary-100: #f1f5f9;
    --theme-secondary-200: #e2e8f0;
    --theme-secondary-500: #64748b;
    --theme-secondary-600: #475569;
    --theme-secondary-700: #334155;
    --theme-secondary-800: #1e293b;
    --theme-secondary-900: #0f172a;
    
    /* アクセントカラー */
    --theme-accent: #f59e0b;
    --theme-accent-light: #fbbf24;
    --theme-accent-dark: #d97706;
    
    /* セマンティックカラー */
    --theme-success: #10b981;
    --theme-warning: #f59e0b;
    --theme-error: #ef4444;
    --theme-info: #3b82f6;
    
    /* ニュートラルカラー */
    --theme-neutral-50: #fafafa;
    --theme-neutral-100: #f5f5f5;
    --theme-neutral-200: #e5e5e5;
    --theme-neutral-300: #d4d4d4;
    --theme-neutral-400: #a3a3a3;
    --theme-neutral-500: #737373;
    --theme-neutral-600: #525252;
    --theme-neutral-700: #404040;
    --theme-neutral-800: #262626;
    --theme-neutral-900: #171717;
    
    /* グラデーション */
    --theme-gradient: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    --theme-gradient-light: linear-gradient(135deg, var(--theme-primary-50) 0%, var(--theme-primary-100) 100%);
    --theme-gradient-subtle: linear-gradient(135deg, var(--theme-primary-100) 0%, var(--theme-primary-200) 100%);
    
    /* シャドウ */
    --theme-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --theme-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --theme-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --theme-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --theme-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* テキストカラー */
    --theme-text-primary: var(--theme-neutral-900);
    --theme-text-secondary: var(--theme-neutral-600);
    --theme-text-tertiary: var(--theme-neutral-500);
    --theme-text-inverse: #ffffff;
    
    /* 背景カラー */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: var(--theme-neutral-50);
    --theme-bg-tertiary: var(--theme-neutral-100);
}

/* 茶色系テーマ（ウォームアーストーン） */
.theme-brown {
    /* プライマリカラーパレット */
    --theme-primary: #a16207;
    --theme-primary-light: #ca8a04;
    --theme-primary-dark: #854d0e;
    --theme-primary-50: #fefce8;
    --theme-primary-100: #fef3c7;
    --theme-primary-200: #fde68a;
    --theme-primary-500: #f59e0b;
    --theme-primary-600: #d97706;
    --theme-primary-700: #b45309;
    --theme-primary-800: #92400e;
    --theme-primary-900: #78350f;
    
    /* セカンダリカラーパレット（ウォームグレー） */
    --theme-secondary: #78716c;
    --theme-secondary-light: #a8a29e;
    --theme-secondary-dark: #57534e;
    --theme-secondary-50: #fafaf9;
    --theme-secondary-100: #f5f5f4;
    --theme-secondary-200: #e7e5e4;
    --theme-secondary-500: #78716c;
    --theme-secondary-600: #57534e;
    --theme-secondary-700: #44403c;
    --theme-secondary-800: #292524;
    --theme-secondary-900: #1c1917;
    
    /* アクセントカラー（ウォームオレンジ） */
    --theme-accent: #ea580c;
    --theme-accent-light: #fb923c;
    --theme-accent-dark: #c2410c;
    
    /* グラデーション */
    --theme-gradient: linear-gradient(135deg, #a16207 0%, #d97706 50%, #854d0e 100%);
    --theme-gradient-light: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    --theme-gradient-subtle: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    
    /* シャドウ */
    --theme-shadow: rgba(161, 98, 7, 0.25);
    --theme-shadow-md: 0 10px 15px -3px rgba(161, 98, 7, 0.1), 0 4px 6px -2px rgba(161, 98, 7, 0.05);
    
    /* テキストカラー */
    --theme-text-primary: #1c1917;
    --theme-text-secondary: #57534e;
    --theme-text-tertiary: #78716c;
}

/* 緑系テーマ（ナチュラルグリーン） */
.theme-green {
    /* プライマリカラーパレット */
    --theme-primary: #059669;
    --theme-primary-light: #10b981;
    --theme-primary-dark: #047857;
    --theme-primary-50: #ecfdf5;
    --theme-primary-100: #d1fae5;
    --theme-primary-200: #a7f3d0;
    --theme-primary-500: #10b981;
    --theme-primary-600: #059669;
    --theme-primary-700: #047857;
    --theme-primary-800: #065f46;
    --theme-primary-900: #064e3b;
    
    /* セカンダリカラーパレット */
    --theme-secondary: #6b7280;
    --theme-secondary-light: #9ca3af;
    --theme-secondary-dark: #4b5563;
    
    /* アクセントカラー */
    --theme-accent: #f59e0b;
    --theme-accent-light: #fbbf24;
    --theme-accent-dark: #d97706;
    
    /* グラデーション */
    --theme-gradient: linear-gradient(135deg, #059669 0%, #10b981 50%, #047857 100%);
    --theme-gradient-light: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    --theme-gradient-subtle: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    
    /* シャドウ */
    --theme-shadow: rgba(5, 150, 105, 0.25);
    --theme-shadow-md: 0 10px 15px -3px rgba(5, 150, 105, 0.1), 0 4px 6px -2px rgba(5, 150, 105, 0.05);
    
    /* テキストカラー */
    --theme-text-primary: #064e3b;
    --theme-text-secondary: #4b5563;
    --theme-text-tertiary: #6b7280;
}

/* 赤系テーマ */
.theme-red {
    --theme-primary: #f44336;
    --theme-secondary: #e53935;
    --theme-accent: #ff6659;
    --theme-light: #FFEBEE;
    --theme-dark: #C62828;
    --theme-gradient: linear-gradient(135deg, #f44336 0%, #e53935 50%, #C62828 100%);
    --theme-gradient-light: linear-gradient(135deg, #FFEBEE 0%, #FFCDD2 100%);
    --theme-shadow: rgba(244, 67, 54, 0.3);
    --theme-text: #C62828;
    --theme-text-light: #f44336;
}

/* 紫系テーマ */
.theme-purple {
    --theme-primary: #9C27B0;
    --theme-secondary: #8E24AA;
    --theme-accent: #BA68C8;
    --theme-light: #F3E5F5;
    --theme-dark: #6A1B9A;
    --theme-gradient: linear-gradient(135deg, #9C27B0 0%, #8E24AA 50%, #6A1B9A 100%);
    --theme-gradient-light: linear-gradient(135deg, #F3E5F5 0%, #E1BEE7 100%);
    --theme-shadow: rgba(156, 39, 176, 0.3);
    --theme-text: #6A1B9A;
    --theme-text-light: #9C27B0;
}

/* オレンジ系テーマ */
.theme-orange {
    --theme-primary: #FF9800;
    --theme-secondary: #F57C00;
    --theme-accent: #FFB74D;
    --theme-light: #FFF3E0;
    --theme-dark: #E65100;
    --theme-gradient: linear-gradient(135deg, #FF9800 0%, #F57C00 50%, #E65100 100%);
    --theme-gradient-light: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
    --theme-shadow: rgba(255, 152, 0, 0.3);
    --theme-text: #E65100;
    --theme-text-light: #FF9800;
}

/* ピンク系テーマ */
.theme-pink {
    --theme-primary: #E91E63;
    --theme-secondary: #C2185B;
    --theme-accent: #F06292;
    --theme-light: #FCE4EC;
    --theme-dark: #AD1457;
    --theme-gradient: linear-gradient(135deg, #E91E63 0%, #C2185B 50%, #AD1457 100%);
    --theme-gradient-light: linear-gradient(135deg, #FCE4EC 0%, #F8BBD9 100%);
    --theme-shadow: rgba(233, 30, 99, 0.3);
    --theme-text: #AD1457;
    --theme-text-light: #E91E63;
}

/* グレー系テーマ */
.theme-gray {
    --theme-primary: #607D8B;
    --theme-secondary: #546E7A;
    --theme-accent: #78909C;
    --theme-light: #ECEFF1;
    --theme-dark: #37474F;
    --theme-gradient: linear-gradient(135deg, #607D8B 0%, #546E7A 50%, #37474F 100%);
    --theme-gradient-light: linear-gradient(135deg, #ECEFF1 0%, #CFD8DC 100%);
    --theme-shadow: rgba(96, 125, 139, 0.3);
    --theme-text: #37474F;
    --theme-text-light: #607D8B;
}

/* 動的テーマカラー適用 */
.theme-dynamic {
    /* JavaScriptで動的に設定される */
}

/* 強制的にテーマカラーを適用 */
.theme-dynamic .customer-header {
    background: var(--theme-gradient-light, var(--theme-gradient, linear-gradient(135deg, var(--theme-primary, #2563eb) 0%, var(--theme-primary, #2563eb) 100%))) !important;
    border-bottom: 3px solid var(--theme-primary, #2563eb) !important;
    box-shadow: 0 2px 8px var(--theme-shadow, rgba(0,0,0,0.1)) !important;
}

/* 管理画面ヘッダーの背景色と文字色を強制適用 */
.theme-dynamic .admin-header {
    background: var(--theme-gradient) !important;
    color: white !important;
}

.theme-dynamic .admin-header * {
    color: white !important;
}

.theme-dynamic .admin-header .site-title a,
.theme-dynamic .admin-header .admin-name,
.theme-dynamic .admin-header .admin-role,
.theme-dynamic .admin-header .btn-header {
    color: white !important;
}

/* 茶色系テーマでも濃い背景色と白文字を強制適用 */
.theme-brown .admin-header {
    background: linear-gradient(135deg, #a16207 0%, #854d0e 100%) !important;
    color: white !important;
}

.theme-brown .admin-header * {
    color: white !important;
}

.theme-brown .admin-header .site-title a,
.theme-brown .admin-header .admin-name,
.theme-brown .admin-header .admin-role,
.theme-brown .admin-header .btn-header {
    color: white !important;
}

.theme-dynamic .store-name {
    color: var(--theme-primary, #2563eb) !important;
}

.theme-dynamic .btn-primary {
    background: var(--theme-primary, #2563eb) !important;
    box-shadow: 0 2px 8px var(--theme-shadow, rgba(0,0,0,0.2)) !important;
}

.theme-dynamic .btn-primary:hover {
    background: var(--theme-secondary, var(--theme-primary, #2563eb)) !important;
    box-shadow: 0 4px 15px var(--theme-shadow, rgba(0,0,0,0.3)) !important;
}

/* テーマカラー適用用のユーティリティクラス */
.theme-header {
    background: var(--theme-gradient);
    border-bottom: 3px solid var(--theme-primary);
}

.theme-button {
    background: var(--theme-primary);
    color: white;
    border: none;
    transition: all 0.3s ease;
}

.theme-button:hover {
    background: var(--theme-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--theme-shadow);
}

.theme-button-secondary {
    background: var(--theme-light);
    color: var(--theme-text);
    border: 2px solid var(--theme-primary);
}

.theme-button-secondary:hover {
    background: var(--theme-primary);
    color: white;
}

.theme-card {
    background: white;
    border: 2px solid var(--theme-light);
    box-shadow: 0 4px 15px var(--theme-shadow);
}

.theme-text {
    color: var(--theme-text);
}

.theme-text-light {
    color: var(--theme-text-light);
}

.theme-accent {
    color: var(--theme-accent);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .theme-header {
        padding: 1rem;
    }
    
    .theme-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
}