/**
 * Design Tokens - CSS Custom Properties
 * 所有顏色、字體大小、間距的定義
 * 前端頁面不得在此檔案外使用硬編碼hex顏色
 */

:root {
  /* === 顏色系統 === */
  
  /* 背景色 */
  --color-bg-primary: #0f1419;
  --color-bg-gradient-start: #0b1020;
  --color-bg-gradient-mid: #121a28;
  --color-bg-gradient-end: #0f1419;
  --color-bg-card: #1a2332;
  --color-bg-stat: #121a27;
  --color-bg-input: #0d1320;
  --color-bg-hover: #1f2a3d;
  --color-bg-check-active: #152238;
  
  /* 文字色 */
  --color-text-primary: #e7ecf3;
  --color-text-muted: #8b9bb4;
  --color-text-white: #ffffff;
  
  /* 邊框色 */
  --color-border-default: #2a3548;
  
  /* 主題色 */
  --color-accent-primary: #3d8bfd;
  --color-accent-hover: #5b8def;
  
  /* 狀態色 */
  --color-status-green: #3dd68c;
  --color-status-yellow: #f5c542;
  --color-status-red: #ff6b6b;
  
  /* 資產分類色（台股/美股/現金） */
  --color-asset-tw: #5b8def;
  --color-asset-us: #e8a87c;
  --color-asset-cash: #7ddea2;
  
  /* Badge背景色 */
  --color-badge-green-bg: #163528;
  --color-badge-yellow-bg: #3a3218;
  --color-badge-red-bg: #3a1a1a;
  --color-badge-gray-bg: #222222;
  --color-badge-gray-text: #aaaaaa;
  
  /* 決策狀態標籤色 */
  --color-status-propose-bg: #243044;
  --color-status-propose-text: #7ab8ff;
  --color-status-review-bg: #3a3218;
  --color-status-review-text: #f5c542;
  --color-status-pending-bg: #3a2818;
  --color-status-pending-text: #e8a87c;
  --color-status-filled-bg: #163528;
  --color-status-filled-text: #3dd68c;
  --color-status-unknown-bg: #222222;
  --color-status-unknown-text: #aaaaaa;
  
  /* 按鈕色 */
  --color-button-secondary-bg: #243044;
  --color-button-logout-bg: #3a1a1a;
  --color-button-logout-text: #ff6b6b;
  
  /* 其他 */
  --color-pill-bg: #243044;
  --color-toast-bg: #1e3a5f;
  
  /* === 字體系統 === */
  --font-family-base: ui-sans-serif, system-ui, "PingFang TC", "Noto Sans TC", sans-serif;
  
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.8rem;       /* 12.8px */
  --font-size-base: 0.88rem;    /* 14.08px */
  --font-size-md: 0.9rem;       /* 14.4px */
  --font-size-lg: 1.05rem;      /* 16.8px */
  --font-size-xl: 1.15rem;      /* 18.4px */
  --font-size-2xl: 1.35rem;     /* 21.6px */
  --font-size-3xl: 1.5rem;      /* 24px */
  --font-size-stat: 1.15rem;    /* 18.4px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 550;
  --font-weight-semibold: 600;
  --font-weight-bold: 650;
  --font-weight-extra: 700;
  
  --line-height-base: 1.45;
  --line-height-tight: 1.3;
  
  /* === 間距系統 === */
  --spacing-xs: 0.2rem;         /* 3.2px */
  --spacing-sm: 0.35rem;        /* 5.6px */
  --spacing-md: 0.5rem;         /* 8px */
  --spacing-base: 0.75rem;      /* 12px */
  --spacing-lg: 1rem;           /* 16px */
  --spacing-xl: 1.25rem;        /* 20px */
  --spacing-2xl: 1.5rem;        /* 24px */
  --spacing-3xl: 2rem;          /* 32px */
  --spacing-4xl: 2.5rem;        /* 40px */
  --spacing-5xl: 3rem;          /* 48px */
  
  /* === 圓角系統 === */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-full: 999px;
  
  /* === 佈局斷點 === */
  --breakpoint-mobile: 375px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1280px;
  
  /* === 其他尺寸 === */
  --header-height: 50px;
  --max-content-width: 1200px;
  --bar-height: 14px;
  --chart-size: 180px;
}