/* ============================================
   1-SETTINGS — Design Tokens
   數值來源：D:\figma-export 之 31 份 tokens.json 實測彙總
   ============================================ */
:root {
  /* ── Color ──
     品牌紅 #e6433e 出現於 30/31 頁，深棕 #523817 出現於 26/31。 */
  --color-brand:        #e6433e;
  --color-brand-hover:  #db202c;
  --color-brand-soft:   #ffe1e0;
  --color-brand-soft-2: #ffd4d4;
  --color-brand-dark:   #802523;   /* 頁尾版權列底色、客服鈕漸層終點 */

  --color-accent:       #fea500;
  --color-accent-soft:  #fffca8;
  --color-highlight:    #fce605;

  --color-text:         #000000;
  --color-heading:      #523817;
  --color-text-muted:   #888888;

  --color-bg:           #ffffff;
  --color-surface:      #faf8f5;
  --color-border:       #d9d9d9;

  --color-success:      #10b981;
  --color-warning:      #fea500;
  --color-danger:       #e6433e;

  /* ── Typography ──
     設計稿字級 12/14/16/20/24/28/48，以 640→1280 線性內插成 clamp()。
     Inter 無中文字符，中文由 Noto Sans TC 承接；Georgia 僅供英數裝飾標題。 */
  --font-sans:  "Inter", "Noto Sans TC", system-ui, -apple-system, "Segoe UI",
                "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-serif: Georgia, "Times New Roman", "Noto Serif TC", serif;

  /* 固定 12px：手機端 11px 對中文而言已經低於易讀下限，而所有使用處
     （mega 選單說明、方案備註、標籤序號）的設計稿值本來就是 12。 */
  --fs-xs:   0.75rem;                                        /* 12px */
  /* 整體字級較設計稿收一階（約 −8%）—— 設計稿的中文在實機上偏大。
     上限是實際會看到的值，下限同步收；12px 的 --fs-xs 是易讀下限，不動。
     設計稿原值：14 / 16 / 20 / 24 / 28 / 48 */
  --fs-sm:   clamp(0.75rem,   0.70rem + 0.16vw, 0.8125rem);  /* → 13px */
  --fs-base: clamp(0.875rem,  0.82rem + 0.16vw, 0.9375rem);  /* → 15px */
  --fs-lg:   clamp(1rem,      0.82rem + 0.45vw, 1.125rem);   /* → 18px */
  --fs-xl:   clamp(1.125rem,  0.90rem + 0.60vw, 1.375rem);   /* → 22px */
  --fs-2xl:  clamp(1.25rem,   0.90rem + 0.88vw, 1.625rem);   /* → 26px */
  --fs-3xl:  clamp(1.75rem,   0.90rem + 2.30vw, 2.75rem);    /* → 44px */

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* 設計稿 399 個 Inter 文字節點的 AUTO 行高全落在 1.188～1.214，
     所以全站基準行高就是 1.2；1.6 這種寬鬆值只有在設計稿沒涵蓋的長篇正文才用。 */
  --lh-tight: 1.2;
  --lh-base:  1.2;       /* 設計稿基準 */
  --lh-loose: 1.8;       /* 僅供長篇中文正文（文章內文、FAQ 答案） */

  /* ── Spacing：4px 基準 ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;   /* 40px — 設計稿三欄間距 */
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── Radius ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-full: 9999px;

  /* ── Shadow ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
  --shadow-md: 0 4px 6px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 20px rgba(0,0,0,.15);
  /* 設計稿實際使用的三種 effects（來源 meta.json 的 effects，匯出的 CSS 不含） */
  --shadow-card:  4px 4px 20px rgba(0, 0, 0, .25);   /* 方案卡、紅框說明盒 */
  --shadow-title: 0 4px 4px rgba(0, 0, 0, .25);      /* 主視覺標題 */
  --shadow-icon:  0 2px 9px rgba(0, 0, 0, .25);      /* 主視覺 WiFi 圖示 */

  /* ── Transition ── */
  --ease-base: 250ms ease;

  /* ── Breakpoints（JS 讀取用；CSS media query 直接寫 px）── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ── Layout ──
     設計畫布 1920，內容區 1440（兩側各 240）。 */
  --container-max: 90rem;   /* 1440px */
  --container-pad: clamp(var(--space-4), 4vw, var(--space-12));

  --header-h: 60px;         /* 設計稿 header 實測 1920×60 */

  /* 文章內頁三欄：330 + 40 + 700 + 40 + 330 = 1440 */
  --article-rail:    330px;
  --article-content: 700px;
  --article-gap:     var(--space-10);

  /* ── Z-index ── */
  --z-dropdown: 1000;
  --z-sticky:   1010;
  --z-fixed:    1020;
  --z-modal:    1050;
  --z-tooltip:  1070;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    /* 只關時長不夠：手機選單的逐項延遲最長 310ms，沒清掉會變成「卡住才出現」 */
    transition-delay: 0s !important;
  }
}