/**
 * Design Token 系統 — 書墨園 2.0
 * 
 * 所有頁面引同一來源，禁止硬編碼色票。
 * 對應 design-guide.md §8.1
 * 
 * 使用方式：
 *   <link rel="stylesheet" href="/assets/css/tokens.css">
 *   或 PHP: <link rel="stylesheet" href="<?= $base ?>/assets/css/tokens.css">
 */

:root {
  /* === 主色板：書墨園五色 === */
  --color-ink:        #1a1a1a;  /* 墨黑：主文、標題 */
  --color-ink-soft:   #464646;  /* 硯台灰：次要文本 */
  --color-paper:      #FDFBF7;  /* 宣紙白：主背景 */
  --color-paper-warm: #F3EDE9;  /* 暖米：區塊背景、hover */
  --color-paper-deep: #EDE0D4;  /* 深米：nested 區塊 */
  --color-gold:       #836D45;  /* 傳統金：主 CTA、重點 */
  --color-gold-deep:  #6D5A43;  /* 深金：hover */
  --color-gold-soft:  #B89E78;  /* 淺金：disabled / 裝飾 */
  --color-cinnabar:   #9B170C;  /* 朱砂紅：品牌裝飾 + 高優先警示 */

  /* === 輔助色：功能色 === */
  --color-success:    #10B981;
  --color-warning:    #F59E0B;
  --color-danger:     #EF4444;
  --color-info:       #3B82F6;

  /* === 中性灰階 === */
  --color-text-primary:   var(--color-ink);
  --color-text-secondary: #6B7280;
  --color-text-tertiary:  #A0A09F;
  --color-text-disabled:  #C8C8C7;
  --color-border:         #DBDBDB;
  --color-border-soft:    #E5E7EB;
  --color-divider:        #F3F4F6;

  /* === 字體：雙字體體系 === */
  --font-sans:  'PingFang HK', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --font-serif: 'Source Han Serif TC', 'Noto Serif TC', 'Songti TC', 'PMingLiU', serif;

  /* === 字級 === */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px - 行動端最小正文 */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */

  /* === 間距（8pt grid） === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* === 圓角 === */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* === 陰影 === */
  --shadow-sm:  0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md:  0 2px 8px rgba(26, 26, 26, 0.06);
  --shadow-lg:  0 8px 24px rgba(26, 26, 26, 0.08);
  --shadow-xl:  0 16px 48px rgba(26, 26, 26, 0.10);

  /* === 動畫 === */
  --transition-fast:   150ms ease-out;
  --transition-normal: 250ms ease-out;
  --transition-slow:   400ms ease-out;
}

/* === 全域基線 === */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* === 焦點環（WCAG AA） === */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* === 無障礙：最小點擊區（checkbox/radio 保持瀏覽器預設大小） === */
button,
[role="button"],
a,
select {
  min-height: 44px;
  min-width: 44px;
}

/* inline 小按鈕可以覆寫 */
.btn-sm {
  min-height: 32px;
  min-width: unset;
}