/* ══════════════════════════════════════════════
   BASE.CSS
   CSS variables / reset / html / body / scrollbar / prefers-reduced-motion
   ══════════════════════════════════════════════ */

/* ── BASE PALETTE TOKENS ── */
:root{
  /* ── 基礎色板 ── */
  --silk:     #F7F5F0;
  --parchment:#EDE9E1;
  --ash:      #D8D3C8;
  --smoke:    #9C9488;
  --charcoal: #2D2B27;
  --ink:      #1A1916;
  --celadon:  #7BA99A;
  --cobalt:   #4A6FA5;

  /* ── 字型 ── */
  --serif:  'Noto Serif TC','Georgia',serif;
  --sans:   'Noto Sans TC',system-ui,sans-serif;
  --italic: 'IM Fell English',serif;

  /* ── 版型 ── */
  --page-max:1200px;
  --page-pad:3.5rem;

  /* ════════════════════════════════════════
     COLOR SYSTEM v1.0
     ════════════════════════════════════════ */

  /* ── 1. SURFACE ── */
  --surface-base:       var(--silk);                  /* 頁面底色 */
  --surface-raised:     var(--parchment);             /* 交替區塊背景 */
  --surface-overlay:    rgba(247,245,240,0.94);       /* Nav 毛玻璃 */
  --surface-dark:       var(--ink);                   /* Footer 背景 */
  --surface-ink-deep:   #1e1c18;                      /* 影片播放區背景 */

  /* ── 2. TEXT ── */
  --text-primary:          var(--ink);                /* 標題 h1/h3 */
  --text-body:             var(--charcoal);           /* 正文 */
  --text-secondary:        var(--smoke);              /* 輔助說明 */
  --text-on-dark:          var(--silk);               /* 深色背景文字 */
  --text-on-dark-muted:    rgba(247,245,240,0.35);    /* Footer 欄目 */
  --text-on-dark-faint:    rgba(247,245,240,0.18);    /* Footer 版權 */
  --text-on-image:         rgba(247,245,240,0.90);    /* 圖片上標籤 */
  --text-on-image-muted:   rgba(247,245,240,0.55);    /* 圖片 source tag */
  --text-on-image-faint:   rgba(247,245,240,0.30);    /* footer tagline 等 */

  /* ── 3a. ACCENT — Celadon ── */
  --accent-celadon:            var(--celadon);
  --accent-celadon-border:     rgba(123,169,154,0.35);
  --accent-celadon-bg-hover:   rgba(123,169,154,0.22);
  --accent-celadon-bg:         rgba(123,169,154,0.12);

  /* ── 3b. ACCENT — Cobalt ── */
  --accent-cobalt:         var(--cobalt);
  --accent-cobalt-border:  rgba(74,111,165,0.3);
  --accent-cobalt-bg:      rgba(74,111,165,0.06);

  /* ── 3c. BADGE — Collection（客戶委託 / 工作室藏品）── */
  --badge-collection-text:   #9e9082;
  --badge-collection-border: rgba(184,168,152,0.5);
  --badge-collection-bg:     rgba(184,168,152,0.07);

  /* ── 3c. BADGE — Content（修復過程 / 修復札記 / 延伸觀看）── */
  --badge-content-text:   #b09060;
  --badge-content-border: rgba(200,168,120,0.5);
  --badge-content-bg:     rgba(200,168,120,0.07);

  /* ── 3c. BADGE — Exhibition @deprecated ── */
  --badge-exhibition-text:   #a8c8b8;
  --badge-exhibition-border: rgba(168,200,184,0.5);
  --badge-exhibition-bg:     rgba(168,200,184,0.08);

  /* ── 3c. BADGE — Clip @deprecated ── */
  --badge-clip-text:   #c8a878;
  --badge-clip-border: rgba(200,168,120,0.5);
  --badge-clip-bg:     rgba(200,168,120,0.07);

  /* ── 3c. BADGE — Video @deprecated ── */
  --badge-video-text:   #c8b878;
  --badge-video-border: rgba(200,184,120,0.5);
  --badge-video-bg:     rgba(200,184,120,0.07);

  /* ── 3c. BADGE — Invisible @deprecated ── */
  --badge-invisible-text:   #b8a8c8;
  --badge-invisible-border: rgba(184,168,200,0.5);
  --badge-invisible-bg:     rgba(184,168,200,0.07);

  /* ── 3c. BADGE — Archaeology @deprecated ── */
  --badge-archaeology-text:   #b8a898;
  --badge-archaeology-border: rgba(184,168,152,0.5);
  --badge-archaeology-bg:     rgba(184,168,152,0.07);

  /* ── 3c. BADGE — Private @deprecated ── */
  --badge-private-text:   var(--smoke);
  --badge-private-border: rgba(156,148,136,0.4);
  --badge-private-bg:     rgba(156,148,136,0.06);

  /* ── 4. DIVIDER ── */
  --divider-default:  var(--ash);                   /* Block rule 起始 */
  --divider-subtle:   rgba(216,211,200,0.5);        /* Nav 底線 */
  --divider-on-dark:  rgba(255,255,255,0.06);       /* Footer 底線 */
  --divider-ba:       rgba(247,245,240,0.65);       /* B/A 分隔線 */

  /* ── 5. INTERACTION ── */
  --interact-overlay-dark:   rgba(26,25,22,0.6);    /* 影片關閉按鈕背景 */
  --interact-overlay-mid:    rgba(26,25,22,0.5);    /* Clip source tag 背景 */
  --interact-overlay-soft:   rgba(26,25,22,0.35);   /* B/A handle shadow */
  --interact-overlay-faint:  rgba(26,25,22,0.30);   /* B/A handle shadow outer */
  --interact-play-btn:       rgba(247,245,240,0.18); /* Play circle 背景 */
  --interact-play-btn-border:rgba(247,245,240,0.35); /* Play circle 邊框 */
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── HTML / BODY ── */
html{font-size:16px;scroll-behavior:smooth}
body{
  background:var(--surface-base);
  color:var(--text-body);
  font-family:var(--serif);font-weight:300;line-height:1.9;letter-spacing:0.05em;overflow-x:hidden
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:var(--surface-raised)}
::-webkit-scrollbar-thumb{background:var(--ash)}

/* ── PREFERS-REDUCED-MOTION ── */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}}