/* src/styles/fonts.css */
/* 定义自定义字体族，注册Lato，Inter */


/* ==================== 字体1：Lato（英文无衬线） ==================== */
/* Lato 字体 - 400 字重（常规regular） */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-latin-400-normal.woff2') format('woff2'),
        url('../fonts/lato-latin-ext-400-normal.woff2') format('woff2'),
        url('../fonts/lato-latin-400-normal.woff') format('woff'),
        url('../fonts/lato-latin-ext-400-normal.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}

/* Lato 字体 - 100 字重（细体thin） */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-latin-100-normal.woff') format('woff2'),
        url('../fonts/lato-latin-ext-100-normal.woff2') format('woff2'),
        url('../fonts/lato-latin-100-normal.woff') format('woff'),
        url('../fonts/lato-latin-ext-100-normal.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}

/* Lato 字体 - 300 字重（轻体light） */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-latin-300-normal.woff2') format('woff2'),
        url('../fonts/lato-latin-ext-300-normal.woff2') format('woff2'),
        url('../fonts/lato-latin-300-normal.woff') format('woff'),
        url('../fonts/lato-latin-ext-300-normal.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}

/* Lato 字体 - 700 字重（粗体bold） */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-latin-700-normal.woff2') format('woff2'),
        url('../fonts/lato-latin-ext-700-normal.woff2') format('woff2'),
        url('../fonts/lato-latin-700-normal.woff') format('woff'),
        url('../fonts/lato-latin-ext-700-normal.woff') format('woff'), ;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}

/* Lato 字体 - 900 字重（超粗体black） */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-latin-900-normal.woff2') format('woff2'),
        url('../fonts/lato-latin-ext-900-normal.woff2') format('woff2'),
        url('../fonts/lato-latin-900-normal.woff') format('woff'),
        url('../fonts/lato-latin-ext-900-normal.woff') format('woff'), ;
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}

/* Lato 字体 - 400 字重 - 斜体 */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-latin-400-italic.woff2') format('woff2'),
        url('../fonts/lato-latin-ext-400-italic.woff2') format('woff2'),
        url('../fonts/lato-latin-400-italic.woff') format('woff'),
        url('../fonts/lato-latin-ext-400-italic.woff') format('woff'), ;
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}

/* Lato 字体 - 100 字重 - 斜体 */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-latin-100-italic.woff2') format('woff2'),
        url('../fonts/lato-latin-ext-100-italic.woff2') format('woff2'),
        url('../fonts/lato-latin-100-italic.woff') format('woff'),
        url('../fonts/lato-latin-ext-100-italic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}

/* Lato 字体 - 300 字重 - 斜体 */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-latin-300-italic.woff2') format('woff2'),
        url('../fonts/lato-latin-ext-300-italic.woff2') format('woff2'),
        url('../fonts/lato-latin-300-italic.woff') format('woff'),
        url('../fonts/lato-latin-ext-300-italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}

/* Lato 字体 - 700 字重 - 斜体 */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-latin-700-italic.woff2') format('woff2'),
        url('../fonts/lato-latin-ext-700-italic.woff2') format('woff2'),
        url('../fonts/lato-latin-700-italic.woff') format('woff'),
        url('../fonts/lato-latin-ext-700-italic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}

/*  Lato 字体 - 900 字重 - 斜体 */
@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato-latin-900-italic.woff2') format('woff2'),
        url('../fonts/lato-latin-ext-900-italic.woff2') format('woff2'),
        url('../fonts/lato-latin-900-italic.woff') format('woff'),
        url('../fonts/lato-latin-ext-900-italic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}



/* ==================== 字体2：Inter（英文无衬线） ==================== */
/* Inter 可变字体 */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2'),
        url('../fonts/Inter-VariableFont_opsz,wght.woff') format('woff');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}

/* Inter 斜体可变字体 */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2'),
        url('../fonts/Inter-Italic-VariableFont_opsz,wght.woff') format('woff');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0020-007E, U+00A0-00FF;
}



/* ===================== 字体全局变量 ===================== */

:root {
    /* 字体家族 */
    --font-family-sans: 'Lato', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    --font-serif: 'Times New Roman', 'Georgia', serif;
    --font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;


    /* 字体大小（基于rem，1rem = 16px，适配响应式） */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px, 正文默认 */
    --font-size-lg: 1.125rem;
    /* 18px, h4 */
    --font-size-xl: 1.25rem;
    /* 20px, h3 */
    --font-size-2xl: 1.5rem;
    /* 24px, h2 */
    --font-size-3xl: 2.25rem;
    /* 36px，h1 */
    --font-size-4xl: 2.5rem;
    /* 40px */


    /* 字重 */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;


    /* 字间距/字母间距 */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0.03em;
    --letter-spacing-wide: 0.05em;


    /* 行高 */
    --line-height-tight: 1.4;
    --line-height-normal: 1.5;
    --line-height-relaxed: 2;
}


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

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
    font-variant-ligatures: normal;
    font-kerning: normal;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


/* ===================== 全局默认字体样式 ===================== */

html, body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    /* 16px 基准 */
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
    overflow-wrap: break-word;
    hyphens: auto;
}


h1 {
    line-height: var(--line-height-tight);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

h2 {
    line-height: var(--line-height-tight);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

h3, dt {
    line-height: var(--line-height-tight);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

h4, th {
    line-height: var(--line-height-tight);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

p, dd, ul, ol, li {
    font-size: var(--font-size-base);
}

td {
    line-height: var(--line-height-tight);
}


strong {
    font-weight: var(--font-weight-bold);
}

b {
    font-weight: var(--font-weight-bold);
}

em, i {
    font-style: italic;
}


/* 辅助文本 */
small, caption {
    font-size: var(--font-size-sm);
}


.time-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}


/* 链接：继承字体样式，仅修改颜色和下划线 */
a {
    text-decoration: none;
    color: #5035E8;
    transition: color 0.2s ease-in-out;
}

a:hover {
    text-decoration: underline;
    color: #5035E8
}

a:active {
    text-decoration: none;
    color: #3E0BA1;
}



/* ===================== 响应式字体适配（768px） ===================== */

@media (max-width: 768px) {
    body, h1, h2, h3 {
        line-height: 1.5;
    }

    body {
        font-size: 1rem;
        /* 16px */
    }

    h1 {
        font-size: 2.25rem;
        /* 36px */
    }

    h2 {
        font-size: 1.5rem;
        /* 24px */
    }

    h3, th, dt {
        font-size: 1.25rem;
        /* 20px */
    }

    h4 {
        font-size: 1.125rem;
        /* 18px */
    }

    p, dd, ul, ol, li {
        font-size: 1rem;
        /* 16px */
    }
}