/* ==========================================================================
   醫傳美 Design Tokens v1
   --------------------------------------------------------------------------
   設計方向：白底黑字、金色 (#B89A68) hover 重點、襯線體、英文 Forum、清爽舒適
   建立日期：2026-05-01
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Forum&family=Noto+Serif+TC:wght@300;400;500;600;700;900&family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap');

:root {
  /* --------------------------------------------------------------------------
     COLOR TOKENS
     -------------------------------------------------------------------------- */

  /* Background — 由淺至深，預設白底 */
  --color-bg:           #FFFFFF;   /* 預設頁面背景 */
  --color-bg-soft:      #FAFAF7;   /* 微暖白：區塊間的視覺分層 */
  --color-bg-warm:      #F4F1EA;   /* 暖米色：精選卡片、特色區塊 */
  --color-bg-dark:      #1A1A1A;   /* 深底：footer、強調區塊 */

  /* Text — 純黑太硬，襯線體視覺舒適度需用偏暖深灰 */
  --color-text:         #1A1A1A;   /* 主要內文與標題 */
  --color-text-soft:    #4A4A4A;   /* 副標、引言、次要說明 */
  --color-text-meta:    #6B6B6B;   /* Meta：日期、分類、作者（AA 通過 5.33:1）*/
  --color-text-disabled:#B8B8B8;   /* placeholder、disabled 狀態 */
  --color-text-inverse: #FFFFFF;   /* 深底上的反白文字 */

  /* Gold (Accent) — 完整色階解決對比度問題 */
  --color-gold-50:      #F4ECDD;   /* 軟底色（搭深黑文字 OK，對比 14.8:1）*/
  --color-gold-100:     #E5D5B3;   /* 淺金，hover 軟底 */
  --color-gold-300:     #D4BC8F;   /* 中金，裝飾性區塊 */
  --color-gold-500:     #B89A68;   /* 品牌主金 — 不可用於白底文字 */
  --color-gold-700:     #8F7240;   /* 深金 — 白底文字 hover 用（AA 4.52:1）*/
  --color-gold-900:     #5C4928;   /* 極深金 — 強調文字（AA 8.61:1）*/

  /* Brand Teal — 僅供 logo 使用，不作為 UI accent */
  --color-brand-teal:   #529DBE;   /* logo 的「e」字青藍色（取自實際 SVG），網站其他位置請用 gold */

  /* Slate (灰藍色階) — 與暖色金色系互補的中性色階
     用途：UI 元件、表單、disabled 狀態、深底替代純黑 */
  --color-slate-50:     #F4F6F8;   /* 極淺底（disabled bg） */
  --color-slate-100:    #E5EAEF;   /* 次區塊底、卡片差異化 */
  --color-slate-200:    #D0D8E0;   /* 輕分隔線、tag 底 */
  --color-slate-300:    #B0BCC8;   /* 預設邊框、disabled 文字 */
  --color-slate-400:    #8E9DAB;   /* 中性 icon、輔助元素 */
  --color-slate-500:    #6F7E8C;   /* 深底反白文字（白底 4.2:1 過 AA Large） */
  --color-slate-600:    #54616E;   /* 深 UI 元件（白底 6.3:1 過 AA） */
  --color-slate-700:    #3F4854;   /* 深底底色（替代純黑） */
  --color-slate-800:    #2A3038;   /* 近黑深底 */
  --color-slate-900:    #181C22;   /* 最深底（純黑替代） */

  /* Borders & Dividers */
  --color-border-soft:  #EEEEEE;   /* 淺分隔線 */
  --color-border:       #DDDDDD;   /* 預設邊框 */
  --color-border-strong:#1A1A1A;   /* 強調邊框（如標題下方） */

  /* Semantic（後續擴充用，先放保守值） */
  --color-success:      #4A7C59;
  --color-warning:      #C99A3D;
  --color-error:        #B14F4F;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY TOKENS
     -------------------------------------------------------------------------- */

  /* Font Families */
  --font-display: 'Forum', 'Noto Serif TC', 'Songti TC', 'STSong', serif;
  --font-serif:   'Noto Serif TC', 'Source Han Serif TC', 'Songti TC', 'STSong', 'SimSun', serif;
  --font-sans:    'Noto Sans TC', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'PingFang TC', sans-serif;
                                                /* ≤14px 中文與 ≤13px 英文小字使用，提升小字可讀性 */

  /* Font Weights — Noto Serif TC 支援多重量 */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* Type Scale — 編輯閱讀導向，body 18/20 為基礎（v2 全面 +1 階）*/
  --text-display: 80px;   /* Hero 大字（Forum 英文用） */
  --text-h1:      48px;   /* 頁面主標 */
  --text-h2:      40px;   /* 區塊標題 */
  --text-h3:      32px;   /* 次區塊標題 */
  --text-h4:      24px;   /* 卡片標題 */
  --text-body-lg: 20px;   /* 文章內文（長閱讀） */
  --text-body:    18px;   /* 預設 UI 內文 */
  --text-body-sm: 16px;   /* 輔助說明 */
  --text-meta:    14px;   /* 日期、分類 */

  /* Line Heights — 中文襯線需要較寬鬆的行高 */
  --leading-tight:   1.2;   /* display */
  --leading-snug:    1.4;   /* headings */
  --leading-normal:  1.7;   /* body */
  --leading-relaxed: 1.9;   /* 長閱讀文章 */

  /* Letter Spacing — Forum 與標題需要微微展開 */
  --tracking-display: 0.04em;   /* Forum 全大寫使用 */
  --tracking-heading: 0.01em;
  --tracking-body:    0.02em;   /* 中文襯線微展開讀起來更舒適 */
  --tracking-meta:    0.06em;   /* Meta 大寫小字展開 */

  /* --------------------------------------------------------------------------
     SPACING TOKENS — 4px 基礎，全用倍數
     -------------------------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10:128px;

  /* --------------------------------------------------------------------------
     RADIUS — 編輯型網站 UI 走銳利路線，媒體元素允許較大圓角
     -------------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;   /* 表單、徽章 */
  --radius-md:   8px;   /* 輸入框 */
  --radius-lg:   16px;  /* 圖片、影片、卡片區塊 */
  --radius-pill: 999px; /* 膠囊按鈕（兩頭半圓） */

  /* --------------------------------------------------------------------------
     BORDER WIDTHS
     -------------------------------------------------------------------------- */
  --border-w-1: 1px;
  --border-w-2: 2px;
  --border-w-3: 3px;

  /* --------------------------------------------------------------------------
     SHADOW — 編輯型網站陰影克制使用
     -------------------------------------------------------------------------- */
  --shadow-none: none;
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.08);

  /* --------------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --container-max:     1200px;
  --container-padding: var(--space-5);

  /* --------------------------------------------------------------------------
     BREAKPOINTS（給文件參考用，CSS @media 直接寫死）
     -------------------------------------------------------------------------- */
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1280px;
}

/* ==========================================================================
   BASE STYLES — 套用 Tokens 的全域基礎
   ========================================================================== */

* { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  color: var(--color-text);
  background: var(--color-bg);
}

/* 標題層級 */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--color-text);
  margin: 0;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-weight: var(--fw-medium); }

/* 文字連結預設行為 */
a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
}
a:hover {
  color: var(--color-gold-700);                 /* 用深金通過 AA */
  border-bottom-color: var(--color-gold-500);   /* 主金做底線視覺重點 */
}

/* Forum display 用法 — 英文大寫展示 */
.display-forum {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
}