/* =====================================================================
 * benq-tokens.css — BenQ 設計系統 design token（單一真相）
 * ---------------------------------------------------------------------
 * 色彩哲學對齊 benq.com（2026-07 實測）：黑白極簡為主體，
 * 品牌紫降級為 accent（小連結 / hover 點綴），不再作主 CTA 色。
 *
 * 載入方：
 *   - 前台 base2.html（於 benq-flat.css 之前）
 *   - 後台個別頁（eshop/admin/add_product.html、admins/home/article/*_post.html
 *     等有消費 var(--benq-*) 的頁面）
 * 勿在此檔加入任何 selector 規則，只放 :root 變數。
 * ===================================================================== */

:root {
    /* ---- 主體（黑白哲學） ---- */
    --benq-black: #000000;
    --benq-white: #FFFFFF;

    /* ---- Accent：BenQ 紫（連結 / hover 點綴用，非主 CTA 色） ---- */
    --benq-pri: #7231C6;
    --benq-pri-dark: #5B21B6;
    --benq-pri-light: #EDE9FE;

    /* ---- 中性 ---- */
    --benq-bg: #FFFFFF;
    --benq-bg-soft: #F9FAFB;
    --benq-border: #E5E7EB;
    --benq-text: #111827;
    --benq-text-soft: #6B7280;
    /* 導覽列 / 選單 / 電商側欄文字：比 #6c727f 略黑的中性灰 */
    --benq-nav-text: #585e6b;

    /* ---- 表面色（section 底色輪替，取自 benq.com 實測） ---- */
    --benq-surface-gray: #F2F2F2;
    --benq-surface-cream: #F2E6DA;
    --benq-surface-lavender: #E6E6F2;

    /* ---- Eyebrow 紅標（「新品」「推薦」式小標） ---- */
    --benq-red: #E60012;

    /* ---- 狀態 ---- */
    --benq-success-bg: #ECFDF5;
    --benq-success-fg: #047857;
    --benq-warning-bg: #FEF3C7;
    --benq-warning-fg: #92400E;
    --benq-danger-bg: #FEE2E2;
    --benq-danger-fg: #B91C1C;
    --benq-info-bg: #EFF6FF;
    --benq-info-fg: #1E40AF;

    /* ---- 形狀 ---- */
    --benq-radius: 12px;
    --benq-radius-sm: 8px;
    --benq-radius-lg: 20px;
    /* BenQ 式按鈕小圓角 / 大圖 inset 容器圓角 */
    --benq-radius-btn: 4px;
    --benq-radius-media: 24px;
    --benq-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    --benq-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.08);

    /* ---- 動效 ---- */
    --benq-transition-fast: 0.1s;

    /* ---- 響應式 type scale（benq.com 大標上限 48px / 700） ---- */
    --benq-h1: clamp(2.25rem, 4vw, 3rem);
    --benq-h2: clamp(1.875rem, 3.2vw, 2.75rem);
    --benq-lede-size: clamp(1rem, 1.4vw, 1.25rem);
    --benq-eyebrow-size: 1.25rem;
    --benq-section-pad: clamp(3rem, 8vw, 7rem);
}