/*
========================================
CG12R V2 Color Theme System
Version: 1.0
Browser-side theme switching
========================================
*/


/* 經典深海藍金 */
html[data-color-theme="ocean"] {
    --ct-bg: #102A3A;
    --ct-card: #19394A;
    --ct-soft: #27495B;
    --ct-text: #E9E5DC;
    --ct-muted: #C4D1D8;
    --ct-gold: #D2AD67;
    --ct-line: #527183;
    --ct-input: #173446;
}


/* 杏仁奶茶金 */
html[data-color-theme="almond"] {
    --ct-bg: #EAD7C0;
    --ct-card: #F9EDDC;
    --ct-soft: #E0C7A8;
    --ct-text: #503928;
    --ct-muted: #745B47;
    --ct-gold: #9C7036;
    --ct-line: #CDB08D;
    --ct-input: #FFF3E4;
}

/* 暖灰金 */
html[data-color-theme="greige"] {
    --ct-bg: #E9E5DE;
    --ct-card: #F7F5F0;
    --ct-soft: #DCD7CD;
    --ct-text: #444039;
    --ct-muted: #69645B;
    --ct-gold: #A38647;
    --ct-line: #CAC3B6;
    --ct-input: #FCFAF6;
}

/* 摩卡咖啡金 */
html[data-color-theme="mocha"] {
    --ct-bg: #30251F;
    --ct-card: #47362B;
    --ct-soft: #574333;
    --ct-text: #F6E9D7;
    --ct-muted: #D1BBA3;
    --ct-gold: #E0B66C;
    --ct-line: #775B43;
    --ct-input: #3D3027;
}

/*
黑金版不設定覆蓋規則，
直接使用網站原本的 CSS。
*/

html[data-color-theme]:not([data-color-theme="gold"]) {
    --bg: var(--ct-bg);
    --text: var(--ct-text);
    --card: var(--ct-card);
    --line: var(--ct-line);
    --gold: var(--ct-gold);
}

/* 全站背景與文字 */

html[data-color-theme]:not([data-color-theme="gold"]) body {
    background: var(--ct-bg);
    color: var(--ct-text);
}

/* 原本共用卡片 */

html[data-color-theme]:not([data-color-theme="gold"])
:is(.panel, .card, .article-card, .content) {
    background: var(--ct-card);
    color: var(--ct-text);
    border-color: var(--ct-line);
}

/* 網站導覽 */

html[data-color-theme]:not([data-color-theme="gold"])
.header-nav a {
    background: var(--ct-card);
    color: var(--ct-gold);
    border-color: var(--ct-line);
}

html[data-color-theme]:not([data-color-theme="gold"])
.header-nav a:hover {
    background: var(--ct-soft);
}

/* 搜尋欄 */

html[data-color-theme]:not([data-color-theme="gold"])
:is(.header-search-scope, .header-input) {
    background: var(--ct-input);
    color: var(--ct-text);
    border-color: var(--ct-line);
}

html[data-color-theme]:not([data-color-theme="gold"])
.header-input::placeholder {
    color: var(--ct-muted);
}

/* 顏色選擇按鈕的共用外觀 */

.color-theme-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 12px 0;
}

.color-theme-label {
    font-size: 13px;
}

.color-theme-button {
    padding: 8px 13px;
    border: 1px solid #A38647;
    border-radius: 6px;
    background: #181818;
    color: #D6A84F;
    font-size: 13px;
    cursor: pointer;
}

.color-theme-button.active {
    background: #C8953C;
    color: #111;
    font-weight: bold;
}

html[data-color-theme]:not([data-color-theme="gold"])
.color-theme-button {
    background: var(--ct-card);
    color: var(--ct-text);
    border-color: var(--ct-gold);
}

html[data-color-theme]:not([data-color-theme="gold"])
.color-theme-button.active {
    background: var(--ct-gold);
    color: var(--ct-bg);
    font-weight: bold;
}

/*
========================================
首頁商品卡片 - 五色主題
僅套用非黑金版
========================================
*/

/* 商品卡片 */
html[data-color-theme]:not([data-color-theme="gold"])
.home-section .card {
    background: var(--ct-card) !important;
    border-color: var(--ct-line) !important;
    color: var(--ct-text);
}

/* 商品名稱 */
html[data-color-theme]:not([data-color-theme="gold"])
.home-section .name {
    color: var(--ct-text) !important;
}

/* 商品編號 */
html[data-color-theme]:not([data-color-theme="gold"])
.home-section .no {
    color: var(--ct-muted);
}

/* 價格 */
html[data-color-theme]:not([data-color-theme="gold"])
.home-section .price {
    color: var(--ct-gold);
}

/* 購物金 */
html[data-color-theme]:not([data-color-theme="gold"])
.home-section .points {
    color: var(--ct-muted);
}

/* 商品區標題 */
html[data-color-theme]:not([data-color-theme="gold"])
.home-section-head {
    border-bottom-color: var(--ct-gold);
}

html[data-color-theme]:not([data-color-theme="gold"])
.home-section-title,
html[data-color-theme]:not([data-color-theme="gold"])
.home-section-more {
    color: var(--ct-gold);
}

/* 查看更多 */
html[data-color-theme]:not([data-color-theme="gold"])
.more-btn {
    background: var(--ct-card);
    border-color: var(--ct-gold);
    color: var(--ct-gold);
}

html[data-color-theme]:not([data-color-theme="gold"])
.more-btn:hover {
    background: var(--ct-gold);
    border-color: var(--ct-gold);
    color: #111111;
}

/* 商品加入購物車及收藏圖示 */
html[data-color-theme]:not([data-color-theme="gold"])
.home-section .product_action {
    color: var(--ct-gold);
}

html[data-color-theme]:not([data-color-theme="gold"])
.home-section .product_action:hover {
    background: var(--ct-soft);
    color: var(--ct-gold);
}

html[data-color-theme]:not([data-color-theme="gold"])
.home-section .product_action:active {
    background: var(--ct-bg);
    color: var(--ct-gold);
}


/*
========================================
首頁公告 / 新片 / 代購選項配色
黑金版維持原樣
========================================
*/

html[data-color-theme]:not([data-color-theme="gold"])
.info-tab:not(.active) {
    background: var(--ct-card);
    color: var(--ct-gold);
    border-color: var(--ct-gold);
}