/* ========================================
   Design System - 全域變數設定
   此檔案定義整個專案的基礎樣式變數，包含顏色、尺寸等。
   ======================================== */

:root {
  /* ========================================
     色碼表 (Color Palette)
     ======================================== */
  
  /* 主要色彩 */
  --primary-blue: #5D99F9;        /* 烏來配色 - 主要藍色 - 按鈕、連結 */
  --primary-blue-dark: rgb(66, 78, 249);   /* 深藍色 - 懸停狀態 */
  --primary-blue-darker: rgb(36, 50, 249); /* 更深藍色 - 按鈕深色狀態 */
  
  /* 背景色彩 */
  --bg-primary: #10151C;          /*  烏來配色 - 主要背景 - 深灰黑 */
  --bg-secondary: #1f2937;        /*  烏來配色 - 次要背景 - 深灰 */ 
  --bg-tertiary: #374151;         /* 第三背景 - 中灰 */
  --bg-quaternary: #4b5563;       /* 第四背景 - 淺灰 */
  
  /* 文字色彩 */
  --text-primary: #ffffff;        /* 主要文字 - 白色 */
  --text-secondary: #d1d5db;      /* 次要文字 - 淺灰 */
  --text-muted: #6b7280;          /* 靜音文字 - 中灰 */
  
  /* 狀態色彩 */
  --status-success: #22C55E;      /* 烏來配色 - 成功狀態 - 綠色 */
  --status-error: #EF4343;        /* 烏來配色 - 錯誤狀態 - 紅色 */
  --status-warning: #FFBC42;      /* 烏來配色 - 警告狀態 - 黃色 */
  --status-info: #60a5fa;          /* 資訊狀態 - 淺藍 */
  --status-off: #6b7280;          /* 關閉狀態 - 灰色 */
  
  /* 邊框色彩 */
  --border-primary: #374151;      /* 主要邊框 */
  --border-secondary: #6b7280;    /* 次要邊框 */
  
  /* 特殊色彩 */
  --accent-orange: #f97316;       /* 強調橙色 */
  --accent-yellow: #facc15;       /* 強調黃色 */
  
  /* 透明度變數 */
  --opacity-66: 0.66;             /* 66% 透明度 */
  --opacity-50: 0.5;              /* 50% 透明度 */
  --opacity-25: 0.25;             /* 25% 透明度 */

  /* ========================================
     尺寸與佈局 (Layout & Dimensions)
     ======================================== */
     
  /* 滾動條寬度 */
  --scrollbar-width: 8px;

  /* ========================================
     文字排版 (Typography)
     ======================================== */
  
  /* 字體大小 */
  --font-xs: 12px;                /* 極小文字 - 標籤、輔助說明 */
  --font-sm: 14px;                /* 小文字 - 次要資訊 */
  --font-base: 16px;              /* 基礎文字 - 內文 */
  --font-lg: 18px;                /* 大文字 - 小標題 */
  --font-xl: 20px;                /* 特大文字 - 標題 */
  --font-2xl: 24px;               /* 超大文字 - 主標題 */
  --font-3xl: 30px;               /* 巨大文字 - 數據展示 */
}