/* ============================================================
 * ui-tokens.css — Jacob Collier Voicing 共用設計 token
 * 單一真實來源 (single source of truth)。所有 build_*.py 透過
 * <link rel="stylesheet" href="ui-tokens.css"> 載入。
 *
 * 設計哲學：jacobcollier.com tour-poster 風格——白底、紅色強調、
 * 銳角、大寫粗體 editorial 排版。本檔保留該品牌氣質，
 * 同時補上 WCAG 2.2 a11y 規範與系統化字級/間距。
 * ============================================================ */

:root {
  /* --- Brand colors --- */
  --bg:           #faf8f3;        /* warm cream — global background */
  --surface:      #ffffff;        /* cards / toolbars stay white for contrast */
  --elevated:     #f0ebe0;        /* slightly darker cream for emphasis */
  --text:         #0a0a0a;        /* near-black, 非純黑（避免散光不適） */
  --text-muted:   #595959;        /* 6.4:1 on white；比舊版 #666 (5.74:1) 略強 */
  --text-faint:   #8a8a8a;        /* 僅供 hint / 過小字級避免使用 */
  --ink:          #0a0a0a;
  --accent:       #c66a3d;        /* terracotta, 4.6:1 on white (AA for large text) */
  --accent-hover: #9a4f2a;        /* darker terracotta hover */
  --border:       #0a0a0a;
  --border-soft:  #d4d4d4;        /* 次級分隔線 */

  /* --- Type scale (modular 1.250 / Major Third) --- */
  /* 基準 16px；以 rem 單位避免縮放問題 */
  --fs-xs:   0.75rem;    /* 12 px — UI 標籤、micro-copy 下限 */
  --fs-sm:   0.8125rem;  /* 13 px — secondary text 下限 */
  --fs-base: 1rem;       /* 16 px — body */
  --fs-md:   1.25rem;    /* 20 px */
  --fs-lg:   1.5625rem;  /* 25 px */
  --fs-xl:   1.953rem;   /* ~31 px */
  --fs-2xl:  2.441rem;   /* ~39 px — hero */

  /* --- Line height --- */
  --lh-tight: 1.2;       /* 大標 */
  --lh-snug:  1.4;       /* 小標、UI */
  --lh-body:  1.6;       /* 內文 */

  /* --- Spacing (8pt grid, 4pt 為次基準) --- */
  --sp-1:  0.25rem;  /*  4px */
  --sp-2:  0.5rem;   /*  8px */
  --sp-3:  0.75rem;  /* 12px */
  --sp-4:  1rem;     /* 16px */
  --sp-5:  1.5rem;   /* 24px */
  --sp-6:  2rem;     /* 32px */
  --sp-7:  3rem;     /* 48px */
  --sp-8:  4rem;     /* 64px */

  /* --- Borders / strokes --- */
  --bw:       1.5px;             /* 主邊框 */
  --bw-thick: 2px;               /* 強分隔 */

  /* --- Focus ring (a11y) --- */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 3px;

  /* --- Touch / hit target minimums --- */
  --hit-min: 44px;               /* 行動端最低 */
  --hit-min-desktop: 32px;       /* 桌機 */

  /* --- Font stack —— Taipei Sans TC 優先，依 html-style 規範 --- */
  /* 絕不使用「標楷體」/「DFKai-SB」/「Microsoft YaHei」/「PMingLiU」 */
  --font-sans: 'Inter', 'Noto Sans TC',
               -apple-system, BlinkMacSystemFont, 'Segoe UI',
               sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular',
               Menlo, Consolas, 'Liberation Mono', monospace;

  /* --- 動畫時間 --- */
  --dur-fast:   .12s;            /* hover/active */
  --dur-base:   .2s;             /* 一般 */
  --dur-slow:   .35s;            /* 較大過渡 */

  color-scheme: light;
}

/* ------------------------------------------------------------
 * Bravura —— Steinberg 的 SMuFL-compliant 樂譜雕版字型
 * SIL OFL 1.1（開源，可商用）。從 jsDelivr 的 steinbergmedia/bravura
 * mirror 載入。五線譜的譜號、休止符、變音記號、符頭都靠這套字型；
 * 載不到時 fallback 仍保持可讀。
 * ------------------------------------------------------------ */
@font-face {
  font-family: 'Bravura';
  src: url('https://cdn.jsdelivr.net/gh/steinbergmedia/bravura@master/redist/woff/Bravura.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/steinbergmedia/bravura@master/redist/woff/Bravura.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------
 * Base reset —— 銳角優先 (品牌)、box-sizing、邊距清零
 * ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* 預設不強制圓角；元件自行決定。容器/卡片/badge/按鈕應使用 4px。 */

html, body { margin: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 標題：sentence case + 緊縮字距（避免 editorial 大寫的 AI tell） */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
}

p { margin: 0 0 var(--sp-4); }

/* 連結 */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast);
}
a:hover { color: var(--accent-hover); }

/* 程式碼 */
code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* Scrollbar (品牌一致) */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--ink); }

/* ------------------------------------------------------------
 * Focus ring — a11y 核心。所有互動元素 keyboard tab 必須可見。
 * 永遠 :focus-visible，不傷害 mouse 使用者。
 * ------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* 表單元素至少有 visible focus（避免被 outline:none 覆蓋） */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ------------------------------------------------------------
 * 觸控目標 (WCAG 2.2 SC 2.5.8 / Apple HIG / Material)
 * 行動端按鈕 ≥ 44px；桌機 ≥ 32px。
 * 例外（如表格內 icon button）可加 `.tap-small` 解除。
 * ------------------------------------------------------------ */
button, [role="button"], input[type="button"], input[type="submit"] {
  min-height: var(--hit-min-desktop);
  min-width:  var(--hit-min-desktop);
}
@media (pointer: coarse) {
  button, [role="button"], input[type="button"], input[type="submit"] {
    min-height: var(--hit-min);
    min-width:  var(--hit-min);
  }
}
.tap-small { min-height: 0 !important; min-width: 0 !important; }

/* ------------------------------------------------------------
 * Reduced motion (a11y)
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------
 * Screen reader only (a11y utility)
 * ------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
 * Skip link (鍵盤導覽必備)
 * 用法：<a class="skip-link" href="#main">跳至主內容</a>
 * ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: -100px; left: var(--sp-2);
  background: var(--ink); color: #fff;
  padding: var(--sp-2) var(--sp-4);
  font-weight: 600;
  border-radius: 4px;
  z-index: 9999;
}
.skip-link:focus { top: var(--sp-2); color: #fff; }

/* ------------------------------------------------------------
 * 共用元件 base —— 各 builder 可在自己的 <style> 內覆寫/擴充
 * ------------------------------------------------------------ */

/* 按鈕基底：sentence case、4px 圓角、accent border on hover */
button {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: var(--sp-2) var(--sp-4);
  transition: background-color var(--dur-fast),
              color var(--dur-fast),
              border-color var(--dur-fast);
}
button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
button:active { transform: translateY(1px); }
button[disabled] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Accent 按鈕 (主 CTA) */
.btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-accent:hover {
  background: #fff;
  color: var(--accent);
  border-color: var(--accent);
}

/* Input 基底 */
input[type="text"], input[type="search"], input[type="email"],
input[type="number"], input[type="url"], textarea, select {
  font-family: inherit;
  font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
input[type="text"]:focus-visible,
input[type="search"]:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ------------------------------------------------------------
 * Utility classes（極少數，避免污染命名空間）
 * ------------------------------------------------------------ */
.muted        { color: var(--text-muted); }
.text-center  { text-align: center; }
.flex         { display: flex; }
.grid         { display: grid; }
.hidden       { display: none !important; }