*, *::before, *::after{box-sizing:border-box;}

:root {

  /* ---------- 顏色：品牌 ---------- */
  --color-primary:#0066cc;          /* 主色 */
  --color-primary-hover:#0052a3;    /* 主色：滑過 */
  --color-primary-active:#003d7a;   /* 主色：按下 */
  --color-primary-text:#ffffff;     /* 主色背景上的文字 */
  --color-secondary:#666666;        /* 輔色 */

  /* ---------- 顏色：文字 ---------- */
  --color-text-1:#ffffff;
  --color-text-2:#999999;
  --color-text-3:#333333;
  --color-text-4:#000000;
  --color-text:#1a1a1a;             /* 一般文字 */
  --color-text-light:#666666;       /* 次要文字 */
  --color-text-disabled:#aaaaaa;    /* 停用文字 */
  --color-link:#0066cc;             /* 連結 */
  --color-link-hover:#0052a3;       /* 連結：滑過 */

  /* ---------- 顏色：背景與邊框 ---------- */
  --color-bg:#ffffff;               /* 頁面背景 */
  --color-bg-1:#eeeeee;         	/* 數字越小越淺 */
  --color-bg-2:#eaeaea;         	/* 數字越小越淺 */
  --color-bg-3:#cccccc;         	/* 數字越小越淺 */
  --color-bg-4:#f5f5f5;         	/* 數字越小越淺 */
  --color-bg-5:#f5f5f5;         	/* 數字越小越淺 */
  --color-bg-disabled:#eeeeee;      /* 停用背景 */
  --color-border:#dddddd;           /* 邊框 */
  --color-border-dark:#bbbbbb;      /* 較深邊框 */

  /* ---------- 顏色：狀態 ---------- */
  --color-success:#2e8b57;          /* 成功 */
  --color-warning:#f5a623;          /* 警告 */
  --color-danger:#d93025;           /* 錯誤、危險 */
  --color-info:#1e88e5;             /* 提示 */

  /* ---------- 間距（1rem = 16px） ---------- */
  --space-1:0.25rem;   /* 4px  */
  --space-2:0.5rem;    /* 8px  */
  --space-3:0.75rem;   /* 12px */
  --space-4:1rem;      /* 16px */
  --space-5:1.5rem;    /* 24px */
  --space-6:2rem;      /* 32px */
  --space-7:3rem;      /* 48px */
  --space-8:4rem;      /* 64px */

  /* ---------- 圓角 ---------- */
  --radius-s:0.125rem;   /* 2px：badge、tag */
  --radius-m:0.25rem;    /* 4px：按鈕、輸入框 */
  --radius-l:0.5rem;     /* 8px：卡片、彈窗 */
  --radius-full:999px;   /* 圓形、膠囊 */

  /* ---------- 字體 ---------- */
  --font-family:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-s:0.75rem;    /* 12px */
  --font-m:0.875rem;   /* 14px */
  --font-l:1.125rem;   /* 18px */
  --font-xl:1.5rem;    /* 24px */
  --font-weight-normal:400;
  --font-weight-bold:700;
  --line-height:1.5;

  /* ---------- 邊框與陰影（用 px） ---------- */
  --border-width:1px;
  --shadow-s:0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-m:0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-l:0 4px 16px rgba(0, 0, 0, 0.2);

  /* ---------- 版面 ---------- */
  --container-max:1200px;   /* 內容最大寬度 */
  --sidebar-width:240px;    /* 側欄寬度 */
  --header-height:64px;     /* 頁首高度 */

  /* ---------- 層級 z-index ---------- */
  --z-dropdown:100;
  --z-sticky:200;
  --z-modal:300;
  --z-toast:400;
}