/* tokens.css — 設計變數，Mobile First */
:root {
  /* ── Colours ──────────────────────────────────────────────
   * 暖色、自然、手作；深色文字背景對比達 WCAG AA
   * --color-text (#2E2A24) on --color-bg (#FAF6EF): ~13:1 (AAA)
   * --color-primary (#6B7F5E) on white: ~4.6:1 (AA)
   * white on --color-primary (#6B7F5E): ~4.6:1 (AA)
   * ──────────────────────────────────────────────────────── */
  --color-bg:           #FAF6EF; /* 暖米白 */
  --color-bg-alt:       #F3EDE2; /* 稍深米白（Process section 底色）*/
  --color-text:         #2E2A24; /* 深褐 */
  --color-text-muted:   #6B635A; /* 中褐（輔助文字）*/
  --color-primary:      #6B7F5E; /* 海茴香灰綠 */
  --color-primary-dark: #4E5E44; /* 深綠（hover 用）*/
  --color-accent:       #B5724A; /* 陶土橙（點綴）*/
  --color-accent-dark:  #9E6040; /* 深陶土（hover 用）*/
  --color-border:       #E0D9CF; /* 柔和邊框 */
  --color-shadow:       rgba(46, 42, 36, 0.08);

  /* ── Typography ───────────────────────────────────────────
   * 標題：系統襯線；內文：系統無襯線；禁止任何外部 webfont
   * ──────────────────────────────────────────────────────── */
  --font-heading: ui-serif, "Songti TC", "Noto Serif CJK TC",
                  "Noto Serif TC", "PMingLiU", Georgia, serif;
  --font-body:    system-ui, "PingFang TC", "Noto Sans TC",
                  "Microsoft JhengHei", sans-serif;

  /* 流動字級：clamp(手機最小, 偏好, 桌機最大) */
  --text-xs:   clamp(0.75rem,  1.8vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 2vw,   1rem);
  --text-base: clamp(1rem,     2.5vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 3vw,   1.375rem);
  --text-xl:   clamp(1.375rem, 4vw,   1.75rem);
  --text-2xl:  clamp(1.75rem,  5vw,   2.5rem);
  --text-3xl:  clamp(2.25rem,  7vw,   3.75rem);

  /* ── Spacing ──────────────────────────────────────────────
   * 固定步進，用語義名稱（不用純數字）
   * ──────────────────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Layout ───────────────────────────────────────────────*/
  --container-max:   1200px;
  --container-prose:  720px;
  --container-pad:    clamp(1.25rem, 5vw, 3rem);

  /* ── Component ────────────────────────────────────────────*/
  --radius-sm:   4px;
  --radius-base: 8px;
  --radius-lg:   16px;
  --radius-pill: 100px;

  --header-height: 60px;
  --transition-base: 200ms ease;
}