/*
 * Custom Font Definitions for NingNingTyping
 * ─────────────────────────────────────────────
 * 唯一的字体声明源。all.scss 中不再重复声明。
 * 由 index.html 通过 <link> 引入。
 */

/* ── FontAwesome 图标兜底 ─────────────────────
 * 问题：ExtJS 默认规则 `.x-fa:before { font-family: 'Font Awesome 5 Pro' }`
 *       依赖付费 Pro 字体包（只有 weight 400 注册了），而仓库只有
 *       Free solid(900)+regular(400) / Duotone / Brands / Light。所有 solid 图标
 *       (fa-user-graduate/fa-sign-in-alt/fa-sync/fa-plus/fa-check-circle 等)
 *       渲染为空或被系统字体 fallback 成斜体乱码。
 * 修法：把 .x-fa:before (≈ .x-fas:before) 重定向到 'Font Awesome 5 Free' weight 900
 *       （solid 变体），其它子类型沿用各自正确的 font-family/weight。
 *       .x-fa 自身 display:inline-block + font-style:normal 防止 transform 失效与斜体。
 */
.x-fa, .x-fas, .x-far, .x-fal, .x-fab, .x-fad {
    font-style: normal !important;
    display: inline-block;
}
/* Solid (默认 .x-fa / .x-fas) → Free 900 */
.x-fa:before, .x-fas:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-style: normal !important;
}
/* Regular → Pro 400 */
.x-far:before {
    font-family: 'Font Awesome 5 Pro' !important;
    font-weight: 400 !important;
    font-style: normal !important;
}
/* Light → Pro 300（需 Pro 付费包，本仓库未安装时会 fallback 到 Free regular）*/
.x-fal:before {
    font-family: 'Font Awesome 5 Pro' !important;
    font-weight: 300 !important;
    font-style: normal !important;
}
/* Brands → Brands 400 */
.x-fab:before {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400 !important;
    font-style: normal !important;
}
/* Duotone → Duotone 900（需 Pro 付费，未装时 fallback）*/
.x-fad:before {
    font-family: 'Font Awesome 5 Duotone' !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

/* ── 输入框视觉增强 ─────────────────────────
 * 默认 Material/Triton 主题下 .x-underline-el 是 1px 浅灰 #E2E2E2，
 * 在白色背景上对比度过低用户难以察觉"这里是输入框"。加深到 #BDC3C7
 * 并聚焦时变蓝 #3498DB，提供清晰视觉反馈。
 */
.x-field .x-underline-el {
    background-color: #BDC3C7 !important;
}
.x-field.x-focused .x-underline-el,
.x-field:focus-within .x-underline-el {
    background-color: #3498DB !important;
    height: 2px !important;
}

/* ── 引入优化后的分片 Web Fonts ── */
@import url("./webfonts.css");

/* ── 日语专属课程字体（消除中日汉字字形差异）── */
/* Noto Sans JP (日文) - 使用分片优化的网路字体 */
@font-face {
    font-family: 'Noto Sans JP';
    src: local('Noto Sans JP'),
        local('Noto Sans JP Regular');
    /* 配合 sharded 字体，这里作为一个别名引用 */
}

/* 别名映射：将 cn-font-split 生成的名称映射到标准名称 */
@font-face {
    font-family: 'Noto Sans JP';
    src: local('Noto Sans JP Thin');
    font-weight: 100 900;
}

/* ── 纯拼音字母专属 Web Font (单层字母 ɑ, 标准 g) ── */
@font-face {
    font-family: 'Pinyin Regular';
    src: url('../fonts/pinyin/pinyin-regular.woff2') format('woff2');
    font-display: swap;
}

/* ── 拼音描红笔顺字体 (供儿童打字初学者学习笔画分布) ── */
@font-face {
    font-family: 'Pinyin Step';
    src: url('../fonts/pinyin/pinyin-step.woff2') format('woff2');
    font-display: swap;
}

/* ── 拼音文楷轻柔字形 ── */
@font-face {
    font-family: 'Pinyin Wenkai Light';
    src: url('../fonts/pinyin/pinyin-wenkai-light.woff2') format('woff2');
    font-display: swap;
}

/*
 * ── Language-Specific Utility Classes ─────────────────
 * 由 TypingViewModel.fontClass formula 动态应用至 .typing-container
 */

/* 中文书写/展示区：霞鹜文楷 */
.chinese-text,
.font-lang-zh,
.font-lang-zh span {
    font-family: 'LXGW WenKai', '霞鹜文楷', 'KaiTi', '楷体', 'Microsoft YaHei', sans-serif !important;
}

/* 日语区 */
.font-lang-jp,
.font-lang-jp span {
    font-family: 'Noto Sans JP', 'Courier New', Courier, monospace !important;
}

/* 拼音及注音区 */
.font-lang-pinyin,
.font-lang-pinyin span {
    font-family: 'Pinyin Regular', 'Courier New', Courier, monospace !important;
}

/* 拼音描红区 */
.font-lang-pinyin-step,
.font-lang-pinyin-step span {
    font-family: 'Pinyin Step', 'Courier New', Courier, monospace !important;
}

/* 拼音与输入区等宽 (JetBrains Mono) */
.pinyin-text,
.typing-input,
.font-mono {
    font-family: 'JetBrains Mono', Consolas, Monaco, 'Courier New', monospace !important;
}