/* ==========================================================================
   愛色智能印刷 — 設計 Token
   這一層是「官網 / SHOPPING / 接單系統 /go / 後台」共用的單一視覺來源。
   改這裡，四個系統同時改。不要在其他檔案寫死 hex。
   對照文件：愛色網站 spec.md §1 色彩、§2 字體、§3 間距與尺寸
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. 品牌色
     色彩比例原則：灰白中性約 80%、藍色系約 15%、金黃約 5%。
     金黃只給最重要的行銷按鈕與重點標記，不要灑。
     --------------------------------------------------------------------- */
  --brand: #00A0E9;            /* 亮藍：Logo、圖示、裝飾線、選中狀態 */
  --btn-blue: #006FA8;         /* 深藍：主要按鈕底、連結、英文副標、公告列底 */
  --btn-blue-hover: #005A88;
  --accent: #FCC700;          /* 金黃：加入購物車、行銷 CTA（配碳黑字） */
  --accent-hover: #E6B400;
  --brand-ink: #356572;        /* 青藍：頁首品牌名 */

  /* ---------------------------------------------------------------------
     2. 中性色（與 /go 同名 token）
     --------------------------------------------------------------------- */
  --bg-page: #F0F0F0;         /* 全站頁面背景 */
  --bg: #FFFFFF;              /* 卡片、輸入框、商品區底 */
  --surface: #E6E6E6;         /* 步驟列、上傳區、總覽、表頭 */
  --header-bg-hi: #F6F9FA;    /* 頁首漸層上 */
  --header-bg: #ECF1F3;       /* 頁首漸層下 */
  --header-line: rgba(12, 74, 96, 0.14);
  --header-fg: #2C4650;       /* 頁首選單、工具文字 */
  --header-muted: #4A6B78;    /* 頁首次要文字 */
  --fg: #1A1A1A;              /* 標題、價格、重點字 */
  --fg-2: #555555;            /* 內文、商品名稱 */
  --muted: #666666;           /* 註解、原價、日期 */
  --border: rgba(0, 0, 0, 0.12);
  --border-soft: rgba(0, 0, 0, 0.08);
  --border-dashed: rgba(0, 0, 0, 0.16);
  --border-disabled: #D9D9D9;

  /* 步驟列（結帳 / 下單流程） */
  --steps-bg: #C9CED6;
  --steps-fg: #2F3A45;
  --steps-current: #6A7380;
  --steps-num: #3D5A80;

  /* 系統操作按鈕（碳黑）— 購物車、結帳、會員、下單流程專用 */
  --btn-ink: #1F1F1F;
  --btn-ink-hover: #333333;
  --btn-ink-press: #111111;

  /* ---------------------------------------------------------------------
     3. 功能色
     --------------------------------------------------------------------- */
  --success: #168A46;
  --warn: #B7791F;
  --danger: #C53030;
  --line-green: #06C755;      /* LINE 品牌色 */
  --line-green-hover: #05AC47;
  --info-bg: #EAF6FD;         /* 淺藍底：資訊提示、會員價提示 */
  --promo-bg: #FFF8DB;        /* 淺黃底：活動、優惠提示 */

  /* Hero 漸層與首頁專屬（design-system/pages/index.md） */
  --hero-grad-top: #E6F4FC;   /* hero 上方淡藍 */
  --hero-grad-bot: #FFFFFF;
  --trust-bg: #FAFBFC;        /* 信任列底色，比 page 略白 */
  --trust-fg: #2C4650;        /* 信任列文字 */

  /* 功能色衍生（用於同色系的底與邊，不要只靠顏色分辨狀態） */
  --success-bg: #E6F4EC;
  --warn-bg: #FBF1DF;
  --danger-bg: #FBE9E9;
  --success-line: rgba(22, 138, 70, 0.28);
  --warn-line: rgba(183, 121, 31, 0.28);
  --danger-line: rgba(197, 48, 48, 0.28);
  --info-line: rgba(0, 111, 168, 0.24);
  --promo-line: rgba(252, 199, 0, 0.55);

  /* ---------------------------------------------------------------------
     4. 字體
     只載 400 / 500 / 700。local() 優先，沒有才下載。
     --------------------------------------------------------------------- */
  --font-sans: "Noto Sans TC", "Source Han Sans TC", "思源黑體", "PingFang TC",
    -apple-system, BlinkMacSystemFont, "Microsoft JhengHei", "Segoe UI",
    sans-serif;
  --font-display: "Noto Serif TC", "Source Han Serif TC", "源樣明體",
    "Songti TC", "STSong", "PingFang TC", serif;
  --font-num: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* 字級階層 */
  --fs-section: 28px;         /* 首頁區塊大標 */
  --fs-page-title: 22px;      /* 頁面主標題 */
  --fs-subtitle: 17px;        /* 區塊副標 */
  --fs-body-marketing: 16px;  /* 行銷頁內文 */
  --fs-body-system: 14px;     /* 系統頁內文 */
  --fs-small: 12px;           /* 輔助小字 */
  --fs-brand: 16px;           /* 頁首品牌名 */
  --fs-nav-zh: 16px;          /* 主選單中文 */
  --fs-nav-en: 11px;          /* 主選單英文副標 */
  --fs-topbar: 12px;          /* 公告列、工具連結 */
  --fs-btn: 14px;             /* 按鈕文字 */
  --fs-label: 14px;           /* 標籤按鈕 */
  --fs-product-name: 14px;    /* 商品名稱 */
  --fs-price: 16px;           /* 價格 */
  --fs-price-old: 12px;       /* 原價刪除線 */

  --lh-tight: 1.35;
  --lh-snug: 1.5;
  --lh-body: 1.7;
  --tracking-body: 0.01em;
  --tracking-brand: 0.24em;
  --tracking-en: 0.08em;
  --tracking-display: 0.02em;

  /* ---------------------------------------------------------------------
     5. 間距與尺寸
     --------------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 10px;
  --sp-4: 12px;
  --sp-5: 14px;
  --sp-6: 18px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  --sp-10: 40px;
  --sp-11: 56px;
  --sp-12: 72px;

  --container: 1160px;        /* 內容最大寬度 */
  --gutter: 20px;             /* 手機時縮到 16px */

  --header-topbar-h: 38px;
  --header-nav-h: 75px;
  --header-h: 113px;          /* 38 + 75 */
  --header-h-shrink: 60px;    /* 捲動後壓縮，只剩主選單列 */

  --hero-ratio: 2.5;          /* 主視覺寬高比 */
  --card-w: 261px;            /* 商品卡欄寬（桌機 4 欄） */
  --card-gap: 20px;           /* 欄距 */
  --product-img-ratio: 1;     /* 商品圖 1:1 */

  --btn-h: 36px;
  --btn-h-sm: 32px;
  --pad-btn: 8px 12px;        /* 主要按鈕內距 */
  --pad-btn-sm: 6px 12px;     /* 小按鈕內距 */

  /* 圓角 */
  --r-btn: 4px;
  --r-card: 8px;              /* 標籤按鈕、選單圖卡 */
  --r-modal: 6px;
  --r-pill: 999px;
  --r-float: 50%;

  /* 陰影 */
  --shadow-float: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-modal: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-header-shrink: 0 1px 4px rgba(12, 74, 96, 0.1);

  /* 聚焦環：鍵盤與程式化 focus 共用；focus-visible 才顯示，滑過不顯示 */
  --focus-ring: 0 0 0 3px rgba(26, 26, 26, 0.18);
  --focus-ring-blue: 0 0 0 3px rgba(0, 111, 168, 0.24);

  /* ---------------------------------------------------------------------
     6. 動效
     系統按鈕 150ms（跟 /go），一般按鈕 300ms
     --------------------------------------------------------------------- */
  --t-fast: 150ms;
  --t-base: 200ms;
  --t-slow: 300ms;
  --ease: ease;
  --ease-io: ease-in-out;

  /* ---------------------------------------------------------------------
     7. 版面分界點（spec §6）
     --------------------------------------------------------------------- */
  --bp-sm: 549px;             /* 手機上限 */
  --bp-md: 849px;             /* 平板上限 */
  --bp-lg: 1079px;            /* 小桌機上限 */
  --bp-xl: 1280px;            /* 桌機上限 */
}

/* 減少動畫：把動態壓到最小，但保留「看得見的狀態改變」 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}