/**
 * 通用字体资源文件
 * 统一管理网站字体配置
 * 
 * @author LuminolCraft Team
 * @version 1.0.0
 * @since 2025-10-26
 */

/* ===========================================
   MiSans 字体导入
   =========================================== */

/* MiSans 拉丁文字体 (Variable Font) */
@import url("https://cdn-font.hyperos.mi.com/font/css?family=MiSans_Latin_VF:VF:Latin&display=swap");

/* MiSans 中文字体 (Variable Font) */
@import url("https://cdn-font.hyperos.mi.com/font/css?family=MiSans_VF:VF:Chinese_Simplify,Latin&display=swap");

/* MiSans 完整字体包 (多字重) */
@import url("https://cdn-font.hyperos.mi.com/font/css?family=MiSans:100,200,300,400,450,500,600,650,700,900:Chinese_Simplify,Latin&display=swap");

/* ===========================================
   字体变量定义
   =========================================== */

:root {
    /* 主要字体栈 */
    --font-primary: 'MiSans VF', 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    /* 等宽字体栈 */
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, Monaco, 'Courier New', monospace;
    
    /* 备用字体栈 */
    --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    /* 字体大小变量 */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    
    /* 字体权重变量 */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* 行高变量 */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
}

/* ===========================================
   基础字体样式
   =========================================== */

/* 全局字体设置 */
* {
    font-family: var(--font-primary);
}

/* 等宽字体类 */
.font-mono {
    font-family: var(--font-mono);
}

/* 备用字体类 */
.font-fallback {
    font-family: var(--font-fallback);
}

/* ===========================================
   字体大小工具类
   =========================================== */

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }

/* ===========================================
   字体权重工具类
   =========================================== */

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

/* ===========================================
   行高工具类
   =========================================== */

.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* ===========================================
   常用文本样式组合
   =========================================== */

/* 标题样式 */
.heading-1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.heading-2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.heading-3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
}

.heading-4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.heading-5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

.heading-6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
}

/* 正文样式 */
.body-text {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

.body-text-sm {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

/* 代码样式 */
.code-text {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

/* 小字样式 */
.small-text {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}

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

@media (max-width: 768px) {
    :root {
        --font-size-xs: 0.7rem;    /* 11.2px */
        --font-size-sm: 0.8rem;    /* 12.8px */
        --font-size-base: 0.9rem;  /* 14.4px */
        --font-size-lg: 1rem;      /* 16px */
        --font-size-xl: 1.1rem;    /* 17.6px */
        --font-size-2xl: 1.3rem;   /* 20.8px */
        --font-size-3xl: 1.6rem;   /* 25.6px */
        --font-size-4xl: 2rem;     /* 32px */
        --font-size-5xl: 2.5rem;   /* 40px */
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-xs: 0.65rem;   /* 10.4px */
        --font-size-sm: 0.75rem;   /* 12px */
        --font-size-base: 0.85rem; /* 13.6px */
        --font-size-lg: 0.95rem;   /* 15.2px */
        --font-size-xl: 1.05rem;   /* 16.8px */
        --font-size-2xl: 1.2rem;   /* 19.2px */
        --font-size-3xl: 1.4rem;   /* 22.4px */
        --font-size-4xl: 1.8rem;   /* 28.8px */
        --font-size-5xl: 2.2rem;   /* 35.2px */
    }
}

/* ===========================================
   字体加载优化
   =========================================== */

/* 字体加载时的备用样式 */
.font-loading {
    font-family: var(--font-fallback);
}

/* 字体加载完成后的样式 */
.font-loaded {
    font-family: var(--font-primary);
}

/* ===========================================
   特殊用途字体样式
   =========================================== */

/* 数字显示 */
.number-display {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
}

/* 时间显示 */
.time-display {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-normal);
    font-variant-numeric: tabular-nums;
}

/* 版本号显示 */
.version-display {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: #6b7280;
}

/* ===========================================
   字体性能优化
   =========================================== */

/* 预加载关键字体 */
@font-face {
    font-family: 'MiSans VF';
    font-display: swap;
}

/* 字体渲染优化 */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ===========================================
   兼容性处理
   =========================================== */

/* 不支持CSS变量的浏览器 */
@supports not (--css: variables) {
    * {
        font-family: 'MiSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    
    .font-mono {
        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, Monaco, 'Courier New', monospace;
    }
}

/* ===========================================
   调试工具
   =========================================== */

/* 字体调试模式 */
.debug-fonts * {
    outline: 1px solid rgba(255, 0, 0, 0.1);
}

.debug-fonts *::before {
    content: attr(class);
    position: absolute;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    z-index: 9999;
}