/* 設計系統。顏色一律 var(--px-*)，來源 tokens.generated.css（契約 L1）。 */

@font-face {
  font-family: 'Cubic11';
  src: url('./fonts/Cubic_11.woff2') format('woff2');
  font-display: swap;
}

/* 內文的系統字堆疊。**刻意不含 Cubic11**——
   Jane 2026-08-28 實機判定：一整段 11pt 俐方體看久會累（見 src/theme.pixel.ts
   的 PROSE_FONT_FAMILY）。landing page 的段落比 app 任何一頁都長，只會更成立。 */
:root {
  --prose-stack: -apple-system, BlinkMacSystemFont, 'Noto Sans TC', 'PingFang TC', sans-serif;
  --wrap: 1080px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--px-surface-screen);
  color: var(--px-ink);
  font-family: var(--prose-stack);
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/* 點陣字級：11 的整數倍，理由見 src/theme.pixel.ts 的 pixelType。 */
.px-title   { font-family: 'Cubic11'; font-size: 44px; line-height: 1.25; }
.px-heading { font-family: 'Cubic11'; font-size: 33px; line-height: 1.3; }
.px-label   { font-family: 'Cubic11'; font-size: 22px; line-height: 1.3; }
.px-micro   { font-family: 'Cubic11'; font-size: 11px; line-height: 1.4; }

/* .prose 的顏色是量過的：--px-ink-soft (#3D3333) 對底色 --px-surface-screen (#D4C692)
   對比 7.21:1，過 WCAG AA（也過 AAA 的 7:1）。
   看起來偏灰想換成 --px-stone-dark 的話先停手——那組是 3.42:1，不及格。 */
.prose {
  font-family: var(--prose-stack);
  font-size: 17px;
  line-height: 1.75;
  color: var(--px-ink-soft);
}

/* 強調：反白色塊。11px 繁中唯一安全的強調手段——它一個筆畫都不碰
   （src/theme.pixel.ts 的 EMPHASIS_PRIMARY = 'invert'）。 */
.px-invert {
  background: var(--px-ink);
  color: var(--px-surface-panel);
  padding: 1px 4px;
}

/* 主 CTA 的底色從 --px-accent 換成 --px-accent-deep。這是無障礙問題，不是品味問題：
   --px-accent (#158968) 配 --px-highlight 只有 3.23:1，不過 WCAG AA 的 4.5:1。
   而且它換個前景色也救不回來——#158968 的相對亮度是 0.191，配純白 4.37:1、
   配最深的 --px-ink 4.30:1，兩個方向都撞牆，數學上不可能到 4.5:1。
   換上的這組：--px-accent-deep 配 --px-highlight = 10.00:1，
   hover 的 --px-accent-mid 配 --px-highlight = 7.01:1。
   附帶好處：這組正好就是契約 L7 pixel 視窗標題列的配色，按鈕與視窗外框的
   視覺語言因此統一。（數字都是 WCAG 2.x 相對亮度公式現算的。） */
.btn {
  display: inline-block;
  font-family: 'Cubic11';
  font-size: 22px;
  padding: 12px 24px;
  border: 3px solid var(--px-ink);
  border-radius: 4px;
  background: var(--px-accent-deep);
  color: var(--px-highlight);
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--px-accent-mid); }

/*
 * 這條原本是 `img, .pixelated { image-rendering: pixelated; }`，2026-09-02 收窄成只選
 * .pixelated——那個 `img` 會套到頁面上**每一張**圖，包含契約 L6／L7 的三張手機截圖。
 *
 * 那三張不是點陣素材，是已經被平滑重取樣過的截圖。量測（PIL 逐像素掃 web/shots/map.png，
 * 每 7 列取一列，共 286 列 / 150770 個水平顏色變化點）：
 *   - 間距直方圖：1px 140333 次，2px 只有 4891、3px 1439——沒有固定間距的網格。
 *   - 變化點 x 對 2/3/4/6 取模完全均勻（49.9/50.1、33.3/33.2/33.5、25.0×4、16.7×6），
 *     代表沒有任何像素網格對齊。
 *   - review 時另外放大 8 倍逐像素看過：邊緣是柔化漸層，不是硬邊階梯。
 * 它們在頁面上是 979px 縮到約 314px（縮小）。對已經平滑的圖做最近鄰縮小會出現
 * 嚴重鋸齒與摩爾紋，而且沒有任何測試會紅，只會在螢幕上很醜。
 *
 * 收窄不會誤傷真正需要 pixelated 的兩處：sections.css 的 .pillar__icon 與 .hero__scene
 * 各自寫了一份（Task 3、Task 4 就是為了這一天才那樣寫的）。
 * 這件事由 src/__tests__/landingWindow.test.ts 三條測試盯著：
 * .shot 要明寫 auto、base.css 不准再出現以 img 開頭的全域 pixelated 規則、
 * 那兩個 class 各自的 pixelated 不准被當成重複宣告刪掉。
 */
.pixelated { image-rendering: pixelated; }