/* ================================================================
   DEAN.TODAY · 榮耀卡視覺系統 · Design Tokens
   ================================================================
   色調：黑底 + 古典金 + 印章紅點綴
   靈感：台北市役男當兵榮耀卡 · 東方書卷金石
   用法：主站 + 未來子站（paperclip 等）共用
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* 背景層（由深到淺） */
  --bg-deep:     #0A0907;
  --bg-base:     #14110E;
  --bg-card:     #1E1A15;
  --bg-elevated: #2A241D;

  /* 金色層（由暗到亮） */
  --gold-deep:   #6B5A2E;
  --gold-base:   #A88A4A;
  --gold-bright: #D4AF37;
  --gold-glow:   #E8C470;

  /* 點綴色 */
  --ink-red:     #8B2E1F;
  --jade:        #4A6E5D;

  /* 文字層 */
  --text-title:  #E8DCC4;
  --text-body:   #B8AE94;
  --text-mute:   #6B6150;
  --text-gold:   #D4AF37;

  /* 邊線（金色透明度梯度） */
  --border-gold:  rgba(212, 175, 55, 0.28);
  --border-soft:  rgba(212, 175, 55, 0.12);
  --border-hair:  rgba(212, 175, 55, 0.06);

  /* 字型 */
  --font-serif-tc: "Noto Serif TC", "Songti TC", "Source Han Serif TC", serif;
  --font-serif-en: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "SF Mono", Monaco, monospace;

  /* 圓角（榮耀卡偏硬方） */
  --radius-sharp: 2px;
  --radius-card:  6px;
  --radius-soft:  12px;

  /* 間距節奏 */
  --pad-s:   8px;
  --pad-m:   16px;
  --pad-l:   32px;
  --pad-xl:  64px;
  --pad-xxl: 120px;

  /* 陰影 */
  --glow-gold:  0 0 24px rgba(212, 175, 55, 0.15);
  --glow-deep:  0 8px 32px rgba(0, 0, 0, 0.6);
  --glow-hover: 0 12px 48px rgba(212, 175, 55, 0.12);
}

/* ---- 重置 + 基底 ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--text-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--text-gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold-glow); }

/* ---- 原子樣式（子站可直接用） ---- */
.gold        { color: var(--gold-bright); }
.gold-deep   { color: var(--gold-base); }
.text-title  { color: var(--text-title); }
.text-mute   { color: var(--text-mute); }
.serif-tc    { font-family: var(--font-serif-tc); }
.serif-en    { font-family: var(--font-serif-en); }
.sans        { font-family: var(--font-sans); }
.mono        { font-family: var(--font-mono); }

/* ---- 金線分隔 ---- */
.gold-line {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border-gold) 20%,
    var(--gold-base) 50%,
    var(--border-gold) 80%,
    transparent 100%);
  margin: var(--pad-xl) auto;
  max-width: 480px;
}

/* ---- 金色章印（印章紅底紅字） ---- */
.seal {
  display: inline-block;
  padding: 3px 12px;
  font-family: var(--font-serif-tc);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--ink-red);
  background: rgba(139, 46, 31, 0.08);
  border: 1px solid var(--ink-red);
  border-radius: var(--radius-sharp);
  text-indent: 3px;
}

/* ---- 金色標籤（mono） ---- */
.tag-gold {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--gold-bright);
  background: rgba(212, 175, 55, 0.05);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sharp);
  text-transform: uppercase;
}

/* ---- 選取高亮 ---- */
::selection { background: var(--gold-base); color: var(--bg-deep); }

/* ---- 響應式調整 ---- */
@media (max-width: 768px) {
  :root {
    --pad-xxl: 72px;
    --pad-xl:  44px;
    --pad-l:   24px;
  }
  body { line-height: 1.7; }
}

/* ---- 動畫：淡入 + 輕微金光 ---- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fade-in-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ============================================================
   淺色主題 · 象牙米白 + 暗金 + 墨褐（宣紙竹簡 · Moleskine 筆記本）
   啟動方式：<html data-theme="light">
   ============================================================ */

[data-theme="light"] {
  --bg-deep:     #F7F2E5;
  --bg-base:     #EEE6D3;
  --bg-card:     #FBF7EC;
  --bg-elevated: #FFFFFF;

  --gold-deep:   #8B6F2A;
  --gold-base:   #A88A4A;
  --gold-bright: #8B6914;
  --gold-glow:   #B8941F;

  --ink-red:     #8B2E1F;
  --jade:        #4A6E5D;

  --text-title:  #1F1A10;
  --text-body:   #3D3624;
  --text-mute:   #7A6D52;
  --text-gold:   #8B6914;

  --border-gold: rgba(139, 105, 20, 0.30);
  --border-soft: rgba(139, 105, 20, 0.15);
  --border-hair: rgba(139, 105, 20, 0.08);

  --glow-gold:   0 0 24px rgba(139, 105, 20, 0.10);
  --glow-deep:   0 6px 24px rgba(60, 40, 10, 0.08);
  --glow-hover:  0 12px 40px rgba(139, 105, 20, 0.12);
}

/* 淺色下寫死顏色的關鍵區塊 override */

/* 頂部導覽半透明底（淺色） */
[data-theme="light"] .site-head {
  background: rgba(247, 242, 229, 0.88) !important;
  border-bottom-color: rgba(139, 105, 20, 0.10) !important;
}

/* Hero radial gradient 重新配色 */
[data-theme="light"] .hero {
  background:
    radial-gradient(ellipse at center top, rgba(139, 105, 20, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at center bottom, rgba(139, 46, 31, 0.025) 0%, transparent 50%),
    #F7F2E5 !important;
}

/* Hero 標題大金字陰影柔化（淺色下不要太濃） */
[data-theme="light"] .hero-title {
  text-shadow: 0 2px 10px rgba(139, 105, 20, 0.18) !important;
}

/* Works / 卡片陰影（淺色） */
[data-theme="light"] .work-card,
[data-theme="light"] .gcard,
[data-theme="light"] .mini-card,
[data-theme="light"] .concept-card,
[data-theme="light"] .domain-card {
  box-shadow: 0 2px 8px rgba(60, 40, 10, 0.04) !important;
}
[data-theme="light"] .work-card:hover {
  box-shadow: 0 10px 32px rgba(139, 105, 20, 0.14) !important;
}

/* Essence / Mock Quiz / Frame 等容器漸層（淺色） */
[data-theme="light"] .hero-frame,
[data-theme="light"] .work-card,
[data-theme="light"] .mock-q,
[data-theme="light"] .quiz {
  background: linear-gradient(180deg, #FBF7EC 0%, #EEE6D3 100%) !important;
}

/* Body 選取高亮（淺色下金色主調） */
[data-theme="light"] ::selection {
  background: #8B6914 !important;
  color: #FBF7EC !important;
}

/* Scrollbar 顏色（只影響支援的瀏覽器 · 不強制） */
html { scrollbar-color: var(--gold-base) var(--bg-base); }

/* ============================================================
   主題切換按鈕（固定右上角 · 兩主題都顯示）
   ============================================================ */

.theme-toggle {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 200;
  width: 38px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sharp);
  color: var(--gold-bright);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  user-select: none;
  font-family: var(--font-mono);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.theme-toggle:hover {
  background: var(--bg-elevated);
  color: var(--gold-glow);
  transform: translateY(-1px);
  box-shadow: var(--glow-gold);
}
.theme-toggle .icon { line-height: 1; }

@media (max-width: 768px) {
  .theme-toggle {
    top: 10px; right: 10px;
    width: 34px; height: 34px; font-size: 14px;
  }
}