/**
 * 昂昂向上 - 共用樣式
 * ------------------------------------------------------
 * 這是 index.html 與 product.html 都會載入的共用CSS，
 * 只放兩邊逐字相同的規則：色票變數、基礎reset、body樣式。
 *
 * 之後要調整品牌色、背景色、字型，只需要改這個檔案，
 * 兩個頁面會自動同步，不需要再分別去改兩份 <style>。
 *
 * 不放在這裡的部分：
 * - 各頁面專屬的版型（首頁的商品格子、商品頁的圖庫/specs等）
 * - 兩邊看起來相似但實際數值不同的規則（例如兩邊的 .warning-box
 *   目前設定不同，分開維護即可，不要為了「共用」而強行拉齊）
 * - .material-symbols-rounded 的尺寸兩邊故意不同（商品頁的圖示
 *   大小會依情境變化，首頁固定20px），這也保留在各自頁面裡
 */

:root {
    --brand-orange: #fc4000;
    --bg-light: #FFF8F2;
    --card-bg: #FFF8F2;
    --text-main: #2D2D2D;
    --text-muted: #8A8A8A;
}

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html {
    background-color: var(--bg-light);
}

body {
    font-family: 'Noto Sans TC', sans-serif;
    margin: 0;
    color: var(--text-main);
    background-color: var(--bg-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}