/**
 * Normalax
 * Last modified: 2026-03-30 15:02:52
 *
 * Philosophy 设计理念：
 * 1. Fix browser inconsistencies 修正浏览器默认差异
 * 2. Provide a clean typography baseline 提供干净的排版基线
 * 3. Improve form & media usability 优化表单与媒体元素体验
 * 4. Stay layout-neutral 尽量不干涉具体布局
 */
@layer base {
  /* ==================================================
   Design Tokens — Typography
   设计令牌：字体系统
   ================================================== */
  /**
 * Public Override Tokens（对外变量，可由用户覆盖）
 * --------------------------------------------------
 * These variables act as "entry points" for customization.
 * They are intentionally left undefined or loosely defined,
 * so users can override them without touching internal tokens.
 *
 * 这些变量是对外暴露的“覆盖入口”，
 * 用户可以通过它们定制全局行为，而无需修改内部实现。
 *
 * --default-font-family
 *   → Base font family for the document
 *   → 页面默认字体族
 *
 * --default-mono-font-family
 *   → Base monospace font family for code elements
 *   → 代码元素默认等宽字体
 *
 * --default-tab-size
 *   → Tab character width in spaces
 *   → Tab 缩进宽度（空格数）
 *
 * --default-accent-color
 *   → Accent color for form controls (checkbox, radio, etc.)
 *   → 表单控件主题色（checkbox、radio 等）
 *
 * --default-border-color
 *   → Default border color used in elements like table
 *   → 默认边框颜色（如表格）
 *
 * --default-font-feature-settings
 *   → OpenType feature control (ligatures, numeric styles, etc.)
 *   → 控制 OpenType 排版特性（连字、数字样式等）
 *
 * --default-font-variation-settings
 *   → Variable font axis control
 *   → 控制可变字体轴参数
 *   
* --default-border-radius
 *   → Variable border radius of input or button
 *   → 控制inputbutton元素的圆角
 */
  /**
 * Internal Tokens（内部变量，不建议直接修改）
 * --------------------------------------------------
 * These variables define the internal design system of Normalax.
 * They provide consistent fallback values and are used throughout the stylesheet.
 *
 * 这些变量属于内部实现，用于保证一致性和回退逻辑。
 * 虽然可以覆盖，但通常不建议用户直接修改。
 *
 * --font-sans
 *   → Default sans-serif font stack
 *
 * --font-zh-sc / --font-zh-tc / --font-ja / --font-ar
 *   → Language-specific font stacks
 *
 * --font-emoji
 *   → Emoji fallback fonts
 *
 * --font-fallback
 *   → Final fallback (usually generic family)
 *
 * --font-mono
 *   → Monospace font stack
 *
 * --leading-tight / snug / compact / normal / relaxed / loose
 *   → Line-height scale for typography hierarchy
 */
  :root,
  :host {
    /* ---------- Font Stacks 字体栈 ---------- */
    /* UI & Latin interfaces 通用界面与拉丁字符 */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    /* Simplified Chinese 简体中文 */
    --font-zh-sc: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC";
    /* Traditional Chinese 繁体中文 */
    --font-zh-tc: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC";
    /* Japanese 日文 */
    --font-ja: "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP";
    /* Arabic 阿拉伯语 */
    --font-ar: Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic";
    /* Emoji 表情符号 */
    --font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    /* Fallback 兜底字体 */
    --font-fallback: sans-serif;
    /* Monospace 等宽字体 */
    --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    /* ---------- Line Heights 行高 ---------- */
    /* Large headings use tighter line-height 大标题使用小值行高 */
    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-compact: 1.4;
    /* Default for Latin scripts 拉丁字符默认行高 (16px*1.5=24px) */
    --leading-normal: 1.5;
    /* 韩文阿拉伯语文紧凑阅读 */
    --leading-relaxed: 1.65;
    /* More breathing room for CJK 中日韩更舒展的行高  (16px*1.75=28px)*/
    --leading-loose: 1.75;
  }
  /* ==================================================
   Root Typography
   根级排版基线
   ================================================== */
  html,
  :host {
    font-family: var(--default-font-family), var(--font-sans), var(--font-zh-sc), var(--font-zh-tc), var(--font-ja), var(--font-ar), var(--font-emoji), var(--font-fallback);
    /* Base line height 基础行高 */
    line-height: var(--leading-normal);
    /* Prevent iOS font auto-scaling 防止 iOS 横屏自动放大字体 */
    -webkit-text-size-adjust: 100%;
    /* Consistent tab rendering 统一 Tab 显示宽度 */
    tab-size: var(--default-tab-size, 4);
    /* Remove mobile tap highlight 移除移动端点击高亮 */
    -webkit-tap-highlight-color: transparent;
    /* Control OpenType advanced typographic features 控制 OpenType 高级排版特性 */
    font-feature-settings: var(--default-font-feature-settings, normal);
    /* Enable support for variable fonts 支持可变字体（Variable Fonts） */
    font-variation-settings: var(--default-font-variation-settings, normal);
    /* Improve long-text wrapping 优化长文本换行 */
    text-wrap: pretty;
  }
  /* Language-specific font optimization 语言特定字体优化  */
  /* Simplified Chinese 简体中文 */
  :where(:lang(zh)),
  :where(:lang(zh-CN)),
  :where(:lang(zh-Hans)) {
    font-family: var(--font-zh-sc), var(--font-sans), var(--font-emoji), var(--font-fallback);
  }
  /* Traditional Chinese 繁体中文 */
  :where(:lang(zh-TW)),
  :where(:lang(zh-HK)),
  :where(:lang(zh-Hant)) {
    font-family: var(--font-zh-tc), var(--font-sans), var(--font-emoji), var(--font-fallback);
  }
  /* Japanese 日文 */
  :where(:lang(ja)) {
    font-family: var(--font-ja), var(--font-sans), var(--font-emoji), var(--font-fallback);
  }
  /* Arabic 阿拉伯语 */
  :where(:lang(ar)) {
    font-family: var(--font-ar), var(--font-sans), var(--font-emoji), var(--font-fallback);
  }
  /* CJK & Arabic line-height optimization 中日韩与阿拉伯语行高优化 */
  :where(:lang(zh)),
  :where(:lang(ja)) {
    line-height: var(--leading-loose);
  }
  :where(:lang(ar)),
  :where(:lang(ko)) {
    line-height: var(--leading-relaxed);
  }
  /* ==================================================
   Document Structure
   文档结构
   ================================================== */
  html {
    /* Improve text rendering quality 优化文本渲染质量 */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: auto;
  }
  html:focus-within {
    scroll-behavior: smooth;
  }
  body {
    /* Remove default margin 移除浏览器默认外边距 */
    margin: 0;
  }
  /* Use border-box for predictable sizing 使用更直观的盒模型，宽高包含 padding 和 border */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  /* 选择文本背景色跟随系统高亮色 */
  ::selection {
    background-color: Highlight;
    color: HighlightText;
  }
  /* ==================================================
   Text-level Semantics
   文本语义元素
   ================================================== */
  /* Smaller headings use tighter spacing 标题越大，行高越紧凑 */
  h1 {
    line-height: var(--leading-tight);
  }
  h2,
  h3 {
    line-height: var(--leading-snug);
  }
  h4,
  h5 {
    line-height: var(--leading-compact);
  }
  h6 {
    line-height: var(--leading-normal);
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-block: 0;
  }
  /* Fine-tune line-height for CJK text cjk微调 */
  :where(:lang(zh)) h1,
  :where(:lang(ja)) h1,
  :where(:lang(ko)) h1 {
    line-height: calc(var(--leading-tight) + 0.05);
  }
  :where(:lang(zh)) h2,
  :where(:lang(ja)) h2,
  :where(:lang(ko)) h2,
  :where(:lang(zh)) h3,
  :where(:lang(ja)) h3,
  :where(:lang(ko)) h3 {
    line-height: calc(var(--leading-snug) + 0.05);
  }
  /* Stronger bold weight in WebKit 修正加粗权重 */
  b,
  strong {
    font-weight: bolder;
  }
  /* Monospace consistency 等宽字体统一 */
  code,
  kbd,
  samp,
  pre {
    font-family: var(--default-mono-font-family, var(--font-mono));
    /* Keep same size as body 保持与正文一致 */
    font-size: 1em;
  }
  /* Small text size 小号文本 */
  small {
    font-size: 80%;
  }
  /* Sub/Sup line-height fix 上下标不影响行高 */
  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  /* ==================================================
   Forms
   表单元素
   ================================================== */
  /* Form typography normalization 表单排版统一 */
  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    line-height: var(--leading-normal);
    margin: 0;
  }
  /* Datalist arrow vertical alignment 修正 datalist 图标垂直对齐 */
  input[list]::-webkit-calendar-picker-indicator {
    line-height: 1em;
  }
  /* Fieldset legend padding reset 移除 legend 内边距 */
  legend {
    padding: 0;
  }
  /* Progress baseline alignment 修正进度条对齐 */
  progress {
    vertical-align: baseline;
  }
  /* Safari number input button fix 修正 Safari 数字输入按钮 */
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }
  /* Search input normalization 搜索框外观统一 */
  [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }
  /* Remove macOS search decoration 移除 macOS 搜索装饰 */
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  /* File upload button styling fix 文件上传按钮样式修正 */
  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }
  /* Restore button appearance in iOS 恢复 iOS 按钮外观 */
  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
  }
  /* Disabled state cursor 禁用态鼠标样式 */
  :disabled,
  [aria-disabled="true"] {
    cursor: not-allowed;
  }
  /* Textarea usability 文本域体验优化 */
  textarea {
    overflow: auto;
    /* Scroll when needed 内容溢出时滚动 */
    resize: vertical;
    /* Only vertical resize 仅允许纵向拖拽 */
    vertical-align: top;
    /* Better inline alignment 更自然的行内对齐 */
  }
  /* Inline control alignment 行内控件对齐 */
  input,
  select,
  meter,
  progress,
  button {
    vertical-align: middle;
  }
  /* Accent color for native controls 原生控件主题色（checkbox / radio / progress / meter） */
  input[type="checkbox"],
  input[type="radio"],
  progress,
  meter {
    accent-color: var(--default-accent-color);
  }
  /* Use default border radius 默认使用圆角的节点 */
  button,
  select,
  textarea,
  input:where(:not([type="range"], [type="file"],[type="radio"], [type="checkbox"])) {
    border-radius: var(--default-border-radius);
  }
  /* ==================================================
   Interactive Elements
   交互元素
   ================================================== */
  /* Ensure correct display for details/summary 修正折叠面板显示 */
  summary {
    display: list-item;
  }
  /* Label usability 标签可用性优化 */
  label {
    /* Indicate clickable 表示可点击 */
    display: inline-flex;
    /* Better alignment 更好的内部对齐 */
    align-items: center;
    /* Show pointer cursor when label contains a checkbox or radio 如果包裹了radio或checkbox则显示手型 */
  }
  label:where(:has(input)) {
    cursor: pointer;
  }
  /* Form container positioning 表单容器定位基准 */
  form {
    position: relative;
    /* For loading overlays 等绝对定位子元素 */
  }
  /* ==================================================
   Media Elements
   媒体元素
   ================================================== */
  /* Inline media alignment 行内媒体对齐 */
  img,
  svg {
    vertical-align: middle;
  }
  /* Responsive media safety 响应式媒体安全网 */
  img,
  video,
  audio,
  picture {
    max-width: 100%;
    height: auto;
  }
  /* Block media elements 块级媒体元素，图片保持行内属性 */
  video,
  audio,
  picture,
  iframe,
  canvas,
  embed,
  object {
    display: block;
  }
  /* Full-width iframe 全宽 iframe */
  iframe {
    width: 100%;
    border: 0;
  }
  /* Improve readability of the abbr element 增强abbr标签的可读性 */
  abbr:where([title]) {
    text-decoration: underline dotted;
    cursor: help;
  }
  /* ==================================================
   Content Elements
   内容元素
   ================================================== */
  /* Horizontal rule styling 分割线样式 */
  hr {
    border: 0;
    height: 1px;
    background-color: currentColor;
  }
  /* Preformatted text wrapping 预格式文本自动换行 */
  pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }
  /* Code highlighting is typically structured as pre + code 代码高亮布局通常是pre+code */
  pre > code {
    display: block;
  }
  /* Keyboard input styling 键盘输入样式 */
  kbd {
    display: inline-flex;
    vertical-align: middle;
    user-select: none;
  }
  /* Article long-text wrapping 长文本断行优化 */
  article {
    overflow-wrap: break-word;
    /* Prevent overflow 防止溢出 */
    hyphens: auto;
    /* Natural hyphenation 自动连字符 */
  }
  /* ==================================================
   Tables
   表格
   ================================================== */
  table {
    border-color: var(--default-border-color, currentColor);
    min-width: 100%;
    /* Fill container at minimum 至少铺满容器 */
    border-collapse: collapse;
    table-layout: fixed;
    /* Faster & stable column width 更稳定高效 */
  }
  table th {
    text-align: inherit;
  }
  /* Reduce motion 减少动画 */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}