/* ========================================
   JDL Overseas 现代化字体系统
   Modern Typography System
   ======================================== */

/* ========== 系统字体栈（最佳性能） ========== */

/* 主字体 - 无衬线字体（清晰、现代、专业） */
:root {
    /* 英文+中文混合字体栈 */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", 
                    "PingFang SC", "Microsoft YaHei", 
                    "Helvetica Neue", Arial, sans-serif;
    
    /* 数字专用字体（更清晰） */
    --font-numbers: "SF Pro Display", -apple-system, BlinkMacSystemFont, 
                    "Segoe UI", system-ui, sans-serif;
    
    /* 等宽字体（用于代码或产品编号） */
    --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", 
                 Consolas, "Courier New", monospace;
}

/* ========== 全局字体重置 ========== */

* {
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
    color: #212529;
    letter-spacing: 0.02em;
}

/* ========== 标题字体系统 ========== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-primary);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 0;
    color: #212529;
}

h1, .h1 {
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

h2, .h2 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h3, .h3 {
    font-size: 28px;
    font-weight: 600;
}

h4, .h4 {
    font-size: 22px;
    font-weight: 600;
}

h5, .h5 {
    font-size: 18px;
    font-weight: 600;
}

h6, .h6 {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========== 段落和正文 ========== */

p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 1em;
    color: #333333;
}

.lead {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 400;
    color: #495057;
}

.small {
    font-size: 14px;
    line-height: 1.5;
}

.text-lg {
    font-size: 18px;
    line-height: 1.6;
}

.text-xl {
    font-size: 20px;
    line-height: 1.6;
}

/* ========== 字重系统 ========== */

.fw-light {
    font-weight: 300 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

/* ========== 导航字体 ========== */

.nav-brand {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.nav-menu a {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ========== Hero区域字体 ========== */

.hero-title {
    font-family: var(--font-primary);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.hero-title-main {
    font-size: 64px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.hero-title-sub {
    font-size: 48px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* ========== 产品相关字体 ========== */

.product-name {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.product-description {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #6c757d;
}

.product-id {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.product-price {
    font-family: var(--font-numbers);
    font-size: 24px;
    font-weight: 700;
}

/* ========== 分类卡片字体 ========== */

.category-name {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.category-count {
    font-size: 16px;
    font-weight: 500;
}

/* ========== 特性卡片字体 ========== */

.feature-title {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.feature-description {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #6c757d;
}

/* ========== 区块标题 ========== */

.section-title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.section-subtitle {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #6c757d;
}

/* ========== 按钮字体 ========== */

.btn {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

.btn-sm {
    font-size: 13px;
    font-weight: 600;
}

.btn-lg {
    font-size: 16px;
    font-weight: 600;
}

/* ========== 表单字体 ========== */

input, textarea, select {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

::placeholder {
    font-weight: 400;
    color: #adb5bd;
}

/* ========== 页脚字体 ========== */

.footer {
    font-size: 14px;
    line-height: 1.6;
}

.footer h4 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.footer-links a {
    font-size: 14px;
    font-weight: 400;
}

/* ========== 数字展示 ========== */

.stat-number {
    font-family: var(--font-numbers);
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ========== 徽章和标签 ========== */

.badge {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tag {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ========== 面包屑导航 ========== */

.breadcrumb {
    font-size: 14px;
    font-weight: 400;
}

/* ========== 引用文字 ========== */

blockquote {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    font-style: italic;
    color: #495057;
}

/* ========== 代码和预格式文本 ========== */

code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    font-weight: 500;
}

pre {
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.6;
}

/* ========== 响应式字体大小 ========== */

@media (max-width: 1024px) {
    body {
        font-size: 15px;
    }
    
    h1, .h1 {
        font-size: 40px;
    }
    
    h2, .h2 {
        font-size: 32px;
    }
    
    h3, .h3 {
        font-size: 24px;
    }
    
    .hero-title {
        font-size: 48px;
    }
    
    .hero-title-main {
        font-size: 52px;
    }
    
    .hero-title-sub {
        font-size: 40px;
    }
    
    .section-title {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
    
    h1, .h1 {
        font-size: 32px;
    }
    
    h2, .h2 {
        font-size: 28px;
    }
    
    h3, .h3 {
        font-size: 22px;
    }
    
    h4, .h4 {
        font-size: 18px;
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-title-main {
        font-size: 40px;
    }
    
    .hero-title-sub {
        font-size: 32px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-subtitle {
        font-size: 16px;
    }
    
    .lead {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    h1, .h1 {
        font-size: 28px;
    }
    
    h2, .h2 {
        font-size: 24px;
    }
    
    h3, .h3 {
        font-size: 20px;
    }
    
    .hero-title {
        font-size: 28px;
    }
    
    .hero-title-main {
        font-size: 32px;
    }
    
    .hero-title-sub {
        font-size: 24px;
    }
    
    .hero-subtitle {
        font-size: 15px;
    }
    
    .section-title {
        font-size: 24px;
    }
}

/* ========== 中文优化 ========== */

/* 中文标点符号优化 */
:lang(zh) {
    quotes: """ """ "'" "'";
    hanging-punctuation: allow-end;
}

/* 中文字体微调 */
:lang(zh) h1,
:lang(zh) h2,
:lang(zh) h3 {
    font-weight: 600; /* 中文粗体不宜过粗 */
}

/* ========== 英文优化 ========== */

:lang(en) {
    letter-spacing: normal;
}

/* 英文标题可以更紧凑 */
:lang(en) h1,
:lang(en) h2,
:lang(en) h3 {
    letter-spacing: -0.03em;
}

/* ========== 特殊文本效果 ========== */

.text-gradient {
    background: linear-gradient(135deg, #28a745 0%, #5cb85c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* ========== 链接字体 ========== */

a {
    font-weight: 500;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* ========== 列表字体 ========== */

ul, ol {
    line-height: 1.7;
}

li {
    margin-bottom: 0.5em;
}

/* ========== 表格字体 ========== */

table {
    font-size: 15px;
    line-height: 1.6;
}

th {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

td {
    font-weight: 400;
}

/* ========== 性能优化 ========== */

/* 字体加载优化 */
@supports (font-display: swap) {
    @font-face {
        font-display: swap;
    }
}

/* 避免文字闪烁 */
.font-loading {
    visibility: hidden;
}

.fonts-loaded {
    visibility: visible;
}

/* ========== 打印样式 ========== */

@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1 {
        font-size: 24pt;
    }
    
    h2 {
        font-size: 20pt;
    }
    
    h3 {
        font-size: 16pt;
    }
}