/* ============================================
   甫東科技 — Typography System
   統一字體規範：所有頁面共用
   ============================================

   字體策略：
   ─────────
   英文標題：Playfair Display（serif, 文藝精緻感）
   英文內文：Outfit（geometric sans, 現代乾淨）
   中文全局：Noto Sans TC（思源黑體，精緻易讀）

   層級規範：
   ─────────
   H1 — 頁面主標題（每頁僅一個）
   H2 — 區塊標題
   H3 — 子區塊標題
   H4 — 卡片/列表標題
   H5 — 輔助標題
   H6 — 最小標題/標籤
   p  — 內文
   ============================================ */

/* ---- CSS Variables ---- */
:root {
    /* Font Families */
    --font-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
    --font-sans: 'Outfit', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
    --font-zh: 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', sans-serif;

    /* Font Sizes — fluid clamp scale */
    --fs-h1: clamp(2.2rem, 5vw, 3.8rem);
    --fs-h2: clamp(1.6rem, 3.5vw, 2.8rem);
    --fs-h3: clamp(1.2rem, 2.5vw, 1.8rem);
    --fs-h4: clamp(1rem, 1.5vw, 1.2rem);
    --fs-h5: clamp(0.9rem, 1.2vw, 1.05rem);
    --fs-h6: clamp(0.8rem, 1vw, 0.9rem);
    --fs-body: clamp(0.92rem, 1.1vw, 1.05rem);
    --fs-small: clamp(0.78rem, 0.9vw, 0.88rem);
    --fs-label: clamp(0.65rem, 0.8vw, 0.75rem);

    /* Line Heights */
    --lh-heading: 1.2;
    --lh-subheading: 1.35;
    --lh-body: 1.75;

    /* Letter Spacing */
    --ls-heading: -0.3px;
    --ls-body: 0.2px;
    --ls-label: 2px;

    /* Font Weights */
    --fw-thin: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
    --fw-black: 900;
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */
body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--text-dark, #1c1917);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* ============================================
   HEADINGS — H1 to H6
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: var(--fw-black);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: inherit;
    margin: 0;
}

/* H1 — Page Hero Title */
h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-black);
    line-height: 1.1;
    letter-spacing: -0.5px;
}

/* H2 — Section Title */
h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-black);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
}

/* H3 — Subsection Title */
h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-subheading);
    letter-spacing: 0;
}

/* H4 — Card / Item Title */
h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-subheading);
    letter-spacing: 0.1px;
}

/* H5 — Small Title */
h5 {
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    line-height: var(--lh-subheading);
}

/* H6 — Label / Caption */
h6 {
    font-size: var(--fs-h6);
    font-weight: var(--fw-medium);
    line-height: var(--lh-subheading);
    letter-spacing: 0.5px;
}

/* ============================================
   SERIF TITLES — 精緻英文裝飾標題
   用於 Hero 副標、引言、區塊英文標籤
   ============================================ */
.serif-title,
.page-title-serif,
.wd-h1-serif,
.sd-h1-serif,
.seo-h1-serif,
.ad-h1-serif,
.ac-h1-serif,
.at-h1-serif,
.about-h1-serif {
    font-family: var(--font-serif);
    font-weight: var(--fw-regular);
    font-style: italic;
    letter-spacing: 0.5px;
}

/* ============================================
   BODY TEXT VARIANTS
   ============================================ */
p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
}

/* Lead paragraph — larger intro text */
.lead,
.svc-lead,
.eeat-lead,
.wd-hero-desc,
.sd-hero-desc,
.seo-hero-desc,
.ad-hero-desc,
.ac-hero-desc,
.at-hero-desc,
.about-hero-desc {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.85;
    font-weight: var(--fw-regular);
}

/* Small / Detail text */
.small,
.flow-time,
.mod-badge,
.card-tag,
.panel-tag,
.svc-tag,
.eeat-word,
.portfolio-category {
    font-size: var(--fs-small);
    letter-spacing: var(--ls-label);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}

/* ============================================
   LABEL / COUNTER STYLE
   英文標籤：全大寫、寬字距、小字
   ============================================ */
.label,
.page-label,
.wd-label,
.sd-label,
.seo-label,
.ad-label,
.ac-label,
.at-label,
.about-label,
.wd-en,
.svc-cta-label,
.philosophy-label {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: var(--fw-regular);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ============================================
   COUNTER NUMBERS — 區塊編號
   ============================================ */
.counter,
.wd-counter,
.sd-counter,
.seo-counter,
.ad-counter,
.ac-counter,
.at-counter,
.svc-counter,
.eeat-counter {
    font-size: var(--fs-label);
    font-weight: var(--fw-light);
    letter-spacing: 4px;
}

/* ============================================
   SERIF NUMBERS — 裝飾大數字
   用於面板編號、統計數字
   ============================================ */
.panel-number,
.flow-marker span,
.method-num,
.why-num,
.step-number {
    font-family: var(--font-serif);
    font-style: italic;
}

/* ============================================
   STAT / DATA NUMBERS — 統計數字
   ============================================ */
.stat-number,
.stat-big,
.result-num,
.eeat-num,
.highlight-number,
.auth-big,
.visual-stat-num {
    font-family: var(--font-sans);
    font-weight: var(--fw-black);
    letter-spacing: -1px;
    line-height: 1;
}

/* ============================================
   BLOCKQUOTE / QUOTE — 引言
   ============================================ */
blockquote,
.trust-quote p,
.philosophy-quote p,
.eeat-quote-inline blockquote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: var(--fw-regular);
    line-height: 1.7;
}

/* ============================================
   LOGO — 全站統一標準
   圖片來源：images/logo.png
   ============================================ */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.logo-img {
    height: 36px;
    width: auto;
    display: block;
}

/* ============================================
   LINKS — 內文超連結
   ============================================ */
a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s;
}

/* Content area links (inside paragraphs) */
p a,
.svc-lead a,
.eeat-lead a,
.eeat-detail a,
.trust-pillar a,
.ai-card a,
.method-item a {
    color: var(--accent, #d15b27);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

p a:hover,
.svc-lead a:hover,
.eeat-lead a:hover {
    color: var(--accent-light, #fb923c);
}

/* ============================================
   STRONG / EMPHASIS
   ============================================ */
strong {
    font-weight: var(--fw-bold);
}

em {
    font-style: italic;
    font-family: var(--font-serif);
}

/* ============================================
   BUTTON TEXT — 按鈕文字規範
   ============================================ */
.btn-contact,
.magnetic-btn,
.submit-btn,
.cta-btn-primary,
.cta-btn-secondary,
.mm-cta {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    letter-spacing: 0.5px;
}

/* ============================================
   FOOTER BRAND — FULLDOT 大字
   ============================================ */
.footer-logo,
.fl-char {
    font-family: var(--font-sans);
    font-weight: var(--fw-black);
}

/* ============================================
   MOBILE MENU TYPOGRAPHY
   ============================================ */
.mm-brand-en {
    font-family: var(--font-serif);
    font-weight: var(--fw-regular);
    font-style: italic;
}

.mm-brand-zh {
    font-family: var(--font-zh);
    font-weight: var(--fw-medium);
    letter-spacing: 3px;
}

.mm-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
}

.mm-label {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: var(--fw-regular);
}

/* ============================================
   NAVIGATION TYPOGRAPHY
   ============================================ */
.nav-link {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: var(--fw-medium);
    letter-spacing: 0.5px;
}

/* ============================================
   DARK SECTION TEXT — 深色背景文字調整
   ============================================ */
.svc-dark p,
.svc-accent p,
.eeat-dark p,
.eeat-ink p,
.eeat-warm p,
.wd-dark p,
.sd-dark p {
    color: rgba(255, 255, 255, 0.6);
}