:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --text-color: #333333;
    --link-color: #0056b3;
    --header-bg-color: #ffffff;
    --button-bg-color: #007bff;
    --button-text-color: #ffffff;
}

.site-header {
    background: var(--header-bg-color) !important;
}

.btn-watch, .btn-submit, .btn-save {
    background: linear-gradient(45deg, var(--primary-color), var(--link-color)) !important;
}

/* ナビゲーションリンク */
.site-nav a {
    color: var(--text-color) !important;
}

.site-nav a:hover, .site-nav a.active {
    color: var(--primary-color) !important;
}

/* 通常のリンク色（ボタン・カテゴリ・ナビ内は除外） */
a:not(.btn):not(.btn-watch):not(.btn-share):not(.btn-back):not(.hero-cta-btn):not([class*="btn-"]):not(.category-item):not(.sort-item):not(.tag-item):not(.site-nav a):not(.video-card) {
    color: var(--link-color) !important;
}

a:not(.btn):not(.btn-watch):not(.btn-share):not(.btn-back):not(.hero-cta-btn):not([class*="btn-"]):not(.category-item):not(.sort-item):not(.tag-item):not(.site-nav a):not(.video-card):hover {
    color: var(--primary-color) !important;
}

/* カテゴリ・並び順・タグのリンク色（テキストカラーを使用） */
.category-item, .sort-item, .tag-item {
    color: var(--text-color) !important;
}

.category-item:hover, .sort-item:hover, .tag-item:hover {
    color: var(--text-color) !important;
}

/* アクティブ状態は白文字 */
.category-item.active, .sort-item.active {
    color: white !important;
}

/* ボタン内のリンクは設定の文字色を適用（より強力なセレクタ） */
/* ※.sort-buttons内の.btn、.btn-backは除外 */
.btn-watch, .btn-copy, .btn-submit, .btn-save,
.btn-watch a, .btn-share a,
a.btn-watch, a.btn-share,
button[class*="btn"]:not(.sort-buttons .btn), .share-buttons a:not(.btn-copy) {
    color: var(--button-text-color) !important;
}

/* 並び順ボタンはテキストカラーを使用 */
.sort-buttons .btn {
    color: var(--text-color) !important;
}

.sort-buttons .btn.active {
    color: white !important;
}

/* ボタン背景色も設定を適用 */
.btn-watch {
    background: var(--button-bg-color) !important;
    color: var(--button-text-color) !important;
}

/* シェアボタン */
.btn-share {
    color: var(--button-text-color) !important;
}

.btn-share:hover {
    color: var(--button-text-color) !important;
}

/* 戻るボタン・コピーボタンはテキストカラー */
.btn-back, .btn-copy {
    color: var(--text-color) !important;
}

.btn-back:hover {
    color: var(--primary-color) !important;
}

body {
    color: var(--text-color) !important;
}

.video-card:hover {
    border-color: var(--primary-color) !important;
}

/* ヒーローセクション */