/* 自動產生，請勿手改：來源是 src/theme/tokens.css（npm run ui:tokens） */
/*
 * 平台介面的設計 token（--ui-*）。依 research_notes 裡的「平台 UI 與文案風格指南」第 2 節。
 * - 只給平台介面用：首頁外框、帳號、分享、登入、參數頁、行動檢視器、說明中心、隱私頁。
 *   CAD／向量／3D／節點圖工作區不讀版面／層級 --ui-* 變數；畫布變數（--canvas-bg、--grid-* …）不在這裡。
 *   例外（樣式 B 共通元件）：工作區的語意色——AI 差異（--ai-diff-*）、逆日影（--inv-*）、法規判定、主要動作色——
 *   改讀這裡的 --ui-accent／--ui-danger*／--ui-warning*／--ui-success*，全產品語意一致。
 * - 主題：App 的 theme.ts 把亮／暗（「跟隨系統」時是解析後的結果）寫到 <html data-theme>；
 *   靜態頁（說明中心、隱私）沒有設定時跟著系統（下方 prefers-color-scheme 區塊）。
 * - 這個檔是唯一來源：npm run ui:tokens 會複製到 public/theme/tokens.css 給靜態頁用；
 *   npm run contrast:check 解析這裡的色彩，檢查文件列出的每一組文字／底色都達 WCAG AA。
 * - 字型都是 OFL 1.1、自行託管（public/fonts/ui/*，各附 OFL.txt）；中文介面用系統字。
 */

/* ---------- 字型（拉丁字子集；unicode-range 和 scripts/subset-ui-fonts.py 一致） ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ui/inter/inter-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ui/inter/inter-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/ui/inter/inter-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265;
}
/* 標題襯線：Source Serif 4 Subhead 的子集。「Source」是 OFL 保留字型名稱，修改版（子集）改名為 Lsm Serif */
@font-face {
  font-family: 'Lsm Serif';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/ui/source-serif-4/lsm-serif-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: 'Lsm Serif';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonts/ui/source-serif-4/lsm-serif-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ui/jetbrains-mono/jetbrains-mono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0100-017F, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2248, U+2260, U+2264-2265;
}

/* ---------- 亮色（預設） ---------- */
:root {
  /* 色彩：contrast:check 解析這一段與暗色段（新增文字色時，記得在 scripts/contrast-check.mjs 的配對表加一列） */
  /* 2026-10-25 創辦人定案 UI 樣式 B（和紙・同心圈；reports/ui-style-options-2026-10-25-v2.pptx 第 2 頁）：
     色彩角色從定案 logo 推導——ベロ藍＝主要動作／連結／選取；朱＝違規／錯誤／刪除；石黃＝修正中／提醒／修改；緑青＝合格／成功／新增。
     語意色一律附 ✓ ✕ ! ＋ － ～ 等符號與文字（色弱）；石黃點加 1 px --ui-warning-edge 外框。3D 畫布與圖紙不讀這些，維持中性。 */
  /* 層級（和紙）：底＝平台外框（首頁、介紹、分享、檢視、參數頁）；面板／卡片；對話框；凹陷／輸入底 */
  --ui-bg: #f4efe4;
  --ui-surface: #fbf8f1;
  --ui-raised: #ffffff; /* 對話框 */
  --ui-sunken: #ece5d6;
  --ui-ink: #1a1a1a;
  --ui-muted: #5e5a52;
  --ui-subtle: #67625a; /* 亮色不可放在 sunken 上 */
  --ui-line: #ddd4c2; /* 只當裝飾，不承載資訊 */
  --ui-line-strong: #857f73; /* 規格 #8A8478 對 sunken 只有 2.96，略加深到 3.17 */
  /* ベロ藍：主要動作、連結、選取（白字 5.31）。亮色禁止當 sunken 上的文字（4.24，見 contrast:check 規則掃描） */
  --ui-accent: #3a6ea5;
  --ui-accent-hover: #2f5b89;
  --ui-on-accent: #ffffff;
  --ui-accent-soft: #e9f0f7;
  /* 品牌色：2026-10-25 起與主要動作同為ベロ藍（logo 圓點）。朱只留給違規，不再當品牌主鈕。
     名稱保留（介紹頁 --in-*、頂列目前步驟讀它們），值改指向藍。 */
  --ui-brand: #3a6ea5;
  --ui-brand-strong: #3a6ea5;
  --ui-brand-strong-hover: #2f5b89;
  --ui-on-brand-strong: #ffffff;
  /* 朱：違規、錯誤、刪除（文字與白字按鈕底同色；--ui-danger-mark 給圖形） */
  --ui-danger: #b83a2e;
  --ui-danger-soft: #f9e6e2;
  --ui-on-danger: #ffffff;
  --ui-danger-mark: #b83a2e;
  /* 緑青：合格、成功、新增（文字 #357864；圖形 #3E8B74） */
  --ui-success: #357864;
  --ui-success-soft: #e8f3ee;
  --ui-on-success: #ffffff;
  --ui-success-mark: #3e8b74;
  /* 石黃：修正中、提醒、修改。原色對米白只有 2.23：只當填色配墨字（--ui-on-warning-mark）＋ 1 px --ui-warning-edge 外框；文字用 #86682B */
  --ui-warning: #86682b;
  --ui-warning-soft: #f9f2e3;
  --ui-warning-mark: #c89b40;
  --ui-on-warning-mark: #1a1a1a;
  --ui-warning-edge: #86682b;
  --ui-focus: #3a6ea5;
  --ui-scrim: rgba(26, 26, 26, 0.42);

  /* 字體 */
  --ui-font-cjk: 'Microsoft JhengHei', 'PingFang TC', 'Noto Sans TC', 'Noto Sans CJK TC';
  --ui-font-sans: 'Inter', var(--ui-font-cjk), system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ui-font-serif: 'Lsm Serif', 'Noto Serif TC', 'Source Han Serif TC', 'Songti TC', var(--ui-font-cjk), Georgia, serif;
  --ui-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, Menlo, var(--ui-font-cjk), monospace;

  /* 字級與行高（預設是中文行高；拉丁語系在下方覆寫） */
  --ui-text-xs: 12px;
  --ui-text-sm: 13px;
  --ui-text-md: 15px;
  --ui-text-lg: 17px;
  --ui-text-xl: 20px;
  --ui-text-2xl: 24px;
  --ui-text-3xl: 32px;
  --ui-text-4xl: 44px;
  --ui-lh-xs: 1.6;
  --ui-lh-sm: 1.65;
  --ui-lh-md: 1.75;
  --ui-lh-lg: 1.7;
  --ui-lh-xl: 1.5;
  --ui-lh-2xl: 1.45;
  --ui-lh-3xl: 1.35;
  --ui-lh-4xl: 1.25;
  --ui-tracking-display: 0; /* 中文不加負字距 */
  --ui-measure: 38em;

  /* 間距（4px 基準） */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
  --ui-space-7: 48px;
  --ui-space-8: 64px;
  --ui-space-9: 96px;
  /* φ 間距（樣式 B）：元件內 → 版面。新元件用這組；上面 4px 基準組保留給既有版面 */
  --ui-phi-1: 5px;
  --ui-phi-2: 8px;
  --ui-phi-3: 13px;
  --ui-phi-4: 21px;
  --ui-phi-5: 34px;
  --ui-phi-6: 55px;
  /* 字級 ×√φ：說明 → 大標 */
  --ui-type-0: 12px;
  --ui-type-1: 15px;
  --ui-type-2: 19px;
  --ui-type-3: 24px;
  --ui-type-4: 31px;

  /* 圓角（φ：3／5／8／13；B 卡片 13、按鈕 8） */
  --ui-radius-xs: 3px;
  --ui-radius-sm: 5px;
  --ui-radius-md: 8px;
  --ui-radius-lg: 13px;
  --ui-radius-full: 999px;

  /* 陰影（能不用就不用，優先用邊框；暗色一律 none）；和紙底用暖色陰影 */
  --ui-shadow-1: 0 1px 2px rgba(60, 48, 30, 0.06), 0 1px 3px rgba(60, 48, 30, 0.08);
  --ui-shadow-2: 0 4px 16px rgba(60, 48, 30, 0.1);
  --ui-shadow-3: 0 12px 40px rgba(60, 48, 30, 0.16);

  /* 動態：只用透明度與 4–8px 位移 */
  --ui-dur-fast: 120ms;
  --ui-dur-base: 180ms;
  --ui-dur-slow: 260ms;
  --ui-ease: cubic-bezier(0.2, 0, 0, 1);
  --ui-shift: 6px; /* 進場位移；減少動態時為 0 */

  /* 控制項尺寸 */
  --ui-control-h: 36px;
  --ui-touch: 44px;
}

/* 非 CJK 語系：行高較小、24px 以上負字距、欄寬以 ch 計 */
:root:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) {
  --ui-lh-xs: 1.4;
  --ui-lh-sm: 1.45;
  --ui-lh-md: 1.5;
  --ui-lh-lg: 1.5;
  --ui-lh-xl: 1.35;
  --ui-lh-2xl: 1.3;
  --ui-lh-3xl: 1.2;
  --ui-lh-4xl: 1.1;
  --ui-tracking-display: -0.01em;
  --ui-measure: 68ch;
}
/* 其他 CJK 語系用各自的系統字 */
:root:lang(zh-CN) {
  --ui-font-cjk: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', 'Noto Sans CJK SC';
}
:root:lang(ja) {
  --ui-font-cjk: 'Yu Gothic UI', 'Hiragino Sans', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP';
}
:root:lang(ko) {
  --ui-font-cjk: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Noto Sans CJK KR';
}

/* ---------- 暗色：跟隨系統（靜態頁沒有 data-theme 時） ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ui-bg: #0f1419;
    --ui-surface: #161c22;
    --ui-raised: #1b2229;
    --ui-sunken: #1e252c;
    --ui-ink: #f2f2f2;
    --ui-muted: #b2b4b5;
    --ui-subtle: #8d8f92;
    --ui-line: #2a323a;
    --ui-line-strong: #818386;
    --ui-accent: #8db0d8;
    --ui-accent-hover: #a5c2e2;
    --ui-on-accent: #0f1419;
    --ui-accent-soft: #1b2a3d;
    --ui-brand: #8db0d8;
    --ui-brand-strong: #8db0d8;
    --ui-brand-strong-hover: #a5c2e2;
    --ui-on-brand-strong: #0f1419;
    --ui-danger: #e08a80;
    --ui-danger-soft: #3a1f1c;
    --ui-on-danger: #0f1419;
    --ui-danger-mark: #e08a80;
    --ui-success: #6fb39c;
    --ui-success-soft: #18322b;
    --ui-on-success: #0f1419;
    --ui-success-mark: #6fb39c;
    --ui-warning: #d9b062;
    --ui-warning-soft: #3a2f17;
    --ui-warning-mark: #d9b062;
    --ui-on-warning-mark: #0f1419;
    --ui-warning-edge: #d9b062;
    --ui-focus: #8db0d8;
    --ui-scrim: rgba(0, 0, 0, 0.6);
    --ui-shadow-1: none;
    --ui-shadow-2: none;
    --ui-shadow-3: none;
  }
}

/* ---------- 暗色：App 的 data-theme（亮／暗／跟隨系統解析後） ---------- */
:root[data-theme='dark'] {
  --ui-bg: #0f1419;
  --ui-surface: #161c22;
  --ui-raised: #1b2229;
  --ui-sunken: #1e252c;
  --ui-ink: #f2f2f2;
  --ui-muted: #b2b4b5;
  --ui-subtle: #8d8f92;
  --ui-line: #2a323a;
  --ui-line-strong: #818386;
  --ui-accent: #8db0d8;
  --ui-accent-hover: #a5c2e2;
  --ui-on-accent: #0f1419;
  --ui-accent-soft: #1b2a3d;
  --ui-brand: #8db0d8;
  --ui-brand-strong: #8db0d8;
  --ui-brand-strong-hover: #a5c2e2;
  --ui-on-brand-strong: #0f1419;
  --ui-danger: #e08a80;
  --ui-danger-soft: #3a1f1c;
  --ui-on-danger: #0f1419;
  --ui-danger-mark: #e08a80;
  --ui-success: #6fb39c;
  --ui-success-soft: #18322b;
  --ui-on-success: #0f1419;
  --ui-success-mark: #6fb39c;
  --ui-warning: #d9b062;
  --ui-warning-soft: #3a2f17;
  --ui-warning-mark: #d9b062;
  --ui-on-warning-mark: #0f1419;
  --ui-warning-edge: #d9b062;
  --ui-focus: #8db0d8;
  --ui-scrim: rgba(0, 0, 0, 0.6);
  --ui-shadow-1: none;
  --ui-shadow-2: none;
  --ui-shadow-3: none;
}

/* ---------- 減少動態：位移歸零，只保留透明度切換 ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-shift: 0px;
    --ui-dur-base: 120ms;
    --ui-dur-slow: 120ms;
  }
}

/* ---------- 平台根節點：基本排版與焦點框（工作區不加這個 class） ---------- */
.ui-platform {
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-md);
  line-height: var(--ui-lh-md);
  color: var(--ui-ink);
  font-variant-numeric: tabular-nums;
}
.ui-platform :focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}