/* 色彩變數 - 根據截圖分析結果 */
:root {
  /* 主色調 - 淺色系 */
  --color-bg-primary: #FAF9F5;
  --color-bg-secondary: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-hover: #F9F8F4;
  
  /* 分隔線與邊框 */
  --color-border-light: #E3E3E0;
  --color-border-medium: #D0D0CE;
  
  /* 文字顏色 */
  --color-text-primary: #2F312E;
  --color-text-secondary: #6B6B68;
  --color-text-tertiary: #ADABA8;
  
  /* 強調色 - 品牌藍 */
  --color-accent: #294F87;
  --color-accent-light: #3A6BB3;
  --color-accent-bg: #E8EFF8;
  
  /* 功能色 */
  --color-success: #4CAF50;
  --color-warning: #FFA726;
  --color-error: #EF5350;
  --color-info: #29B6F6;
  
  /* 標籤顏色 */
  --color-tag-景觀: #E3F2FD;
  --color-tag-景觀-text: #1976D2;
  --color-tag-美食: #FFF3E0;
  --color-tag-美食-text: #F57C00;
  --color-tag-博物館: #F3E5F5;
  --color-tag-博物館-text: #7B1FA2;
  --color-tag-交通: #E0F2F1;
  --color-tag-交通-text: #00796B;
  --color-tag-自由活動: #E8F5E9;
  --color-tag-自由活動-text: #2E7D32;
  --color-tag-異國餐廳: #FCE4EC;
  --color-tag-異國餐廳-text: #C2185B;
  
  /* 間距系統 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  
  /* 圓角 */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* 陰影 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  /* 字型 */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* 動畫 */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* iOS 安全區域適配 */
@supports (padding: env(safe-area-inset-top)) {
  :root {
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-left: env(safe-area-inset-left);
    --safe-area-right: env(safe-area-inset-right);
  }
}
