/* ==========================================================================
     typography.css
     共用文字級距（Fluid Typography）與基礎版型樣式
     ---------------------------------------------------------------------
     縮放區間說明：
     - 390px  → 1440px：主要縮放區間（手機 → 桌機）
     - 1440px → 1920px：桌機加強區間（讓大螢幕字級再放大一階，避免 1440px
                          以上畫面文字顯得過小）
     - < 390px 直接吃最小值；> 1920px 直接吃最大值（不再放大）

     斷點參考清單（僅供切版時對照，非全部都需要寫 media query）：
     2560 / 1920 / 1440 / 1366 / 1024 / 768 / 480 / 414 / 390
  ============================================================================ */

:root {
  /* ---- 字體家族 ----
       設計稿標示「思源黑體」，對應網頁字體為 Noto Sans TC（Google 版本）*/
  --font-base:
    'Noto Sans TC', 'Source Han Sans TC', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- 共用文字與介面色彩 ---- */
  --color-text: #333333;
  /* 內文主要文字色 */
  --color-gray-dark: #545454;
  /* 深灰，次要標題或說明文字 */
  --color-white: #ffffff;
  /* 白色文字與介面背景 */

  /* ---- DAMAGE HERO 品牌延伸色 ---- */
  --color-brand: #c5a86a;
  --color-brand-muted: #92877b;
  --color-brand-text: #3e3831;
  --color-brand-page: #f7f4ef;
  --color-brand-surface: #fffefc;
  --color-brand-line: rgba(178, 162, 129, 0.3);
  --color-brand-overlay: rgba(92, 89, 84, 0.5);

  /* ---- 品牌元件與透明色階 ---- */
  --color-brand-header-line: rgba(178, 162, 129, 0.18);
  --color-brand-header-surface: rgba(255, 254, 252, 0.96);
  --color-brand-shadow: rgba(62, 56, 49, 0.09);
  --color-brand-line-strong: rgba(178, 162, 129, 0.72);
  --color-brand-page-translucent: rgba(247, 244, 239, 0.82);
  --color-brand-transparent-white: rgba(255, 255, 255, 0);
  --color-brand-glow-white: rgba(255, 255, 255, 1);
  --color-brand-glow-white-soft: rgba(255, 255, 255, 0.95);
  --color-brand-glow-gold: rgba(197, 168, 106, 0.65);
  --color-brand-hero-highlight: rgba(255, 255, 255, 0.94);
  --color-brand-hero-page: rgba(247, 244, 239, 0.72);
  --color-brand-hero-accent: rgba(197, 168, 106, 0.12);
  --color-brand-breadcrumb: #8e8e8e;
  --color-brand-footer: #f4efe7;
  --color-brand-divider: rgba(197, 168, 106, 0.5);
  --color-brand-menu: rgba(199, 189, 168, 0.75);

  /* ---- 商品頁介面色彩 ---- */
  --color-product-visual: #f3eee5;
  --color-product-related: #f5f0e8;

  --font-en: 'Cormorant Garamond', serif;
  --font-serif: 'Noto Serif TC', serif;

  /* ---- 文字級距（390 → 1440） ---- */
  --fs-h1: clamp(2rem, 1.443rem + 2.29vw, 3.5rem);
  /* 32 → 56px */
  --fs-h2: clamp(1.625rem, 1.207rem + 1.71vw, 2.75rem);
  /* 26 → 44px */
  --fs-h3: clamp(1.375rem, 1.05rem + 1.33vw, 2.25rem);
  /* 22 → 36px */
  --fs-h4: clamp(1.25rem, 1.018rem + 0.95vw, 1.875rem);
  /* 20 → 30px */
  --fs-h5: clamp(1.125rem, 0.986rem + 0.57vw, 1.5rem);
  /* 18 → 24px */
  --fs-h6: clamp(1rem, 0.907rem + 0.38vw, 1.25rem);
  /* 16 → 20px */

  /* ---- 客製化 --- */
  --fs-text-lg: clamp(1rem, 0.814rem + 0.76vw, 1.5rem);
  /* 16 → 24px，供 .text-lg */
  --fs-text-md: clamp(0.9375rem, 0.821rem + 0.48vw, 1.25rem);
  /* 15 → 20px，供 .text-md */
  --fs-body: clamp(0.9375rem, 0.914rem + 0.1vw, 1rem);
  /* 15 → 16px */
  --fs-text-sm: clamp(0.84375rem, 0.786rem + 0.24vw, 1rem);
  /* 13.5 → 16px，供 .text-sm */
  --fs-xs: clamp(0.75rem, 0.68rem + 0.29vw, 0.9375rem);
  /* 12 → 15px，供 .text-xs */
  --fs-2xs: clamp(0.6875rem, 0.641rem + 0.19vw, 0.8125rem);
  /* 11 → 13px，供 .text-2xs */

  /* ---- DAMAGE HERO 補充級距 ---- */
  --fs-display: clamp(3.25rem, 0.975rem + 9.33vw, 9.375rem);
  /* 52 → 150px，首頁品牌大標 */
  --fs-section-title: clamp(1.625rem, 1.486rem + 0.57vw, 2rem);
  /* 26 → 32px，頁面段落英文標題 */
  --fs-brand-name: clamp(1.375rem, 1.236rem + 0.57vw, 1.75rem);
  /* 22 → 28px，footer 中文品牌名 */

  --fs-product-title: clamp(1.5rem, 1.175rem + 1.33vw, 2.375rem);
  /* 24 → 38px，商品英文名稱 */
  --fs-feature-title: clamp(1.125rem, 0.893rem + 0.95vw, 1.75rem);
  /* 18 → 28px，商品特色標題 */

  /* ---- UI 元件固定字級（非頁面內文，不做 fluid 縮放） ----
       導覽列、footer 連結這類介面文字通常維持固定尺寸即可，
       縮放與否交由外層元件（header/footer）自身的 responsive 斷點處理 */

  --fs-nav: clamp(0.8125rem, 0.766rem + 0.19vw, 0.9375rem);
  /* 13 → 15px，header 導覽連結 */

  --fs-caption: clamp(0.6875rem, 0.618rem + 0.29vw, 0.875rem);
  /* 11 → 14px，footer 連結／備註等小字 */

  /* ---- 行高（可依內文/標題分開套用） ---- */
  --lh-heading: 1.4;
  --lh-body: 1.7;

  /* ---- 版型容器 ---- */
  --container-width: 1200px;
  /* 一般內容區塊（文字、卡片列表等） */
  --container-wide: 1440px;
  /* 較寬的版塊（例如商品格線較多欄時） */
  --container-custom-width: 1080px;
  /* 客製化版型（因應內容較少時，縮短寬度） */

  --container-sp-padding: clamp(0.625rem, 5vw, 1.25rem);
  /* 10px → 20px 手機版左右間距 */
  --container-padding: clamp(1.25rem, 4vw, 3.75rem);
  /* 20px → 60px 兩側安全間距 */
  --container-gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* 20px ～ 40px：1280px 以下共用的左右安全留白 */
  --container-custom-padding: clamp(1.25rem, 2.5vw, 6.25rem);
  /* 20px → 100px 客製化間距 */

  /* ---- 抽屜選單版型 ---- */
  --global-nav-width: min(50vw, 25.875rem);
  /* 平板／手機最多占畫面一半，桌機上限 414px */

  /* ---- 區塊間距（同樣用 fluid，讓段落留白也能隨螢幕縮放） ---- */
  --space-2xs: clamp(0.25rem, 0.5vw, 0.5rem);
  /* 4   → 8px */
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  /* 8   → 12px */
  --space-sm: clamp(1rem, 2vw, 1.5rem);
  /* 16  → 24px */
  --space-md: clamp(1.5rem, 3vw, 2.5rem);
  /* 24  → 40px */
  --space-lg: clamp(2.5rem, 5vw, 4rem);
  /* 40  → 64px */
  --space-xl: clamp(3.5rem, 7vw, 6rem);
  /* 56  → 96px */
  --space-2xl: clamp(5rem, 10vw, 8.75rem);
  /* 80  → 140px（如頁與頁之間的大區塊間距）*/
  --space-3xl: clamp(6.875rem, 5.714rem + 4.76vw, 10rem);
  /* 110 → 160px（固定 header 後方與大型頁尾留白）*/
  --space-4xl: clamp(9.375rem, 7.861rem + 6.19vw, 13.4375rem);
  /* 150 → 215px（抽屜選單上方留白）*/
}

/* ---- 1920px 以上：桌機字級加強區間 ----
     1440px 已達到的字級視為此區間的「起點」，
     放大到 1920px 後即固定，不再隨螢幕變大而放大 */
@media (min-width: 1440px) {
  :root {
    --fs-h1: clamp(3.5rem, 2rem + 1.67vw, 4rem);
    /* 56 → 64px */
    --fs-h2: clamp(2.75rem, 1.625rem + 1.25vw, 3.125rem);
    /* 44 → 50px */
    --fs-h3: clamp(2.25rem, 1.5rem + 0.83vw, 2.5rem);
    /* 36 → 40px */
    --fs-h4: clamp(1.875rem, 1.125rem + 0.83vw, 2.125rem);
    /* 30 → 34px */
    --fs-h5: clamp(1.5rem, 0.9375rem + 0.625vw, 1.6875rem);
    /* 24 → 27px */
    --fs-h6: clamp(1.25rem, 0.875rem + 0.42vw, 1.375rem);
    /* 20 → 22px */
    /* --fs-body 維持不變：內文字級到桌機後不需要再放大，避免閱讀行寬過長時字級失衡 */
  }
}

/* ==========================================================================
     標題套用
  ============================================================================= */
body {
  font-family: var(--font-base);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: 0.09em;
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: 0.07em;
}
h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: 0.06em;
}
h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  letter-spacing: 0.05em;
}
h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-heading);
  letter-spacing: clamp(1px, 0.045em, 1.5px);
}
h6 {
  font-size: var(--fs-h6);
  line-height: var(--lh-heading);
  letter-spacing: 1px;
}

body,
p,
li,
td,
th {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: 0.09em;
}

.text-lg {
  font-size: var(--fs-text-lg); /* 16 → 24px */
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.09em;
}

.text-md {
  font-size: var(--fs-text-md); /* 15 → 20px */
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.09em;
}

.text-sm {
  font-size: var(--fs-text-sm); /* 13.5 → 16px */
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.095em;
}

.text-xs {
  font-size: var(--fs-xs); /* 12px → 15px */
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.1em;
}

.text-2xs {
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.1em; /* 11px → 12px */
}

.text-nav {
  font-size: var(--fs-nav);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.09em;
}

.text-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0.09em;
}

/* ==========================================================================
     版型共用元件
  ============================================================================ */

/* 內容容器：1280px 以上維持完整 1200px；較窄畫面才加入兩側安全間距
     用法：<div class="inner-wrap"> ... </div> */
.inner-wrap {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 0;
}

@media (max-width: 1279px) {
  .inner-wrap {
    max-width: none;
    padding-inline: var(--container-gutter);
  }
}

/* 較寬版本：商品格線、選物情報清單等內容較多欄時使用 */
.inner-wrap--wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* 全寬背景色區塊（例如紅色 header / footer），
     內層再包一層 .inner-wrap 讓文字內容維持置中寬度
     用法： <header class="full-bleed"><div class="inner-wrap">...</div></header> */
.full-bleed {
  width: 100%;
}

/* 區塊上下間距工具類，對齊 --space-* tokens
     用法：<section class="section-spacing"> ... </section> */
.section-spacing--2xs {
  padding-block: var(--space-2xs);
}

.section-spacing--xs {
  padding-block: var(--space-xs);
}

.section-spacing--sm {
  padding-block: var(--space-sm);
}

.section-spacing--md {
  padding-block: var(--space-md);
}

.section-spacing {
  padding-block: var(--space-xl);
}

.section-spacing--lg {
  padding-block: var(--space-2xl);
}

/* 左右間距工具類，對齊 --space-* tokens
     用法：<section class="section-spacing-inline"> ... </section> */
.section-spacing-inline--2xs {
  padding-inline: var(--space-2xs);
}

.section-spacing-inline--xs {
  padding-inline: var(--space-xs);
}

.section-spacing-inline--sm {
  padding-inline: var(--space-sm);
}

.section-spacing-inline--md {
  padding-inline: var(--space-md);
}

.section-spacing-inline {
  padding-inline: var(--space-xl);
}

.section-spacing-inline--lg {
  padding-inline: var(--space-2xl);
}