/* === CSS 變數：深色 / 淺色模式 === */
:root {
    /* 淺色模式 */
    --bg: #F8FAFC;
    --text: #1E293B;
    --text-light: #64748B;
    --text-lighter: #94A3B8;
    --accent: #38BDF8;
    --accent-dark: #0EA5E9;
    --card-bg: white;
    --header-bg: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    --header-text: #1E293B;        /* Light Mode 文字：深色 */
    --shadow: 0 4px 12px rgba(0,0,0,0.05);
    --border: #E2E8F0;
    --nav-bg: rgba(248, 250, 252, 0.95);
}

[data-theme="dark"] {
    /* 深色模式 */
    --bg: #0F172A;
    --text: #E2E8F0;
    --text-light: #94A3B8;
    --text-lighter: #64748B;
    --accent: #38BDF8;
    --accent-dark: #7DD3FC;
    --card-bg: #1E293B;
    --header-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --header-text: #FFFFFF;        /* Dark Mode 文字：白色 */
    --shadow: 0 4px 12px rgba(0,0,0,0.3);
    --border: #334155;
    --nav-bg: rgba(15, 23, 42, 0.95);
}

/* === 基礎設定 === */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Noto Sans TC', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    transition: background 0.3s, color 0.3s;
}
h1,h2,h3 { font-family: 'Poppins', sans-serif; font-weight:600; }

/* === 深淺切換按鈕 === */
#theme-toggle {
    position:fixed; top:20px; right:20px; z-index:1000;
    background:var(--card-bg); color:var(--text);
    border:2px solid var(--border); width:50px; height:50px;
    border-radius:50%; font-size:1.3rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow); transition:all .3s;
}
#theme-toggle:hover { transform:scale(1.1); background:var(--accent); color:white; }

/* === 導覽列 === */
#navbar {
    position:fixed; top:0; left:0; width:100%; z-index:999;
    background:var(--nav-bg); backdrop-filter:blur(10px);
    box-shadow:0 2px 10px rgba(0,0,0,.1);
    transition:background .3s;
}
.nav-container {
    max-width:1200px; margin:0 auto; padding:0 20px;
    display:flex; justify-content:space-between; align-items:center;
    height:70px;
}
.nav-logo { font-weight:600; font-size:1.3rem; color:var(--accent); text-decoration:none; }
.nav-menu { list-style:none; display:flex; gap:30px; }
.nav-menu a {
    color:var(--text); text-decoration:none; font-weight:500;
    position:relative; transition:color .3s;
}
.nav-menu a::after {
    content:''; position:absolute; bottom:-5px; left:0; width:0;
    height:2px; background:var(--accent); transition:width .3s;
}
.nav-menu a:hover, .nav-menu a.active { color:var(--accent); }
.nav-menu a:hover::after, .nav-menu a.active::after { width:100%; }

/* === Header / 首頁 === */
#home {
    background: var(--header-bg);
    min-height:100vh; display:flex; align-items:center; text-align:center;
    padding-top:80px; transition: background 0.5s ease;
}

/* 關鍵：使用 --header-text 控制文字顏色 */
#home h1,
#home h2,
#home .slogan,
#home .intro {
    color: var(--header-text) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: color 0.3s ease;
}

#home h1 { font-size:3rem; margin-bottom:.5rem; }
#home h2 { font-size:1.5rem; color:var(--accent); margin-bottom:1rem; }
.slogan { font-size:1.1rem; opacity:0.9; margin-bottom:1.5rem; }
.intro { font-size:1.1rem; max-width:700px; margin:0 auto; line-height:1.8; }

.btn-scroll {
    display:inline-block; margin-top:2rem; padding:12px 30px;
    background:var(--accent); color:white; border-radius:50px;
    text-decoration:none; font-weight:600; transition:.3s;
}
.btn-scroll:hover { background:var(--accent-dark); transform:translateY(-3px); }

/* === 通用容器 === */
.container { max-width:1000px; margin:0 auto; padding:60px 20px; text-align:center; }
section { padding:80px 0; }

/* === 標題底線 === */
h2 {
    font-size:2rem; color:var(--text); margin-bottom:2rem; position:relative;
}
h2::after {
    content:''; width:60px; height:4px; background:var(--accent);
    display:block; margin:10px auto; border-radius:2px;
}

/* === Skills === */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin:30px 0; }
.skill-item {
    background:var(--card-bg); padding:20px; border-radius:12px;
    box-shadow:var(--shadow); transition:transform .3s;
}
.skill-item:hover { transform:translateY(-5px); }
.skill-item span { display:block; font-weight:600; margin-bottom:8px; color:var(--text); }
.stars { font-size:1.2rem; color:var(--accent); }
.note { margin-top:20px; color:var(--text-light); font-size:.95rem; }

/* === Portfolio === */
.portfolio-empty {
    background:rgba(56,189,248,.1); padding:40px; border-radius:16px;
    color:var(--text); font-size:1.1rem; border:1px dashed var(--accent);
}
.update { margin-top:15px; font-weight:600; color:var(--text); }

/* === Education === */
.edu-item {
    background:var(--card-bg); padding:25px; border-radius:12px;
    box-shadow:var(--shadow); margin:20px 0;
}
.edu-item h3 { color:var(--text); margin-bottom:8px; }
.courses { color:var(--accent); font-size:.95rem; margin-top:10px; }
.exp-note { color:var(--text-light); font-style:italic; margin-top:20px; }

/* === Contact === */
.contact-links {
    display:flex; flex-direction:column; gap:15px; margin:30px 0;
    max-width:400px; margin-left:auto; margin-right:auto;
}
.contact-btn {
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--card-bg); color:var(--text); padding:14px 20px;
    border-radius:12px; text-decoration:none; font-weight:500;
    box-shadow:var(--shadow); transition:all .3s; border:1px solid var(--border);
}
.contact-btn:hover { background:var(--accent); color:white; transform:translateY(-3px); }
.contact-btn i { font-size:1.3rem; }
.download-cv {
    display:inline-block; margin-top:30px; background:var(--accent);
    color:white; padding:12px 30px; border-radius:50px; text-decoration:none;
    font-weight:600; box-shadow:0 4px 15px rgba(56,189,248,.3); transition:.3s;
}
.download-cv:hover { background:var(--accent-dark); transform:translateY(-2px); }

/* === 滾動淡入 === */
section { opacity:0; transform:translateY(30px); transition:all .8s ease-out; }
section.visible { opacity:1; transform:translateY(0); }

/* === 響應式 === */
@media (max-width:768px) {
    #home h1 { font-size:2.2rem; }
    .nav-menu { gap:15px; }
    .skills-grid { grid-template-columns:1fr; }
}