/* ========================================
   TOKENS.CSS - 全站設計系統
   顏色、字級、間距、圓角、陰影
   ======================================== */

:root {

/* ===== 顏色 Token ===== */
  --color-primary: #C9A45B;        /* 金色主色 */
  --color-primary-light: #E8D4B0;  /* 淺金色 */
  --color-primary-dark: #A68443;   /* 深金色 */
  --color-primary-Pale: #FAF9F5;  /* 更淺金色 */
  
  --color-accent: #D32F2F;         /* 紅色強調 */
  --color-accent-light: #E57373;   /* 淺紅 */
  
  --color-dark: #1a1a1a;           /* 深灰/黑 */
  --color-dark-secondary: #333333; /* 次深灰 */
  --color-text: #4A4A4A;           /* 正文文字色 */
  --color-text-light: #666666;     /* 淺文字色 */
  --color-text-lighter: #999999;   /* 更淺文字色 */
  
  --color-light: #f5f5f5;          /* 淺灰背景 */
  --color-light-secondary: #efefef;/* 次淺灰 */
  --color-white: #ffffff;          /* 純白 */
  
--color-border: rgba(17, 24, 39, 0.12); /* 邊線色（淡） */



/* ===== 字體 Token ===== */
 /* CJK fallback 鏈：桌機有 Source Han 直接用；否則用 Google Fonts 的 Noto TC（同字形母版） */
 --font-serif: "Source Han Serif TC", "Noto Serif TC", "Noto Serif", serif;
 --font-sans: "Aleo", "Noto Sans TC", system-ui, -apple-system, sans-serif;




  /* ===== 字級 (Type Scale) ===== */
  --text-xs: 12px;      /* 小註解 */
  --text-sm: 14px;      /* 小文字 */
  --text-md: 16px;      /* 正文（預設） */
  --text-lg: 18px;      /* 中標題 */
  --text-xl: 20px;      /* 大標題 */
  --text-2xl: 24px;     /* 更大標題 */
  --text-3xl: 32px;     /* 超大標題 */
  --text-4xl: 40px;     /* 最大標題 */



  /* ===== 行高 ===== */
  --lh-tight: 1.2;      /* 標題行高 */
  --lh-normal: 1.5;     /* 正常行高（正文） */
  --lh-loose: 1.8;      /* 寬鬆行高（長文本） */



  /* ===== 字重 ===== */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;



  /* ===== 間距 (Spacing Scale 8px 系統) ===== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;



  /* ===== 圓角 (Border Radius) ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;



  /* ===== 陰影 (Box Shadow) ===== */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16);



  /* ===== 邊線 ===== */
  --border: 1px solid var(--color-border);



  /* ===== 過渡 (Transition) ===== */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.3s ease-out;
  --transition-slow: 0.5s ease-out;

  

  /* ===== 斷點 (Breakpoints) ===== */
  /* 手機：0–767px（預設） */
  /* 平板：768px–1199px */
  /* 桌機：1200px+ */
}