/* 倉老闆 CangPro — 客戶端設計 token 層(單一設計真相源)
* 用法:各頁 加 。
* 只加 頁面「不會變」(只引入 CSS 變數與 cp-* 元件),要用時把 inline style 換成 cp-* class,可逐頁漸進、隨時回退。
* 基準取自 wallet.html(spec 說 4 頁中最精緻)。ES 無關、純 CSS、零外部相依(不從 Google Fonts 抓,避免深圳連外部 CDN 不穩)。
*/
:root{
/* 色 —— 收斂自 wallet/member(primary 磚紅、accent 橘) */
--cp-primary:#c8360a; --cp-primary-d:#a52d08; --cp-accent:#ff6b35;
--cp-ink:#1a1208; --cp-muted:#7a5040; --cp-muted2:#9b7860; --cp-faint:#999;
--cp-bg:#faf9f7; --cp-line:#f0e8dc; --cp-surface:#fff;
--cp-tint:#fff5ec; --cp-tint-green:#e8f5f0; --cp-tint-amber:#fef4e0; --cp-tint-blue:#e8f3ff;
--cp-ok:#1a7a5e; --cp-warn:#b45309; --cp-danger:#dc2626; --cp-info:#2266b8; --cp-line-green:#06c755;
/* 圓角(原本 8/10/12/14/16/18/24 太多 → 收成 4 級) */
--cp-r-sm:8px; --cp-r:12px; --cp-r-card:14px; --cp-r-lg:20px;
/* 陰影 */
--cp-shadow:0 2px 10px rgba(60,40,20,.06); --cp-shadow-modal:0 8px 32px rgba(0,0,0,.25);
/* 字級(收成一套 scale) */
--cp-fs-xs:11px; --cp-fs-sm:13px; --cp-fs:14px; --cp-fs-md:15px;
--cp-fs-lg:17px; --cp-fs-xl:20px; --cp-fs-hero:28px;
/* 間距 */
--cp-sp:8px; --cp-sp2:12px; --cp-sp3:16px; --cp-sp4:20px;
/* 字體(統一;純字體名、不從 Google Fonts 抓) */
--cp-font:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
}
/* 元件(給頁面漸進採用,class 前綴 cp- 不會撞到現有 class) */
.cp-page{background:var(--cp-bg);color:var(--cp-ink);font-family:var(--cp-font);}
.cp-card{background:var(--cp-surface);border-radius:var(--cp-r-card);padding:18px;box-shadow:var(--cp-shadow);border:1px solid var(--cp-line);}
.cp-card+.cp-card{margin-top:var(--cp-sp2);}
.cp-title{font-size:var(--cp-fs-lg);font-weight:800;color:var(--cp-ink);margin:0 0 var(--cp-sp2);}
.cp-sub{font-size:var(--cp-fs-sm);color:var(--cp-muted);line-height:1.6;}
.cp-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:14px;border-radius:var(--cp-r);font-weight:700;font-size:var(--cp-fs-md);border:none;cursor:pointer;font-family:inherit;box-sizing:border-box;}
.cp-btn-primary{background:var(--cp-primary);color:#fff;}
.cp-btn-primary:active{background:var(--cp-primary-d);}
.cp-btn-ghost{background:#fff;color:var(--cp-primary);border:1.5px solid var(--cp-primary);}
.cp-btn:disabled{opacity:.5;cursor:not-allowed;}
.cp-chip{display:inline-block;border:1.5px solid var(--cp-line);border-radius:10px;padding:9px 13px;font-size:var(--cp-fs-sm);background:#fff;color:var(--cp-ink);cursor:pointer;user-select:none;}
.cp-chip.on{background:var(--cp-primary);color:#fff;border-color:var(--cp-primary);font-weight:700;}
.cp-input{width:100%;padding:12px;border:1.5px solid var(--cp-line);border-radius:var(--cp-r);font-size:var(--cp-fs-md);box-sizing:border-box;font-family:inherit;background:#fff;color:var(--cp-ink);}
.cp-input:focus{outline:none;border-color:var(--cp-primary);}
.cp-modal{background:#fff;border-radius:var(--cp-r-lg);box-shadow:var(--cp-shadow-modal);}
.cp-muted{color:var(--cp-muted);}
.cp-hr{height:1px;background:var(--cp-line);border:0;margin:var(--cp-sp2) 0;}