/* DIRECTION: "Vitrine" — 收藏級物件的展櫃. DARK-FIRST.
 * Mood: 美術館展櫃 + 電影感打光. 物件是主角, 版面是展台.
 * Refuses: Shopify 淺色網格(對標站 heroesworld 就是這個)、科技藍紫漸層、
 *          圓角軟卡片. 深度來自「表面階梯 + 髮絲線 + 一道暖光」, 不是陰影堆疊.
 * Accent = 黃銅 (展櫃投射燈的顏色), NOT 紅或藍.
 * Signature: 型號 (MMS862) 一律等寬字 —— 收藏家是用型號在搜尋的,
 *            把它當「識別碼」排版, 不是當內文.
 * Pair with foundation.css. Fonts: Archivo + Inter + JetBrains Mono. */
:root {
  --bg:         #0a0a0b;
  --surface:    #101012;
  --surface-2:  #17171a;
  --surface-3:  #1e1e22;
  --border:     #26262b;
  --border-strong: #38383f;
  --muted:      #8b8b95;      /* ~5.2:1 on bg */
  --text:       #d4d4da;      /* ~12:1 */
  --ink:        #f6f6f7;      /* ~17:1 */

  --primary:    #c8963e;      /* 黃銅 — 展櫃投射燈 */
  --primary-hover: #d9a94f;
  --on-primary: #14100a;      /* 深棕字在黃銅上 = 9.4:1 */
  --accent:     #e0b563;      /* 亮黃銅, 用於 eyebrow / inline 強調 (on bg ~9:1) */
  --accent-soft: rgba(200,150,62,0.12);
  --focus:      #e0b563;

  --ok:         #6fbf8b;
  --alert:      #e0654e;

  --grad-glow:    radial-gradient(720px circle at 50% -10%, rgba(200,150,62,0.16), transparent 68%);
  --grad-vitrine: radial-gradient(120% 90% at 50% 0%, #1a1a1e 0%, #0a0a0b 62%);
  --grad-plinth:  linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%);
  --shadow-1: none;  --shadow-2: none;
  /* 展示盤:商品照多半白底,給它一個「打光的檯面」而不是丟在黑底上 */
  --lightbox:   #edeae4;
  --radius-card: 4px;         /* 幾乎不圓角 = 展櫃玻璃, 不是 app 卡片 */
  --sep-shadow: none; --sep-border: 1px solid var(--border);

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --disp-tracking: -0.02em;
  --disp-leading:  1.04;

  /* Type — 大跨距: 標題超大, 內文安靜 (showcase archetype) */
  --fs-caption: 0.75rem;
  --fs-small:   0.8125rem;
  --fs-body:    1rem;
  --fs-lead:    1.25rem;
  --fs-h4:      1.25rem;
  --fs-h3:      1.75rem;
  --fs-h2:      clamp(2rem, 1.2rem + 3.2vw, 3.25rem);
  --fs-h1:      clamp(2.6rem, 1.4rem + 5vw, 4.5rem);
  --fs-display: clamp(2.5rem, 0.9rem + 8.4vw, 9rem);  /* 招牌:桌機很大,手機收一級 */
}
:root[data-theme="light"] {
  --bg:        #f7f6f4;  --surface: #ffffff;  --surface-2: #f1efec; --surface-3: #e9e6e1;
  --border:    #e0dcd6;  --border-strong: #c8c3ba;
  --muted:     #6b6862;  --text: #26241f;  --ink: #12110f;
  --primary:   #8a6118;  --primary-hover: #6f4d12; --on-primary: #ffffff;
  --accent:    #7a5514;  --accent-soft: rgba(138,97,24,0.10);
  --grad-glow:    radial-gradient(720px circle at 50% -10%, rgba(138,97,24,0.10), transparent 68%);
  --grad-vitrine: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #f7f6f4 62%);
  --grad-plinth:  linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0) 60%);
  --lightbox:   #ffffff;
}

/* ⚠️ Archivo / Inter / JetBrains Mono 都沒有 CJK 字元。中文頁不覆寫的話會靜默
 * fallback 到系統字,質感整個掉(LESSONS 2026-08-23n)。而且拉丁 display 的
 * 1.04 行高套到中文會擠死,字距 -0.02em 對方塊字也是負擔 —— 三者要一起改。 */
html[lang="zh-Hant"]{
  --font-display: "Noto Sans TC", "Archivo", "Microsoft JhengHei", "PingFang TC",
                  ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Noto Sans TC", "Inter", "Microsoft JhengHei", "PingFang TC",
                  system-ui, sans-serif;
  --disp-tracking: 0;
  --disp-leading:  1.24;
  /* 中文沒有大小寫,超大字級的視覺重量比拉丁重 —— 招牌字收一級 */
  --fs-display: clamp(2.1rem, 0.8rem + 6.6vw, 6.4rem);
}
html[lang="zh-Hant"] h1,
html[lang="zh-Hant"] h2,
html[lang="zh-Hant"] h3{letter-spacing:var(--disp-tracking);line-height:var(--disp-leading)}
html[lang="zh-Hant"] .display{letter-spacing:0;line-height:1.16}
html[lang="zh-Hant"] .eyebrow{letter-spacing:0.14em}
/* 中英混排自動間距(不要裝 pangu.js,它會把真空格寫進 DOM) */
:root{text-autospace:normal;text-spacing-trim:trim-start}