/**
 * 全项目统一字体大小系统 (Typography System)
 * 
 * 设计理念：
 * 1. 统一性：全站使用 6 个标准层级，避免随意定义字体大小。
 * 2. 响应式：内置移动端适配，PC 端和移动端自动切换。
 * 3. 语义化：每个层级有推荐的使用场景。
 * 
 * 使用方法：
 * 在 CSS 中使用 var(--font-size-lvl-X) 即可，例如：
 * .my-title { font-size: var(--font-size-lvl-2); }
 * 
 * 层级概览：
 * Level 1: PC 48px | Mobile 32px (大标题)
 * Level 2: PC 24px | Mobile 20px (模块标题)
 * Level 3: PC 20px | Mobile 18px (小标题/按钮)
 * Level 4: PC 16px | Mobile 15px (正文)
 * Level 5: PC 14px | Mobile 13px (辅助文本)
 * Level 6: PC 12px | Mobile 11px (页脚/标签)
 */

:root {
    /* 
     * Level 1: 页面主标题 (Hero Title)
     * 场景：首页大标题、关键引导语
     */
    --font-size-lvl-1: 48px;

    /* 
     * Level 2: 模块标题/Logo (Section Title)
     * 场景：各区块标题、Logo文字、强调标题
     */
    --font-size-lvl-2: 24px;

    /* 
     * Level 3: 小标题/按钮/强调文本 (Subsection Title)
     * 场景：卡片标题、主要按钮文字、列表标题
     */
    --font-size-lvl-3: 20px;

    /* 
     * Level 4: 正文/导航/普通文本 (Body Text)
     * 场景：文章段落、导航链接、列表内容
     */
    --font-size-lvl-4: 16px;

    /* 
     * Level 5: 辅助说明/次要文本 (Caption)
     * 场景：输入框提示、次要描述、日期时间
     */
    --font-size-lvl-5: 14px;

    /* 
     * Level 6: 页脚/版权/标签 (Small Text)
     * 场景：ICP备案号、版权声明、小标签
     */
    --font-size-lvl-6: 12px;
}

/* 移动端适配 (断点: 768px) */
@media (max-width: 768px) {
    :root {
        /* Level 1: 48px -> 32px */
        --font-size-lvl-1: 32px;
        
        /* Level 2: 24px -> 20px */
        --font-size-lvl-2: 20px;
        
        /* Level 3: 20px -> 18px */
        --font-size-lvl-3: 18px;
        
        /* Level 4: 16px -> 15px */
        --font-size-lvl-4: 15px;
        
        /* Level 5: 14px -> 13px */
        --font-size-lvl-5: 13px;
        
        /* Level 6: 12px -> 11px */
        --font-size-lvl-6: 11px;
    }
}