/**
 * 集光市 Jiguang Market — Global Design System
 * -------------------------------------------------------------
 * 本檔集中定義所有設計 Token（顏色、字體、字級、間距、圓角、陰影、
 * 容器寬度、Breakpoint 對應變數），供全站 CSS 與 Elementor Global
 * Settings 對齊使用。請勿在此加入版面（layout）樣式，版面請寫在
 * base.css 與各 template-part 對應的樣式中。
 *
 * 命名慣例：所有自訂變數以 --jgs- 為前綴。
 */

:root {
	/* ---------------------------------------------------------
	 * 1. 品牌色彩
	 * --------------------------------------------------------- */
	--jgs-primary: #F4D447;      /* 陽光黃：按鈕、標籤、重點底色、Hover、CTA */
	--jgs-primary-ink: #2E302D;  /* 黃底之上的文字色（確保對比） */
	--jgs-secondary: #476454;    /* 深綠：標題、導覽列、深色按鈕、Footer */
	--jgs-secondary-dark: #37503F;
	--jgs-background: #FAF8F1;   /* 米白：全站主要背景 */
	--jgs-white: #FFFFFF;
	--jgs-text: #2E302D;         /* 主要文字 */
	--jgs-muted: #77776F;        /* 次要文字 */
	--jgs-border: #E7E3D9;       /* 淺灰框線 */
	--jgs-accent: #D9785F;       /* 暖橘紅點綴：節慶、熱門標籤、少量裝飾 */
	--jgs-accent-soft: #F6E7E1;

	/* 狀態色（活動狀態 / 表單狀態） */
	--jgs-success: #4E8A5B;
	--jgs-warning: #C9932F;
	--jgs-danger: #B4553F;
	--jgs-info: #476454;

	/* ---------------------------------------------------------
	 * 2. 字體家族
	 *    中文字體最多載入兩組；不依賴使用者本機字體。
	 * --------------------------------------------------------- */
	--jgs-font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "DM Sans", "Inter", sans-serif;
	--jgs-font-heading: "Noto Serif TC", "Source Han Serif TC", "Songti TC", serif;
	--jgs-font-en-display: "Cormorant Garamond", "Noto Serif TC", serif;
	--jgs-font-label: "DM Sans", "Inter", "Noto Sans TC", sans-serif;

	/* ---------------------------------------------------------
	 * 3. 響應式字級系統（clamp）
	 * --------------------------------------------------------- */
	--jgs-font-display: clamp(42px, 6vw, 82px);
	--jgs-font-h1: clamp(34px, 4.5vw, 60px);
	--jgs-font-h2: clamp(28px, 3vw, 44px);
	--jgs-font-h3: clamp(22px, 2vw, 30px);
	--jgs-font-h4: clamp(18px, 1.5vw, 24px);
	--jgs-font-body-lg: 18px;
	--jgs-font-body: 16px;
	--jgs-font-body-sm: 14px;
	--jgs-font-label: 13px;

	/* 行高 */
	--jgs-leading-body: 1.8;
	--jgs-leading-heading: 1.25;
	--jgs-leading-tight: 1.1;

	/* 字距 */
	--jgs-tracking-label: 0.14em; /* 英文小標常用大字距 */
	--jgs-tracking-tight: -0.01em;

	/* 字重 */
	--jgs-weight-regular: 400;
	--jgs-weight-medium: 500;
	--jgs-weight-semibold: 600;
	--jgs-weight-bold: 700;

	/* ---------------------------------------------------------
	 * 4. 圓角
	 * --------------------------------------------------------- */
	--jgs-radius-sm: 6px;
	--jgs-radius-md: 12px;
	--jgs-radius-lg: 20px;
	--jgs-radius-pill: 999px;
	--jgs-radius-image: 12px; /* 照片預設圓角 8–16px */

	/* ---------------------------------------------------------
	 * 5. 陰影（僅必要時使用，禁止 Elementor 預設濃重陰影）
	 * --------------------------------------------------------- */
	--jgs-shadow-soft: 0 12px 40px rgba(42, 43, 39, 0.08);
	--jgs-shadow-card: 0 6px 24px rgba(42, 43, 39, 0.06);
	--jgs-shadow-header: 0 1px 0 rgba(42, 43, 39, 0.06);

	/* ---------------------------------------------------------
	 * 6. 容器寬度
	 * --------------------------------------------------------- */
	--jgs-container-wide: 1440px;
	--jgs-container-main: 1280px;
	--jgs-container-content: 1120px;
	--jgs-container-reading: 780px;

	/* ---------------------------------------------------------
	 * 7. 左右內距（依裝置切換，見 base.css 的 media query）
	 * --------------------------------------------------------- */
	--jgs-gutter: 64px;   /* 桌機 40–64px */
	--jgs-gutter-tablet: 28px;
	--jgs-gutter-mobile: 18px;

	/* ---------------------------------------------------------
	 * 8. 區塊上下間距（Section rhythm）
	 * --------------------------------------------------------- */
	--jgs-section-y: 120px;        /* 桌機 100–140px */
	--jgs-section-y-tablet: 84px;  /* 平板 72–96px */
	--jgs-section-y-mobile: 60px;  /* 手機 56–72px */

	/* ---------------------------------------------------------
	 * 9. Header 高度
	 * --------------------------------------------------------- */
	--jgs-header-h: 88px;          /* 桌機 80–92px */
	--jgs-header-h-scrolled: 70px; /* 滾動後 68–72px */

	/* ---------------------------------------------------------
	 * 10. 動畫時間與緩動
	 * --------------------------------------------------------- */
	--jgs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--jgs-duration-fast: 250ms;
	--jgs-duration: 400ms;
	--jgs-duration-slow: 600ms;

	/* 層級 */
	--jgs-z-header: 900;
	--jgs-z-drawer: 1000;
	--jgs-z-modal: 1100;
}

/* -------------------------------------------------------------
 * Breakpoints（供文件參考；CSS 內請直接使用對應 px 值）
 *   Desktop XL：>= 1440px
 *   Desktop：   1025–1439px
 *   Tablet：    768–1024px
 *   Mobile：    0–767px
 * ------------------------------------------------------------- */