:root {
  /* ==================== 品牌主色 (Primary) ==================== */
  --brand-primary: #318a8b;
  --brand-primary-hover: #1f5859;
  --brand-primary-50: #eff6f6;
  --brand-primary-100: #c9e1e1;
  --brand-primary-200: #a4cccc;
  --brand-primary-300: #7fb6b7;
  --brand-primary-400: #569fa0;
  --brand-primary-500: #318a8b;
  --brand-primary-600: #287172;
  --brand-primary-700: #1f5859;
  --brand-primary-800: #163e3f;
  --brand-primary-900: #102c2c;
  --brand-primary-950: #0b1e1f;

  /* ==================== 間距基準 (Spacing) ==================== */
  /*
   * 以 --space-base 為單一基準，其餘為常用倍數階梯。
   * 改 --space-base 即可讓所有沿用此變數的間距等比例縮放。
   * 不常用的倍數可臨場以 calc(var(--space-base) * n) 表達。
   */
  --space-base: 40px; /* 基準 1x = 40px */
  --space-half: calc(var(--space-base) / 2); /* 0.5x = 20px */
  --space-2x: calc(var(--space-base) * 2); /* 2x   = 80px */
  --space-3x: calc(var(--space-base) * 3); /* 3x   = 120px */
  --space-4x: calc(var(--space-base) * 4); /* 4x   = 160px */
}