/**
 * 統一字體大小系統 - 新德揚專案
 * 目的：統一全站的 h1-h6 和 p 標籤字體大小
 * 參考：專案設計規範與日本參考網站
 * 優先級：需在所有 CSS 之後載入以確保優先級
 */

/* ============================================================================
   CSS 變數定義 - 字體大小系統
   ============================================================================ */
:root {
  /* 基礎字體大小 - 14px 為基準 */
  --base-font-size: 14px;

  /* 標題字體大小系統 - 桌面版 */
  --h1-size: 2.25rem;    /* 36px - 主標題 */
  --h2-size: 1.875rem;   /* 30px - 次級標題 */
  --h3-size: 1.5rem;     /* 24px - 三級標題 */
  --h4-size: 1.25rem;    /* 20px - 四級標題 */
  --h5-size: 1.125rem;   /* 18px - 五級標題 */
  --h6-size: 1rem;       /* 16px - 六級標題 */

  /* 內文字體大小 - 統一為 14px */
  --p-size: 0.875rem;    /* 14px - 段落文字（桌面和手機統一） */
  --small-size: 0.75rem; /* 12px - 小字 */
  --tiny-size: 0.625rem; /* 10px - 極小字 */

  /* 統一行距 */
  --line-height-tight: 1.3;   /* 緊密行距（標題用） */
  --line-height-normal: 1.5;  /* 標準行距（內文用） */
  --line-height-relaxed: 1.7; /* 寬鬆行距（閱讀用） */

  /* 字重系統 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* ============================================================================
   標題系統 (h1-h6) - 桌面版
   ============================================================================ */

h1 {
  font-size: var(--h1-size) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  margin-bottom: 1.5rem;
  color: #000000;
}

h2 {
  font-size: var(--h2-size) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-bold) !important;
  margin-bottom: 1.25rem;
  color: #000000;
}

h3 {
  font-size: var(--h3-size) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-semibold) !important;
  margin-bottom: 1rem;
  color: #000000;
}

h4 {
  font-size: var(--h4-size) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-semibold) !important;
  margin-bottom: 0.875rem;
  color: #000000;
}

h5 {
  font-size: var(--h5-size) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-semibold) !important;
  margin-bottom: 0.75rem;
  color: #000000;
}

h6 {
  font-size: var(--h6-size) !important;
  line-height: var(--line-height-normal) !important;
  font-weight: var(--font-weight-medium) !important;
  margin-bottom: 0.5rem;
  color: #000000;
}

/* ============================================================================
   段落與文字系統
   ============================================================================ */

/* 段落文字 - 桌面版 16px */
p {
  font-size: var(--p-size) !important;
  line-height: var(--line-height-normal) !important;
  margin-bottom: 1rem;
  color: #000000;
}

/* 列表項目 */
li {
  font-size: var(--p-size) !important;
  line-height: var(--line-height-normal) !important;
  color: #000000;
}

ul, ol {
  font-size: var(--p-size) !important;
  line-height: var(--line-height-normal) !important;
  margin-bottom: 1rem;
}

/* 小字文字 */
small, .small-text {
  font-size: var(--small-size) !important;
  line-height: var(--line-height-normal) !important;
}

/* 極小字 */
.tiny-text {
  font-size: var(--tiny-size) !important;
  line-height: var(--line-height-normal) !important;
}

/* ============================================================================
   特定區域文字覆蓋
   ============================================================================ */

/* 詳細頁面內文 - 確保統一 */
.article-content p,
.article-content li,
.tab-content p,
.tab-content li,
.portfolio-description-section p,
.portfolio-description-section li,
.brand-description-text p,
.brand-description-text li,
.brand-story-text p,
.brand-story-text li,
.product-chars-content p,
.product-chars-content li,
.product-specs-content p,
.product-specs-content li,
.news-content p,
.news-content li {
  font-size: var(--p-size) !important;
  line-height: var(--line-height-normal) !important;
}

/* Div 元素統一字體大小 - 比照 p 標籤 */
div {
  font-size: var(--p-size) !important;
  line-height: var(--line-height-normal) !important;
}

/* 內容區域的 div 元素 */
.item-description,
.brand-info,
.brand-description,
.product-info,
.product-description,
.portfolio-info,
.portfolio-description,
.content,
.main-content,
.page-content,
.article-content,
.news-content,
.faq-answer {
  font-size: var(--p-size) !important;
  line-height: var(--line-height-normal) !important;
}

/* 卡片標題統一 */
.card__title,
.product-card__title,
.news-article__title,
.service-card__title,
.item-title,
.faq-question {
  font-size: var(--h4-size) !important;
  line-height: var(--line-height-tight) !important;
  font-weight: var(--font-weight-semibold) !important;
}

/* 卡片描述統一 */
.card__text,
.product-card__description,
.news-article__excerpt,
.service-card__description {
  font-size: var(--small-size) !important;
  line-height: var(--line-height-normal) !important;
}

/* ============================================================================
   響應式設計 - 平板 (768px - 991px)
   ============================================================================ */
@media (max-width: 991px) and (min-width: 768px) {
  :root {
    --h1-size: 2rem;      /* 32px */
    --h2-size: 1.75rem;   /* 28px */
    --h3-size: 1.375rem;  /* 22px */
    --h4-size: 1.125rem;  /* 18px */
    --h5-size: 1rem;      /* 16px */
    --h6-size: 0.875rem;  /* 14px */
  }
}

/* ============================================================================
   響應式設計 - 手機 (最大 767px)
   ============================================================================ */
@media (max-width: 767px) {
  :root {
    /* 手機版標題縮小 */
    --h1-size: 1.875rem;  /* 30px */
    --h2-size: 1.5rem;    /* 24px */
    --h3-size: 1.25rem;   /* 20px */
    --h4-size: 1.125rem;  /* 18px */
    --h5-size: 1rem;      /* 16px */
    --h6-size: 0.875rem;  /* 14px */

    /* 手機版內文保持 14px - 與桌面版一致 */
    --p-size: 0.875rem;   /* 14px */
    --small-size: 0.75rem; /* 12px */
    --tiny-size: 0.625rem; /* 10px */
  }

  /* 手機版段落與列表 - 保持 14px */
  p, li, ul, ol, div {
    font-size: var(--p-size) !important;
    line-height: var(--line-height-normal) !important;
  }

  /* 手機版詳細頁面內文 - 保持 14px */
  .article-content p,
  .article-content li,
  .tab-content p,
  .tab-content li,
  .portfolio-description-section p,
  .portfolio-description-section li,
  .brand-description-text p,
  .brand-description-text li,
  .brand-story-text p,
  .brand-story-text li,
  .product-chars-content p,
  .product-chars-content li,
  .product-specs-content p,
  .product-specs-content li {
    font-size: var(--p-size) !important;
  }
}

/* ============================================================================
   響應式設計 - 小手機 (最大 480px)
   ============================================================================ */
@media (max-width: 480px) {
  :root {
    /* 小手機版標題進一步縮小 */
    --h1-size: 1.5rem;    /* 24px */
    --h2-size: 1.25rem;   /* 20px */
    --h3-size: 1.125rem;  /* 18px */
    --h4-size: 1rem;      /* 16px */
    --h5-size: 0.875rem;  /* 14px */
    --h6-size: 0.75rem;   /* 12px */
  }
}

/* ============================================================================
   特殊元件覆蓋 - 保持原有設計
   ============================================================================ */

/* Banner 標題保持大字 */
.banner__title,
.hero-section__title {
  font-size: 2.5rem !important;
  line-height: 1.2 !important;
}

@media (max-width: 768px) {
  .banner__title,
  .hero-section__title {
    font-size: 2rem !important;
  }
}

@media (max-width: 480px) {
  .banner__title,
  .hero-section__title {
    font-size: 1.8rem !important;
  }
}

/* Banner 副標題 */
.banner__subtitle,
.hero-section__subtitle {
  font-size: 1.2rem !important;
  line-height: var(--line-height-normal) !important;
}

@media (max-width: 768px) {
  .banner__subtitle,
  .hero-section__subtitle {
    font-size: 1rem !important;
  }
}

@media (max-width: 480px) {
  .banner__subtitle,
  .hero-section__subtitle {
    font-size: 0.95rem !important;
  }
}

/* ============================================================================
   輔助類別
   ============================================================================ */

/* 字體大小輔助類 */
.text-xs { font-size: var(--tiny-size) !important; }
.text-sm { font-size: var(--small-size) !important; }
.text-base { font-size: var(--p-size) !important; }
.text-lg { font-size: var(--h5-size) !important; }
.text-xl { font-size: var(--h4-size) !important; }
.text-2xl { font-size: var(--h3-size) !important; }
.text-3xl { font-size: var(--h2-size) !important; }
.text-4xl { font-size: var(--h1-size) !important; }

/* 行距輔助類 */
.leading-tight { line-height: var(--line-height-tight) !important; }
.leading-normal { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }

/* 字重輔助類 */
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }