/* ── 設計 tokens（主站 app/globals.css 與 衣櫃工具 tool/wardrobe/style.css 共用） ──
   改色票、字體、圓角、陰影這類「全站共通」的值，只需要改這一個檔案。
   兩邊各自的檔案開頭都用 @import url('/tokens.css') 引入，不要再各自宣告 :root。
   只有單一頁面/元件專用的顏色（例如某頁 hero 的暖色系）才留在各自的 CSS 裡。
──────────────────────────────────────────────────────────────── */
:root {
  /* 中性色 */
  --color-primary:        #1a1a1a;
  --color-primary-hover:  #333;
  --color-primary-light:  #f6f4f0;
  --color-border:         #e8e6e0;
  --color-border-hover:   #bbb;
  --color-text-primary:   #1a1a1a;
  --color-text-secondary: #666;
  --color-text-muted:     #bbb;
  --color-bg:             #F1F0EC;
  --color-surface:        #fff;

  /* 強調色 */
  --color-accent:         #185FA5;
  --color-accent-light:   #E6F1FB;

  /* 分類色系 */
  --color-trip:           #615559;
  --color-trip-light:     #EDE9E8;
  --color-tool:           #E07840;
  --color-tool-light:     #FAEADE;
  --color-template:       #5B7FA6;
  --color-template-light: #E2EBF4;
  --color-inspo:          #A580BB;
  --color-inspo-light:    #F7EDFD;
  --color-ig:             #E05C82;
  --color-ig-light:       #fdeef3;
  --gradient-ig:          linear-gradient(83deg, #471E57 -21.85%, #DB497B 32.15%, #FFAFBF 97.63%);

  /* 字體 */
  --font-display: 'Zen Maru Gothic', 'Noto Sans TC', sans-serif;
  --font-body:    'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 圓角（兩邊都是這三種尺寸用最多；分類徽章等特殊造型維持各自寫死） */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-pill: 999px;

  /* 陰影（中性卡片陰影；分類專屬色調陰影＝該分類的個性，留在各自檔案不抽） */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
}

/* ── 站外文字連結（唯一跨站共用的元件級 class，其餘元件樣式仍留在各自檔案）───
   內文段落裡的站外連結：不換文字顏色、底線離字距離加大、hover 才變實線。
   ─────────────────────────────────────────────────────────────── */
.ext-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--color-border-hover);
  text-underline-offset: 3px;
  transition: text-decoration-style 0.15s, text-decoration-color 0.15s;
}
.ext-link:hover {
  text-decoration-style: solid;
  text-decoration-color: currentColor;
}

/* ── Chip／標籤按鈕（衣櫃工具 .filter-chip／.add-chip 起頭的樣式，這裡收斂成通用版，
   給之後其他工具需要同款藥丸形按鈕時直接共用，不用各自重寫一份）───
   衣櫃工具本身的 .filter-chip 保留原樣不動，避免牽動既有頁面；新頁面直接用 .chip。
   ─────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  background: var(--color-primary-light);
  font-family: inherit;
  transition: all 0.15s;
}
.chip:hover {
  background: var(--color-border);
  color: var(--color-text-primary);
}
.chip.active {
  background: var(--color-primary);
  color: #fff;
}

/* ── Notion inline code（主站文章與衣櫃說明頁共用）───
   主站的 Notion 內文用 .article-body code、衣櫃工具用 code.nt-code，
   同一條規則管兩邊；Notion 標記的文字/背景色會以 inline style 蓋在這上面。
   預設文字色故意跟一般內文同色（不是紅色）——Notion 裡沒特別設色的
   code 本來就是黑字／深色模式白字，紅色只在使用者自己標成紅色時才出現。
   ─────────────────────────────────────────────────────────────── */
.article-body code,
code.nt-code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.85em;
  background: rgba(135, 131, 120, 0.15);
  color: var(--color-text-primary);
  border-radius: 4px;
  padding: 0.15em 0.4em;
}