:root {
  /* 間距系統 (Spacing) */
/* 極小間距 (Micro) - 手機與電腦一致，保持排版緊湊 */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  
  /* 標準間距 (Base) - 輕微縮放 */
  --space-4: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);    /* 14px -> 16px */
  --space-5: clamp(1.25rem, 1vw + 1rem, 1.5rem);        /* 20px -> 24px */
  --space-6: clamp(1.5rem, 2vw + 1rem, 2rem);           /* 24px -> 32px */
  
  /* 中大型間距 (Layout) - 大幅縮放，避免手機出現巨大空白 */
  --space-7: clamp(2rem, 4vw + 1rem, 3rem);             /* 32px -> 48px */
  --space-8: clamp(2.5rem, 6vw + 1rem, 4rem);           /* 40px -> 64px */
  --space-9: clamp(3rem, 10vw + 1rem, 6rem);            /* 48px -> 96px */
  --space-10: clamp(4rem, 15vw + 1rem, 8rem);           /* 64px -> 128px */

  /* 色彩系統 (Colors) */
  
  /* --- 具體顏色變數 --- */
  /* Primary */
  --primary: var(--primary-color);
  --primary-light: oklch(from var(--primary-color) calc(l + 0.2) c h);
  --primary-dark: oklch(from var(--primary-color) calc(l - 0.2) c h);
  /* --primary-hover: hsl(var(--p-h), var(--p-s), calc(var(--p-l) - 5%));
  --primary-light: hsl(var(--p-h), var(--p-s), calc(var(--p-l) + 10%));
  --primary-dark: hsl(var(--p-h), var(--p-s), calc(var(--p-l) - 10%)); */


  /* Secondary */
  --secondary: var(--secondary-color);
  --secondary-light: oklch(from var(--secondary-color) calc(l + 0.2) c h);
  --secondary-dark: oklch(from var(--secondary-color) calc(l - 0.2) c h);
  /* --secondary-hover: hsl(var(--s-h), var(--s-s), calc(var(--s-l) - 5%));
  --secondary-light: hsl(var(--s-h), var(--s-s), calc(var(--s-l) + 10%));
  --secondary-dark: hsl(var(--s-h), var(--s-s), calc(var(--s-l) - 10%)); */

  /* Success */
  --success: hsl(137, 57%, 41%);
  --success-hover: hsl(137, 57%, 36%);

  /* Danger */
  --danger: hsl(0, 84%, 60%);
  --danger-hover: hsl(0, 84%, 55%);

  /*Warning*/
  --warning: hsl(38, 92%, 50%);
  --warning-hover: hsl(38, 92%, 45%);

  /* Neutral (中性色 - 通常飽和度調低，營造灰色調) */
  --neutral-100: hsl(0, 0%, 96%); /* 背景 */
  --neutral-200: hsl(0, 0%, 79%); /* 邊框 */
  --neutral-300: hsl(0, 0%, 60%); /* 次要背景 */
  --neutral-400: hsl(180, 0%, 50%); /* 次要文字 */
  --neutral-500: hsl(210, 5%, 40%); /* 輔助文字 */
  --neutral-900: hsl(0, 0%, 15%); /* 標題文字 */

  /* Status */
  --success: hsl(142, 70%, 45%);
  --danger: hsl(0, 84%, 60%);

  /* 顯示設定 */
  --transition-fast: 0.2s ease;
}

/* Margin and Padding Utilities */
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.m-0 { margin: 0 !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.p-0 { padding: 0 !important; }

/* Display Utilities */
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

/* Flexbox Alignment Utilities */
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }

/* Gap Utilities */
.gap-0 { gap: 0 !important; }
.gap-1 { gap: var(--space-2) !important; }
.gap-2 { gap: var(--space-4) !important; }
.gap-3 { gap: var(--space-5) !important; }
.gap-4 { gap: var(--space-6) !important; }
.gap-5 { gap: var(--space-7) !important; }
.gap-6 { gap: var(--space-8) !important; }

/* Text Utilities */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Grid Utilities */
/* 基礎設定 */
.d-grid {
  display: grid !important;
  width:100%;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-cols-1 { grid-template-columns: minmax(0, 1fr); }

/* 大尺寸螢幕 (lg: 1024px) */
@media (min-width: 992px) {
  /* 2欄配置 */
  .grid-lg-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-lg-cols-50-50 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grid-lg-cols-66-33 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .grid-lg-cols-33-66 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .grid-lg-cols-25-75 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .grid-lg-cols-75-25 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  /* 3欄配置 */
  .grid-lg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 4欄配置 */
  .grid-lg-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}



/* Visibility Utilities */
/* 預設隱藏 */
.d-mobile, .d-tablet, .d-desktop {
  display: none !important;
}
@media (max-width: 767px) {
  .d-mobile { display: revert !important; }
  .d-mobile.d-flex { display: flex !important; }
}
/* display on tablet only */
@media (min-width: 768px) and (max-width: 991px) {
  .d-tablet { display: revert !important; }
  .d-tablet.d-flex { display: flex !important; }
}

/* display on desktop only */
@media (min-width: 992px) {
  .d-desktop { display: revert !important; }
  .d-desktop.d-flex { display: flex !important; }
}

/* Spacer */
.h-4{height: var(--space-1);}
.h-8{height: var(--space-2);}
.h-12{height: var(--space-3);}
.h-16{height: var(--space-4);}
.h-24{height: var(--space-5);}
.h-32{height: var(--space-6);}
.h-48{height: var(--space-7);}
.h-64{height: var(--space-8);}
.h-96{height: var(--space-9);}
.h-128{height: var(--space-10);}


/* Text Size */
.text-xs { font-size: 0.75rem; } /* 12px */
.text-sm { font-size: 0.875rem; } /* 14px */
.text-base { font-size: 1rem; } /* 16px */
.text-lg { font-size: 1.125rem; } /* 18px */
.text-xl { font-size: 1.25rem; } /* 20px */
.text-2xl { font-size: 1.5rem; } /* 24px */
.text-3xl { font-size: 1.875rem; } /* 30px */
.text-4xl { font-size: 2.25rem; } /* 36px */