/* ============================================================
   曉律「黑白金」design tokens — v0.2（2026-09-21，2-webstyle）
   ▸ 共用契約（給 shop／作品集／JurisIQ 等其他站沿用）：
     · 路徑固定為 assets/css/tokens.css，檔名不改；各站「複製」同一份，不跨網域引用
       （跨網域引用會讓 shop 等頁面向 brightjuris.com 發請求，破壞身分隔離）。
     · 本檔只放「值」（色／字／間距／圓角／陰影／動態），不放任何站專屬選擇器。
     · 要改值 → 改 SSoT 後同步各站；各站不得在自己頁面另定義色碼或字型。
   ▸ 三件同時成立：①醒目靠對比與金色強調，不靠字大 ②字小下來，層次靠粗細/色/金線/間距
                   ③柔和溫暖：暖墨、米底、青銅/香檳金、細軟圓角陰影
   ▸ 對比度：見 PR 描述之實測；淺底金色文字一律用 --gold-700，--gold-500 在淺底只准當裝飾線
   ▸ 字型：Noto Serif TC / Noto Sans TC，SIL OFL 1.1（可商用）；載入見各頁 <link>（Google Fonts）
   ============================================================ */

:root {
  /* ---------- 1. 色階（primitives）—— 不直接在元件裡用，元件走 §2 語意層 ---------- */
  /* 米（底）：避開 #FFF */
  --paper-50:  #FCFAF6;   /* 頁面底 */
  --paper-100: #F5F0E6;   /* 柔和區塊（takeaway／相關文章卡） */
  --paper-200: #EBE3D3;   /* 更深的米：表頭、被選取列；深底上的次要文字 */
  --hairline:  #DDD3BF;   /* 淺底細分割線（僅裝飾／區隔，不承載資訊） */

  /* 暖墨（字）：避開 #000 */
  --ink-900: #27231E;     /* 標題 14.97 on paper-50 */
  --ink-800: #3A352E;     /* 內文 11.65 on paper-50 / 10.70 on paper-100 */
  --ink-600: #5E574D;     /* 次要（日期、麵包屑）6.84 / 6.28 */
  --ink-500: #6F675B;     /* 最淺允許的灰（說明小字）5.35 / 4.91 —— 比這淺一律不准當字 */

  /* 暖炭（深底：頁首/頁尾/重點區塊/CTA）：避開 #000 */
  --charcoal-950: #191612;
  --charcoal-900: #221E19;

  /* 金：香檳→青銅。沒有「亮黃金」（#D4AF37/#FFD700 一類全禁） */
  --gold-200: #E8D9B5;    /* 深底上的淡金（極少用） */
  --gold-300: #DCC594;    /* 金底按鈕 hover；深底金字 hover 10.69 */
  --gold-500: #C9A96E;    /* 香檳金（主色）：深底上 8.06 ✅；淺底上 2.15 ❌ →淺底只准當裝飾線，禁當字 */
  --gold-600: #A07C48;    /* 銅金：淺底框線/focus ring 3.68 ✅（非文字 ≥3）；深底 4.70 */
  --gold-700: #7F5F27;    /* 青銅：淺底上的金色文字 5.64 / 5.18 / 4.61 ✅ AA */
  --gold-800: #5F4719;    /* 青銅 pressed 8.39 */
  --gold-disabled-bg: #E7DFCB;  /* 禁用態底（WCAG 對禁用元件不設對比門檻，仍保可辨） */
  --gold-disabled-fg: #8B8377;

  /* 狀態色（極少用；純紅 #FF0000 禁）—— 面積 ≤10%，只作焦點，不主導敘述 */
  --danger:  #9E2B25;
  --success: #3F6B4F;

  /* ---------- 2. 語意層（元件只用這一層） ---------- */
  --bg-page:      var(--paper-50);
  --bg-soft:      var(--paper-100);
  --bg-sunken:    var(--paper-200);
  --bg-inverse:   var(--charcoal-950);
  --bg-inverse-2: var(--charcoal-900);

  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-800);
  --text-muted:   var(--ink-600);
  --text-subtle:  var(--ink-500);
  --text-inverse: var(--paper-50);        /* 17.29 on charcoal-950 */
  --text-inverse-muted: var(--paper-200); /* 14.13 */

  --accent-text:       var(--gold-700);   /* 淺底上的金色字（標籤、編號、連結 hover） */
  --accent-on-dark:    var(--gold-500);   /* 深底上的金色字/線 */
  --accent-rule:       var(--gold-500);   /* 金色細線（裝飾） */
  --accent-ui:         var(--gold-600);   /* 淺底上的框線、focus ring */
  --accent-fill:       var(--gold-500);   /* 金底按鈕（只在深底上用；墨字 8.06） */
  --accent-fill-hover: var(--gold-300);

  --rule:        1px solid var(--hairline);
  --rule-accent: 2px solid var(--gold-500);

  /* ---------- 3. 字型階層 ---------- */
  --font-serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "PMingLiU", serif;
  --font-sans:  "Noto Sans TC", "Source Han Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, monospace;   /* 僅法條編號/代碼 */

  /* 字級：整站只有這 8 階，刻意收窄；層次靠粗細/色/金線/間距，不靠再放大 */
  --fs-label: 0.8125rem;  /* 13  標籤、麵包屑、日期（字距 .14em） */
  --fs-sm:    0.875rem;   /* 14  小字、頁尾、說明 */
  --fs-body:  1rem;       /* 16  內文（行高 1.8）—— 手機也是 16，不再小 */
  --fs-lead:  1.0625rem;  /* 17  導言 */
  --fs-h3:    1.125rem;   /* 18  小標（sans 600） */
  --fs-h2:    1.375rem;   /* 22  章標題（serif 600）；手機 20 */
  --fs-h1:    1.75rem;    /* 28  文章標題（serif 600）；手機 24 */
  --fs-display: 2rem;     /* 32  首頁 hero 專用；手機 26。整站最大字級 */

  --fw-regular: 400;
  --fw-medium:  500;      /* UI（導覽、按鈕）、強調 */
  --fw-semibold: 600;     /* 標題（不用 700，避免「重」而非「穩」） */

  --lh-tight: 1.35;       /* 標題 */
  --lh-snug:  1.5;        /* 小標、UI 多行 */
  --lh-body:  1.8;        /* 內文（Amy 指示「約 1.8」） */
  --lh-ui:    1.4;

  --tracking-body:  0.02em;
  --tracking-label: 0.14em;
  --measure:      38em;   /* 內文行長（約 38 字 ≈ 608px），閱讀舒適區 30–40 字；參考站實測約 59 字/行 */
  --measure-wide: 46em;   /* 表格/並排卡片內最寬 */

  /* ---------- 4. 間距（4pt 基準） ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --space-para:    1.4em;   /* 段距（比參考站的 1em 拉開） */
  --space-section: 64px;    /* 章節間；手機 48px */
  --container: 1120px;
  --gutter: 20px;           /* 手機；≥1024 用 32px */
  --tap-min: 44px;          /* 觸控目標最小高度 */

  /* ---------- 5. 圓角（細而軟，上限 12） ---------- */
  --r-xs: 2px;    /* 標籤、tag */
  --r-sm: 4px;    /* 按鈕、輸入框 */
  --r-md: 8px;    /* 卡片、重點區塊 */
  --r-pill: 999px;/* 僅用於分類 chip */

  /* ---------- 6. 陰影（暖色調、低不透明、大模糊；不用純黑） ---------- */
  --shadow-1: 0 1px 2px rgba(39, 35, 30, 0.06);
  --shadow-2: 0 2px 6px rgba(39, 35, 30, 0.05), 0 14px 28px -14px rgba(39, 35, 30, 0.16);
  --focus-ring: 0 0 0 2px var(--paper-50), 0 0 0 4px var(--gold-600);
  --focus-ring-on-dark: 0 0 0 2px var(--charcoal-950), 0 0 0 4px var(--gold-500);

  /* ---------- 7. 動態（克制：只做狀態回饋，不做進場秀） ---------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-1: 120ms;  /* 色彩/底線 */
  --dur-2: 180ms;  /* 按鈕、卡片 hover */
  --dur-3: 280ms;  /* 展開/收合（Q&A、目錄） */
}

@media (min-width: 1024px) {
  :root { --gutter: 32px; }
}

/* 手機：字級只降標題，內文維持 16（375 寬要能讀） */
@media (max-width: 639px) {
  :root {
    --fs-h2: 1.25rem;       /* 20 */
    --fs-h1: 1.5rem;        /* 24 */
    --fs-display: 1.625rem; /* 26 */
    --space-section: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}