/* 模板 Tokens：從 Figma 1:3132 萃取的設計變數 */

:root{
  /* 顏色（來自 localhost/Cod Gray、Mine Shaft、White 10%/70% 等） */
  --tpl-color-cod-gray:#141414;
  --tpl-color-mine-shaft:#222222;
  --tpl-color-white:#ffffff;
  --tpl-color-white-10:rgba(255,255,255,0.1);
  --tpl-color-white-70:rgba(255,255,255,0.7);
  --tpl-color-border:#eee;
  --tpl-color-text-secondary:#666;
  --tpl-color-text-tertiary:#999;

  /* 尺寸（常見寬度與高度） */
  --tpl-page-width:1920px;
  --tpl-container-1440:1440px;
  --tpl-container-1420:1420px;
  --tpl-container-1200:1200px;
  --tpl-header-height:64px;

  /* 邊角與陰影 */
  --tpl-radius-8:8px;
  --tpl-radius-17:17px;
  --tpl-shadow-weak:0 2px 6px rgba(0,0,0,0.1);
  --tpl-shadow-medium:0 4px 20px rgba(0,0,0,.08);

  /* 間距（Spacing） */
  --tpl-section-padding-y:20px;
  --tpl-section-gap:20px;
  --tpl-card-gap:20px;
  --tpl-header-margin-bottom:10px;
  --tpl-spacing-sm:10px;
  --tpl-spacing-md:14px;
  --tpl-spacing-lg:16px;

  /* 卡片樣式 */
  --tpl-card-radius:8px;

  /* 動畫與過渡 */
  --tpl-transition-default:0.3s ease;
  --tpl-transition-fast:200ms;
  --tpl-transition-medium:400ms;
  --tpl-easing-default:cubic-bezier(.2,.8,.2,1);

  /* 字型 */
  --tpl-font-size-base:14px;
  --tpl-line-height-base:1.6;
  --tpl-font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif;

  /* 響應式斷點（未來擴充） */
  --tpl-breakpoint-mobile:768px;
  --tpl-breakpoint-tablet:1024px;
  --tpl-breakpoint-desktop:1440px;
}

/* ==================== 響應式變數 ==================== */

/* 1430px 斷點：容器縮小到 1210px */
@media (max-width: 1430px) {
  :root {
    --tpl-container-1420: 1210px;
  }
}

/* 1209px 斷點：容器縮小到 990px */
@media (max-width: 1209px) {
  :root {
    --tpl-container-1420: 990px;
  }
}

/* ==================== 基礎重置 ==================== */

html,body{
  margin:0;
  padding:0;
  min-width:1024px;
  background:var(--tpl-color-cod-gray);
  color:var(--tpl-color-white);
  font:var(--tpl-font-size-base)/var(--tpl-line-height-base) var(--tpl-font-family);
}

/* ==================== 無障礙支援 ==================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --tpl-color-border: #000;
    --tpl-color-text-secondary: #000;
    --tpl-color-text-tertiary: #333;
  }
}