/* ==========================================================================
   EVOMNI STOREFRONT — Design Tokens
   來源：evo_ec_ux/frontend-design-system/colors_and_type.css（PM 設計系統）
   本檔為「沿用」而非重造：token 名稱與值與來源一致，改動須兩邊同步。

   字體策略（切版階段暫定，待確認）：
   來源設計系統以 self-hosted Noto Sans TC 變體字為主。本檔不內嵌 @font-face，
   改用系統字體堆疊 fallback——字體檔案落點與載入方式屬站台層決策
   （frontend-kit 已有 partials/external-fonts.blade.php 機制）。

   斷點（前台全站單一定義；PM 2026-10-08 裁示「前台全站最小寬度 375，斷點 768 與 1024」；
   evomni/issues#182、#185）：
     手機  ≤ 767px      → @media (max-width: 767px)
     平板  768–1023px   → @media (min-width: 768px) / (max-width: 1023px)
     桌機  ≥ 1024px     → @media (min-width: 1024px)
   ⚠️ CSS 自訂屬性進不了 @media 條件 ⇒ 這裡是文字定義，交易頁樣式檔由
      tests/Storefront/Feature/StorefrontBreakpointsTest.php 守（⛔ 再寫 640／899／1024（max）這類各自的線）。
   ========================================================================== */

:root {
  /* ---- 1. 中性色階 ---------------------------------------------------- */
  --ink-900: #303133;   /* 主文字 / 近黑 */
  --ink-700: #606266;   /* 次要文字 */
  --ink-500: #909399;   /* 三級文字、說明、placeholder */
  --ink-300: #c0c4cc;   /* 禁用文字、淡圖示 */

  --line-400: #dcdfe6;  /* 基本邊框（輸入框、分隔線） */
  --line-300: #e4e7ed;
  --line-200: #ebeef5;
  --line-100: #f2f6fc;

  --fill-100: #ffffff;  /* 頁面底 */
  --fill-200: #fafafa;  /* hover 底、斑馬紋 */
  --fill-300: #f9fafb;  /* 卡片 / 面板 */
  --fill-400: #f5f7fa;  /* 下沉區塊、輸入框底 */

  /* ---- 2. 品牌 / 主要動作 --------------------------------------------- */
  /* 預設炭黑；商家品牌色日後只需換這組，不動其他任何地方 */
  --brand: #303133;
  --brand-hover: #1a1b1d;
  --brand-active: #000000;
  --brand-soft: #f4f4f5;
  --brand-on: #ffffff;

  /* ---- 3. 語意色（僅用於狀態，不作裝飾） ------------------------------ */
  --success: #67c23a;  --success-soft: #f0f9eb;
  --warning: #e6a23c;  --warning-soft: #fdf6ec;
  --danger:  #f56c6c;  --danger-soft:  #fef0f0;
  --info:    #909399;  --info-soft:    #f4f4f5;

  /* ---- 4. 語意別名（元件一律用這層，不直接用原始 token） -------------- */
  --bg:             var(--fill-100);
  --surface:        var(--fill-300);
  --surface-sunken: var(--fill-400);
  --fg:             var(--ink-900);
  --fg-muted:       var(--ink-700);
  --fg-subtle:      var(--ink-500);
  --fg-disabled:    var(--ink-300);
  --border:         var(--line-400);
  --border-light:   var(--line-200);

  /* ---- 5. 字體 --------------------------------------------------------- */
  --font-sans: "Inter", "Noto Sans TC", -apple-system, "PingFang TC",
               "Microsoft JhengHei", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "SF Mono", "Roboto Mono", ui-monospace, monospace;

  --w-light: 300;  --w-regular: 400;  --w-medium: 500;
  --w-semibold: 600;  --w-bold: 700;

  --t-display: 56px;
  --t-h1: 40px;
  --t-h2: 30px;
  --t-h3: 22px;
  --t-h4: 18px;
  --t-body: 16px;
  --t-sm: 14px;
  --t-xs: 14px;        /* 最小字級鎖 14px，不得更小 */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.16em;

  /* ---- 6. 圓角：招牌是「方」，只有膠囊是圓的 -------------------------- */
  --radius: 0px;
  --radius-pill: 9999px;

  /* ---- 7. 陰影：極簡、低透明、不帶色 ---------------------------------- */
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 10px 25px rgba(0, 0, 0, 0.08);
  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* ---- 8. 間距：4px 基準 ---------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --container: 1280px;
  --container-wide: 1440px;
  --gutter: 24px;

  /* ---- 9. 動態 -------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur: 250ms;
  --dur-slow: 400ms;

  /* ---- 10. 交易頁專用層級 --------------------------------------------- */
  --z-mini-cart: 1000;      /* 迷你購物車側邊欄 */
  --z-mini-cart-overlay: 999;
}

/* ==========================================================================
   語意字級 class
   ========================================================================== */
.ds-h1 { font: var(--w-bold) var(--t-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-tight); color: var(--fg); }
.ds-h2 { font: var(--w-semibold) var(--t-h2)/var(--lh-snug) var(--font-display); letter-spacing: var(--ls-tight); color: var(--fg); }
.ds-h3 { font: var(--w-semibold) var(--t-h3)/var(--lh-snug) var(--font-sans); color: var(--fg); }
.ds-h4 { font: var(--w-medium) var(--t-h4)/var(--lh-snug) var(--font-sans); color: var(--fg); }
.ds-body { font: var(--w-regular) var(--t-body)/var(--lh-normal) var(--font-sans); color: var(--fg-muted); }
.ds-sm { font: var(--w-regular) var(--t-sm)/var(--lh-normal) var(--font-sans); color: var(--fg-muted); }
.ds-caption { font: var(--w-regular) var(--t-xs)/var(--lh-snug) var(--font-sans); color: var(--fg-subtle); }

/* Eyebrow：大寫、寬字距——storefront 的標誌性排版語彙 */
.ds-eyebrow {
  font: var(--w-medium) var(--t-xs)/1 var(--font-sans);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* 價格：表格數字對齊 */
.ds-price {
  font: var(--w-medium) var(--t-h4)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}