/* ==========================================
   1. 定義顏色變數 (預設為淺色模式)
   ========================================== */
:root {
    --body-bg: #eeeeee;
    --text-color: #212529;
    --link-bg: #FFFFFF;
    --link-border: transparent;
    --link-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    --anchor-color: #007bff;
    --anchor-hover-color: #51c000;
}

/* ==========================================
   2. 深色模式下的顏色變數
   ========================================== */
body.dark-mode {
    --body-bg: #121212;               /* 深色背景 */
    --text-color: #e0e0e0;            /* 淺灰色文字，比純白溫和 */
    --link-bg: #1e1e1e;               /* 稍微亮一點的深色卡片背景 */
    --link-border: #2d2d2d;           /* 細微的卡片邊框 */
    --link-shadow: rgba(0, 0, 0, 0.5) 0px 4px 12px; /* 調整陰影在暗處的表現 */
    --anchor-color: #66b2ff;          /* 在暗底上對比度較高的藍色 */
    --anchor-hover-color: #73e600;    /* 稍微亮一點的綠色 */
}

/* ==========================================
   3. 網頁樣式套用
   ========================================== */
body {
    /* 使用變數，並保留原本的 !important 權重以防被 Bootstrap 強制覆蓋 */
    background-color: var(--body-bg) !important;
    color: var(--text-color);
    /* 增加 transition 讓切換深淺色時有淡入淡出的柔和效果 */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.container {
    margin-top: 20px;
}

/* 連結設定 */
a {
    color: var(--anchor-color);
    transition: all 0.4s;
}

a:hover {
    text-decoration: none;
    color: var(--anchor-hover-color);
}

/* 常用連結方塊設定 */
.link {
    margin: 15px;
    padding: 15px;
    word-break: break-all;
    background-color: var(--link-bg);
    border: 1px solid var(--link-border);
    border-radius: 15px; /* 已移除過時的 -webkit- 與 -moz- 前綴 */
    box-shadow: var(--link-shadow);
    font-size: 18px;
    /* 讓方塊在切換模式時也有平滑的漸變效果 */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 頁尾 Copyright 灰色文字微調：避免在黑底上太刺眼 */
body.dark-mode .text-secondary {
    color: #888888 !important;
}

/* ==========================================
   Logo 深淺色模式切換控制
   ========================================== */
/* 預設顯示黑字版，隱藏白字版 */
.logo-light {
    display: inline-block; /* 配合 text-center 居中 */
}
.logo-dark {
    display: none;
}

/* 當 body 套用 dark-mode 時，隱藏黑字版，顯示白字版 */
body.dark-mode .logo-light {
    display: none;
}
body.dark-mode .logo-dark {
    display: inline-block;
}