/* ===========================
   カラーバリエーション: シルバー/プラチナ
   =========================== */

:root {
    /* メインカラー: シルバー/プラチナ */
    --color-primary: #C0C0C0;
    --color-primary-light: #E5E4E2;
    --color-primary-dark: #A8A8A8;
    
    /* セカンダリカラー */
    --color-secondary: #c41e3a;
    
    /* ベースカラー */
    --color-dark: #0a0a0a;
    --color-dark-2: #1a1a1a;
    --color-dark-3: #2d2d2d;
    --color-dark-4: #3a3a3a;
    --color-light: #ffffff;
    --color-gray: #cccccc;
    --color-gray-dark: #888888;
    
    /* アクセントカラー */
    --color-red: #c41e3a;
    --color-silver: #C0C0C0;
    --color-blue: #4a90e2;
    --color-green: #2ecc71;
    --color-yellow: #f39c12;
    
    /* シャドウ（シルバー用に調整） */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(192, 192, 192, 0.4);
    
    /* タイポグラフィ */
    --font-main: 'Noto Sans JP', sans-serif;
    --font-accent: 'Cinzel', serif;
    
    /* スペーシング */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-xxl: 4rem;
    
    /* トランジション */
    --transition: all 0.3s ease;
    --transition-slow: all 0.5s ease;
}

/* ボタンのグラデーション調整 */
.btn-primary {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    color: var(--color-dark);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #E5E4E2 0%, #C0C0C0 100%);
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
}

.btn-secondary {
    background: var(--color-dark-3);
    color: var(--color-light);
    border: 2px solid var(--color-silver);
}

.btn-secondary:hover {
    background: var(--color-silver);
    color: var(--color-dark);
}

/* ヒーローバッジのグラデーション */
.hero-badge.new {
    background: linear-gradient(135deg, var(--color-red) 0%, var(--color-silver) 100%);
}

/* タイトルのグラデーション */
.title-main,
.section-header h2 {
    background: linear-gradient(135deg, #C0C0C0 0%, #E5E4E2 50%, #C0C0C0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-text {
    background: linear-gradient(135deg, #C0C0C0 0%, var(--color-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ロゴアイコン */
.logo i {
    color: var(--color-silver);
}

/* カードバッジ */
.card-badge.new {
    background: linear-gradient(135deg, var(--color-red) 0%, var(--color-silver) 100%);
}

/* スクロールトップボタン */
.scroll-top-btn {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
}

.scroll-top-btn:hover {
    background: linear-gradient(135deg, #E5E4E2 0%, #C0C0C0 100%);
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.5);
}

/* 各種アクセントカラー */
.hero-date,
.card-title,
.channel-name,
.device-title,
.footer-section h4,
.widget-title {
    color: var(--color-silver);
}

/* ボーダーカラー */
.header,
.hero-badge,
.demo-info,
.countdown-item,
.footer {
    border-color: var(--color-silver);
}

/* ホバー時のカラー */
.main-nav a:hover,
.main-nav a.active,
.quick-nav-item:hover,
.footer-links a:hover,
.article-link {
    color: var(--color-silver);
}

/* ドット */
.dot {
    border-color: var(--color-silver);
}

.dot.active,
.dot:hover {
    background: var(--color-silver);
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.4);
}

/* アイコン */
.logo i,
.hero-badge i,
.channel-avatar i,
.device-icon {
    color: var(--color-silver);
}

/* カテゴリーバッジ */
.article-category {
    background: var(--color-silver);
    color: var(--color-dark);
}

/* スライダーボタン */
.slider-btn {
    border-color: var(--color-silver);
    color: var(--color-silver);
}

.slider-btn:hover {
    background: var(--color-silver);
    color: var(--color-dark);
    box-shadow: 0 0 20px rgba(192, 192, 192, 0.4);
}

/* カード統計 */
.stat-value {
    color: var(--color-silver);
}

/* タイムライン */
.timeline-item {
    border-left-color: var(--color-silver);
}

.timeline-item::before {
    background-color: var(--color-silver);
}

.timeline-date {
    color: var(--color-silver);
}

/* デバイスカード */
.device-card:hover {
    border-color: var(--color-silver);
}

/* ゲームカード */
.game-card:hover {
    border-color: var(--color-silver);
}

.overlay-link {
    background: var(--color-silver);
    color: var(--color-dark);
}

/* 記事カード */
.article-card:hover {
    border-color: var(--color-silver);
}

/* ビデオカード */
.video-card:hover {
    border-color: var(--color-silver);
}