/* ==========================================================================
   全站設計變數（顏色／字體／間距／圓角／容器寬度／斷點）
   未來轉換 ASP Classic 時，此檔案原樣保留，不需修改
   ========================================================================== */

:root {
  /* ---- 顏色：明亮冰川藍＋雪地白，呈現北海道雪場的清爽明亮感 ----
     設計方向：深藍僅保留在少量文字／footer，不作為全站主背景。
     主要區塊以白、雪灰、淡冰藍為主，暖橘僅作少量強調（價格／標籤）。 */
  --color-snow: #ffffff;
  --color-snow-soft: #f6f9fb;
  --color-mist: #eef3f6;
  --color-border: #dbe5eb;

  --color-ink: #263140;
  --color-ink-soft: #56626f;
  --color-ink-muted: #838fa0;

  /* 明亮冰川藍：作為 CTA／連結／強調色的主色，避免深藏青作為主背景
     --color-primary 已核對 WCAG AA（白字對比 5.45:1） */
  --color-primary: #1f6ea8;
  --color-primary-hover: #175981;
  --color-primary-dark: #144a6b;
  --color-primary-soft: #eaf4fb;

  /* 暖色僅作少量強調：價格、標籤、重要提示
     --color-accent-dark 用於白字按鈕（對比 4.76:1）；--color-accent 用於淺底文字強調 */
  --color-accent: #d97f2e;
  --color-accent-dark: #b8570d;
  --color-accent-soft: #fdf1e2;

  --color-success: #2f8f5e;
  --color-warning: #c17e1f;
  --color-error: #c0453a;

  /* 別名（供元件對應設計稿命名使用，與上方色票同值） */
  --color-surface: var(--color-snow);
  --color-surface-muted: var(--color-snow-soft);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-soft);

  /* ---- 字體：全站統一使用 Noto Sans TC，標題與內文共用同一字族
     不在各 selector 重複宣告，一律透過 --font-base 套用 ---- */
  --font-base: "Noto Sans TC", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-base);

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 2.75rem;

  --lh-tight: 1.25;
  --lh-base: 1.6;
  --lh-loose: 1.8;

  /* ---- 間距（8px 基準） ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* ---- 圓角：刻意收斂，不做過度圓潤 ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* ---- 陰影：僅用於必要的層次區隔，刻意壓低量感避免厚重感 ---- */
  --shadow-sm: 0 1px 2px rgba(38, 49, 64, 0.06);
  --shadow-md: 0 6px 16px rgba(38, 49, 64, 0.08);

  /* ---- 容器寬度 ---- */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-pad: var(--space-5);

  /* ---- 斷點（作為註解參考，媒體查詢需寫死數值） ---- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---- 轉場 ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ---- 版面 ---- */
  --header-height: 64px;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 190;
  --z-fab: 250;
  --z-toast: 300;
}