/* ============================================================
   Rainforest Retail 設計 Token
   來源：https://rainforestretail.com/ 實測擷取（Framer design tokens）
   詳見 docs/02-設計系統.md
   網站集中使用此檔，確保與母公司官網視覺一致
   ============================================================ */

/* ============================================================
   自架字體子集（取代原本的 Google Fonts css2 連結）
   ------------------------------------------------------------
   為什麼不用 Google Fonts：那份 css2 樣式表是 render-blocking 的第三方資源，而且
   Noto Sans TC 的 unicode-range 子集切得很粗，本站的中文字散落在多個區塊裡，要下載
   遠超實際需要的量才湊齊。前後量測數字見 docs/05-上線後檢核與改善計畫.md 的
   「執行紀錄：P1 字體自架子集化」（數字只留在那裡，避免副本漂移）。

   三個不可破壞的點（完整清單見 CLAUDE.md 架構要點的字體段）：
   1. **檔名帶版號，不可改用 ?v= query。** 實測本站的 CloudFront 沒有把 query
      string 納入快取鍵（style.css?v=aaa 與 ?v=bbb 回同一個 ETag 與 age），字體
      改用 ?v= 會變成「瀏覽器當成新 URL、邊緣卻回舊位元組」，比不破快取更糟。
   2. **字重宣告成範圍（可變字體），不可拆成三個靜態檔。** TC 實測 172 KB vs 304 KB。
      範圍刻意只覆蓋頁面用到的字重：CSS 要求範圍外的值會被 clamp 到端點，與改版前
      Google 只提供 400;500;600（Rubik 600;700）時瀏覽器挑最近字重的結果完全一致。
   3. **Inter／Rubik 吃的是 Google `latin` 子集的整個字元表**，不是「頁面現在用到的
      西文字元」。這不是為了渲染一致（兩種切法可見結果相同），換來的是「改西文文案
      不必重跑產生腳本」的餘裕，代價約 33 KB。附帶效果是破折號、刪節號、彎引號
      （U+2000-206F）繼續由 Inter 供應，與改版前相同；不要把它們挪到 Noto Sans TC，
      中文全形標點與西文標點的字寬不同。
   斜體刻意不自架：全站只有 .explain__lead em 一處，改版前也沒有向 Google 要 italic
   軸，一直是瀏覽器合成的傾斜，維持現狀即可。
   下面三條 src 的版號由 docs/ref/build-fonts.sh 自動寫入，不要手改。
   ============================================================ */
@font-face {
  font-family: "Inter";
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-400-600-20260826.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/rubik-600-700-20260826.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans TC";
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/noto-sans-tc-400-600-20260826.woff2") format("woff2");
}

:root {
  /* --- 強調色：綠 ---------------------------------------------
     母公司官網實測值（Framer 圖層名稱標明了各自用途）：
       #77ff2e  Primary 按鈕的 "Highlighter" — 過亮，需求方指定不採用
       #93f155  文字的 "Highlighter"        — 本站主綠（填色面）
       #b5f28a  "Filler"                  — 官網 top menu 按鈕 hover 實測值，本站沿用
     注意：官網只把綠色當「填色面」用，從不當文字色 —— #93f155 對白底
     只有 1.40:1、#b5f28a 只有 1.31:1。本站需要綠色文字，因此另外推導
     一支夠深的 --rf-accent-text（見下）。
     （官網另宣告一支 #ff462e 橘紅 token，但全站無任何元素引用，
       屬死 token，不予採用。此處也刻意不留未使用的 token。） */
  --rf-accent:        #93f155;              /* 主綠 — 按鈕底、highlighter、填色條、裝飾線
                                               配 accent-ink 14.18:1 */
  --rf-accent-hover:  #b5f28a;              /* 按鈕 hover — 官網 top menu 實測值
                                               與 accent 的 ΔE 26.24，差異明顯；配 accent-ink 15.20:1 */
  --rf-accent-text:   #3b7515;              /* 綠色文字專用 —— 由 #93f155 壓暗而來：
                                               色相 96.2°、飽和 0.70 與主綠一致，只降明度到
                                               通過 WCAG AA。對白底 5.61:1、bg-1 5.37:1、
                                               bg-4 5.11:1，最深的淺色底也有餘裕。 */
  --rf-accent-ink:    #090909;              /* 綠底上的文字色 */

  /* --- 文字 --- */
  --rf-ink:           #090909;
  --rf-ink-29:        #29292b;
  --rf-ink-1e:        #1e1e1e;
  --rf-ink-80:        rgba(9, 9, 9, .8);
  --rf-ink-60:        rgba(9, 9, 9, .6);   /* 淡化文字的下限；對 bg-4 5.15:1 */
  --rf-grey:          #63615e;             /* 暖灰文字；對 bg-4 5.62:1 */

  /* ⚠️ 以下兩支為母公司實測值，但在淺色底上當文字色**不符 WCAG AA**
     （對白底 3.74:1 / 4.00:1，對 bg-4 更低）。本站已全數改用上方的
     --rf-ink-60 與 --rf-grey。保留於此僅為記錄官網原值，勿用於文字。 */
  --rf-ink-50:        rgba(9, 9, 9, .5);
  --rf-grey-7f:       #7f7f80;

  /* --- 線條 --- */
  --rf-line:          #eaeaea;
  --rf-line-soft:     rgba(234, 234, 234, .65);
  --rf-line-strong:   #d9d9d9;

  /* --- 陰影 --- */
  --rf-shadow-card:   0 8px 24px rgba(9, 9, 9, .05);

  /* --- 底色（皆為暖調極淺灰，非冷灰） --- */
  --rf-white:         #ffffff;
  --rf-bg-1:          #fafaf9;
  --rf-bg-2:          #f9f9f9;
  --rf-bg-3:          #f7f7f7;
  --rf-bg-4:          #f5f4f3;

  /* --- 深色（由 ink 延伸） --- */
  --rf-dark:          #090909;
  --rf-dark-2:        #131313;
  --rf-dark-line:     rgba(255, 255, 255, .12);
  --rf-dark-ink-60:   rgba(255, 255, 255, .6);
  --rf-dark-ink-80:   rgba(255, 255, 255, .82);

  /* --- 字體 --- */
  --font-display: "Rubik", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-sans:    "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* --- 字距（實測值） --- */
  --ls-eyebrow:  2.4px;
  --ls-h1:      -1px;
  --ls-h2:      -0.8px;
  --ls-h3:      -0.4px;
  --ls-body:    -0.1px;

  /* --- 圓角（母公司以方角為主，僅按鈕/卡片 8px） --- */
  --r-card: 8px;
  --r-pill: 10px;

  /* --- 版面 --- */
  --wrap:      1200px;
  --wrap-wide: 1440px;
  --gutter:    24px;
  /* 頁首高度。放在 :root 而非 .site-header 上（不同於 --brand-logo-h）：錨點目標的
     scroll-margin-top 與行動版選單卡片的 top／max-height 都要讀它。
     讓開頁首**只能**用目標元素的 scroll-margin-top，不可改成 html 的
     scroll-padding-top —— 理由見 style.css 該規則的註解。 */
  --header-h:  66px;

  /* --- 區塊垂直間距 --- */
  --sec-y:      120px;
  --sec-y-tab:   88px;
  --sec-y-mob:   64px;

  /* --- 動態（Hero 與內容進場共用；進場位移一律 ≤ 24px） --- */
  --dur-rise:  .62s;                        /* 一次性進場淡入上移 */
  --dur-sweep: 1.1s;                        /* AI 答案完整入鏡後，highlighter 由左往右刷過 */
  --dur-drift:   9s;                        /* 背景圖環境漂移（無限循環，不支援
                                               scroll-driven 動畫時才會生效） */
  --dur-pulse: 2.4s;                        /* AI 答案指示點脈動（無限循環） */
  --dur-signal:   5s;                        /* 路徑啟動間隔與 console 接棒週期 */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
}

/* 母公司斷點：809.98 / 1199.98 / 1439.98 */
@media (max-width: 1199.98px) {
  :root { --gutter: 24px; }
}
@media (max-width: 809.98px) {
  :root { --gutter: 20px; }
}