/* dark-mode.css - 深藍色模式覆蓋樣式 */


/* 當 body 具有 dark class 時，重新定義 CSS 變數 */

.dark {
    /* ========== 顏色變數 (深藍色模式) ========== */
    --color-bg-primary: #0A192F;
    /* 科技深藍背景 */
    --color-bg-secondary: #172A46;
    /* 輔助背景 (例如卡片) */
    --color-text-primary: #F0F8FF;
    /* 主要文字色 (極淺藍) */
    --color-text-secondary: #94A3B8;
    /* 輔助文字色 (灰藍) */
    /* 強調色 (Accent Color) */
    --color-accent: #00bbff;
    /* 螢光亮藍/青色 (科技感) */
    --color-accent-hover: #4EE4C4;
    /* 強調色滑鼠懸停 */
    /* 程式碼區塊 */
    --color-code-bg: #1F304B;
    /* 深色程式碼背景 */
    --color-code-text: #F0F8FF;
    /* 邊框與陰影 */
    --color-border: #334155;
    --shadow-light: 0 4px 10px rgba(0, 0, 0, 0.3);
    /* 深色模式下更明顯的陰影 */
    --color-link: var(--color-accent);
    /* 讓連結顏色直接使用螢光亮藍 */
    --color-link-hover: var(--color-accent-hover);
}


/* 確保導覽列在深色模式下使用深色背景和更小的透明度 */

.dark .navbar {
    background-color: rgba(10, 25, 47, 0.95);
    border-bottom: 1px solid var(--color-border);
}


/* 確保專案卡片的 WIP 標籤使用亮藍色邊框 */

.dark .navbar a {
    color: var(--color-text-secondary);
    /* 導覽列連結保持次要文字色，hover 變成強調色 */
}

.dark .navbar a:hover {
    color: var(--color-accent);
}


/* 確保專案卡片中的連結使用強調色 */

.dark .project-card .links a {
    color: var(--color-link);
    /* 直接使用 --color-link 變數 */
}

.dark .project-card .links a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}


/* 深色模式下的 body 背景圖調整 */

.dark body {
    background-image: url('https://via.placeholder.com/1920x1080/0A192F/1E40AF?text=Abstract+Dark+Tech+Background');
    /* 深色模式下可以使用一張更暗、更科技感的背景圖 */
    background-blend-mode: overlay;
    /* 混合模式讓背景圖與深藍色主色融合 */
    opacity: 0.85;
    /* 降低背景圖的整體透明度，讓深藍色更突出 */
}


/* 讓 Hero Section 感覺像是漂浮在背景圖上 */

.dark .hero-section {
    /* 確保這裡不再設定任何 margin 或 padding，讓它繼承 style.css 的基準 */
    background: none;
    padding: 0;
    margin: 0;
    /* 移除可能造成衝突的 margin 屬性，讓其繼承 style.css 的 6rem auto */
    max-width: none;
}


/* 確保 navbar 和 project cards 也有一點半透明效果，透出背景 */

.dark .navbar {
    background-color: rgba(10, 25, 47, 0.8);
    /* 導覽列也半透明 */
}

.dark .project-card {
    background-color: rgba(23, 42, 70, 0.7);
    /* 專案卡片也半透明 */
    border: 1px solid rgba(51, 65, 85, 0.7);
}


/* 確保 WIP 標籤在深色模式下邊框使用強調色 */

.dark .project-card.featured-wip {
    border: 2px solid var(--color-accent);
}


/* 確保背景圖足夠低調，不搶戲 */

.dark body {
    background-image: url('../images/abstract-tech-dark.jpg');
    /* 深色模式背景圖 */
    background-color: #0A192F;
    /* 作為背景圖的底色 */
    background-blend-mode: soft-light;
    /* 柔和光線混合模式，讓背景圖與深藍色主色融合 */
    opacity: 1;
    /* 圖片在深色模式下可以更顯眼一點 */
}


/* 讓主要內容區塊在背景上「漂浮」 */

main {
    padding: 2rem 0;
    /* 在頂部和底部增加空間 */
}


/* ========== Hero Section 優化 (實現漂浮的卡片感) ========== */

.dark .hero-section {
    background: none;
    /* 移除區塊背景 */
    padding: 0;
    margin: 4rem 0;
    /* 保持 Hero 區塊的上下間距，但移除左右 auto 設置 */
    max-width: none;
    /* 移除最大寬度限制，讓它延伸到 .container 的邊界 */
}

.dark .hero-section .container {
    /* 保持深色模式下的面板樣式 */
    background-color: rgba(10, 25, 47, 0.85);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 3rem 4rem;
    /* 保持與淺色模式一致的內部空間 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    text-align: center;
    /* 確保在深色模式下也是居中對齊 */
}

.dark .hero-section .title {
    font-size: 3.5rem;
    /* 稍微縮小標題 */
    margin-bottom: 0.5rem;
}


/* ========== 專案總覽區塊優化 (調整卡片間距與陰影) ========== */

.dark .projects-section {
    padding: 4rem 0;
}

.dark .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    /* 增加卡片之間的間距 */
}

.dark .project-card {
    /* 使用稍淺的半透明背景，與 Hero 區塊錯開層次 */
    background-color: rgba(23, 42, 70, 0.7);
    border: 1px solid rgba(51, 65, 85, 0.7);
    padding: 2.5rem;
    /* 增加卡片內邊距 */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    /* 輕微陰影 */
}

.dark .project-card .links a {
    color: var(--color-accent);
    /* 螢光亮藍色文字 */
    border: 1px solid var(--color-accent);
    /* 螢光亮藍色邊框 */
    background-color: transparent;
}

.dark .project-card .links a:hover {
    /* 懸停時，填充螢光亮藍的背景色 */
    background-color: var(--color-accent);
    color: var(--color-bg-primary);
    /* 文字變為深藍色 (高對比) */
    text-decoration: none;
}


/* 專門處理 WIP 卡片，讓它像設計圖一樣使用強調色邊框 */

.dark .project-card.featured-wip {
    border: 2px solid var(--color-accent);
    /* 螢光亮藍邊框 */
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.4);
    /* 增加發光效果 */
}


/* 確保所有文字連結都使用螢光亮藍色 */

.dark a:not(.cta-button) {
    color: var(--color-accent);
}

.dark .error-panel {
    background-color: rgba(23, 42, 70, 0.9);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.dark .section-panel {
    /* 將背景色調整為更深的顏色並增加透明度 (0.7 甚至更低) */
    background-color: rgba(10, 25, 47, 0.7);
    /* 使用主背景色，但保持半透明 */
    /* 確保邊框依然可見 */
    border: 1px solid rgba(51, 65, 85, 0.6);
    /* 移除陰影，讓它更貼合背景 */
    box-shadow: none;
}


/* dark-mode.css - Footer 樣式修正 (深色模式) */

.dark .footer {
    /* 使用深色模式的半透明背景 */
    background-color: rgba(10, 25, 47, 0.85);
    border: 1px solid var(--color-border);
    /* 移除淺色模式的陰影，改用深色陰影 */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    /* 確保文字顏色正確 */
    color: var(--color-text-secondary);
}