/* ============================================================
   ECOCO 商城設計 Token
   ------------------------------------------------------------
   依據：docs/ECOCO-SPEC-SW-0005_shop-ui-design-system.md
   命名比照官網 ecoco-website/src/styles/theme.css

   規則：所有顏色、字級、間距、圓角只能引用本檔的變數，
        不得在其他 CSS 或 PHP 內硬寫數值。
        新增 token 需先修訂 SPEC-SW-0005。
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     色彩 — 品牌主色（比照官網，不可修改）
     ---------------------------------------------------------- */
  --ecoco-primary-orange: #ff5000;        /* Pantone Orange 021 C：CTA、強調 */
  --ecoco-primary-blue: #060e9f;          /* Pantone Blue 072 C：連結、次要按鈕 */
  --ecoco-primary-yellow: #ffce00;        /* Pantone 116 C：重點標籤 */

  /* 色彩 — 品牌延伸色 */
  --ecoco-secondary-light-blue: #8eb8c9;  /* Pantone 550 C */
  --ecoco-secondary-beige: #fae0b8;       /* Pantone P17-2 C */
  --ecoco-secondary-dark-blue: #0076a9;   /* Pantone 7690 C */
  --ecoco-neutral-white: #ffffff;

  /* 色彩 — 文字與背景（比照官網） */
  --ecoco-text-primary: #373737;
  --ecoco-text-secondary: #4a4a4a;
  --ecoco-bg-color: #fbfbfb;

  /* 色彩 — 商城獨有（官網無對應） */
  --ecoco-surface-paper: #ffffff;         /* 卡片、面板底 */
  --ecoco-surface-cream: #fbf7ef;         /* 溫暖區塊底 */
  --ecoco-border-line: #e7e1d7;           /* 分隔線、表格框線 */
  --ecoco-surface-muted: #dfe3ea;         /* 冷調灰底槽（分段控制項）。品牌色全暖，此為唯一中性偏冷底 */
  --ecoco-orange-dark: #e43b0d;           /* 主橘 hover */
  --ecoco-surface-hero-yellow: #fec002;   /* 主視覺實拍圖的背景黃，供版面與圖片拼接 */

  /* ----------------------------------------------------------
     色彩 — 語意色
     設計原則：主色只用於圖示與左框線，文字一律使用
     --ecoco-text-primary，確保對比度皆在 10:1 以上。
     依品牌規範不使用綠色，「成功」以深藍搭配勾選圖示表達。
     ---------------------------------------------------------- */
  --ecoco-success: #0076a9;               /* 品牌深藍。白底對比 5.0:1 */
  --ecoco-success-bg: #e6f2f8;
  --ecoco-info: #060e9f;                  /* 品牌主藍。白底對比 13.4:1 */
  --ecoco-info-bg: #eef0fa;
  --ecoco-warning: #ffce00;               /* 品牌主黃。僅可作框線／底色 */
  --ecoco-warning-bg: #fff8e1;
  --ecoco-danger: #c92a2a;                /* 功能色，非品牌識別色。對比 5.5:1 */
  --ecoco-danger-bg: #fff1f0;

  /* ----------------------------------------------------------
     字體
     ---------------------------------------------------------- */
  --ecoco-font-base: 'Noto Sans TC', sans-serif;

  /* 字重：900 Hero 與各頁大標 h1／700 區塊標題與按鈕／500 子標題／400 正文
     300 與 100 未載入，禁止使用。h1 不寫字重會落到瀏覽器預設 700，必須明寫 900 */

  /* ----------------------------------------------------------
     字級
     端點值對齊官網的桌機值與手機值，中間以 clamp 流體過渡。
     ---------------------------------------------------------- */
  --ecoco-fs-xs: 0.75rem;                          /* 標籤、日期、圖說 */
  --ecoco-fs-sm: 0.875rem;                         /* 導覽列、按鈕、label、表格 */
  --ecoco-fs-md: 1rem;                             /* 正文 */
  --ecoco-fs-lg: clamp(1.1rem, 2vw, 1.25rem);      /* 子標題 */
  --ecoco-fs-section: clamp(1.5rem, 3vw, 2rem);    /* 卡片標題 h3、商品名、價格 */
  --ecoco-fs-heading: clamp(1.8rem, 4vw, 2.5rem);  /* 區塊標題 h2 */
  --ecoco-fs-page-title: clamp(2.4rem, 4vw, 3rem); /* 各頁 h1 */
  --ecoco-fs-hero: clamp(2.8rem, 5vw, 4rem);       /* 首頁輪播主視覺標題 */
  --ecoco-fs-display-stat: clamp(3rem, 6vw, 5rem); /* 首頁圖形裡的裝飾大數字 */

  /* ----------------------------------------------------------
     間距 — 4px 基準刻度
     ---------------------------------------------------------- */
  --ecoco-space-1: 4px;
  --ecoco-space-2: 8px;
  --ecoco-space-3: 12px;
  --ecoco-space-4: 16px;   /* 最常用 */
  --ecoco-space-5: 24px;
  --ecoco-space-6: 32px;
  --ecoco-space-7: 48px;
  --ecoco-space-8: 64px;
  --ecoco-space-9: 80px;

  /* ----------------------------------------------------------
     圓角
     ---------------------------------------------------------- */
  --ecoco-radius-sm: 12px;    /* 表格、面板、輸入框、卡片內圖 */
  --ecoco-radius-lg: 20px;    /* 卡片。等同官網 --ecoco-border-radius */
  --ecoco-radius-pill: 100px; /* 按鈕、狀態標籤 */

  /* ----------------------------------------------------------
     陰影
     ---------------------------------------------------------- */
  --ecoco-shadow-sm: 0 10px 28px rgba(20, 18, 16, 0.06);  /* 卡片、面板 */
  --ecoco-shadow-lg: 0 16px 40px rgba(28, 25, 20, 0.1);   /* 浮起、彈窗 */

  /* ----------------------------------------------------------
     佈局
     ---------------------------------------------------------- */
  --ecoco-max-width: 1200px;      /* 全站版心，比照官網 */
  --ecoco-reading-width: 800px;   /* 條款、隱私權等長文頁 */
  --ecoco-navbar-height: 80px;    /* 比照官網。Logo 尺寸見 SPEC-SW-0005 §7.1 */

  /* ----------------------------------------------------------
     動效
     ---------------------------------------------------------- */
  --ecoco-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ecoco-duration-fast: 0.2s;
  --ecoco-duration-base: 0.3s;
  --ecoco-duration-slow: 0.75s;
}

/* ============================================================
   響應式斷點
   CSS 自訂屬性無法用於 @media 條件式，故以常數形式記錄。
   所有 @media 必須使用下列四個值，不得自訂。

     桌機    預設（≥ 1025px）
     平板    @media (max-width: 1024px)
     手機    @media (max-width: 768px)
     小手機  @media (max-width: 390px)
   ============================================================ */