/**
 * CSS 初始化方案
 * 重置必要样式 + 统一浏览器默认样式 + 提升开发体验
 */

/* ==========================================================================
   1. 核心重置（最小化、安全的全局重置）
   ========================================================================== */
/* 使用更直观的 border-box 盒模型 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 移除默认边距 */
body, h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd, ul, ol, li,
pre, fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}

/* 移除列表样式 (通常在特定情境下添加回来) */
ul, ol {
    list-style: none;
}

/* 核心HTML元素重置 */
html {
    /* 平滑滚动 (谨慎启用) */
    /* scroll-behavior: smooth; */
}

body {
    /* 防止移动端 Safari 字体大小异常调整 */
    -webkit-text-size-adjust: 100%;
    /* 提升字体渲染清晰度 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 基线对齐 */
    text-rendering: optimizeLegibility;
}

/* 媒体元素更易控制 */
img, picture, video, canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 继承表单控件的字体 */
input, button, textarea, select {
    font: inherit;
    color: inherit;
}

/* 链接样式重置 (通常在项目样式中定义) */
a {
    color: inherit;
    text-decoration: none;
}

/* 按钮重置为手型指针 */
button {
    cursor: pointer;
    background: transparent;
    border: none;
}

/* 表格边框合并，间距为0 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 代码及引号元素字体族设置 */
code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}

/* 引号元素语言适应性重置 */
blockquote, q {
    quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
    content: '';
}

/* 隐藏 visually-hidden 类 (保持可访问性) */
.visually-hidden:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   2. 排版与字体基础 (现代系统字体栈)
   ========================================================================== */
/* 设置根字体大小 (方便 rem 单位计算， 1rem = 10px) */
html {
    font-size: 100%; /* 通常是 10px，但尊重用户浏览器设置 */
}

/* 设置基础字体和行高 */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    font-size: 1rem; /* 相当于 16px */
    line-height: 1.5;
    font-weight: 400;
    color: #333; /* 设置一个基础文本色 */
}

/* ==========================================================================
   3. 交互与可访问性增强
   ========================================================================== */
/* 焦点轮廓 - 对键盘导航至关重要，可用其他视觉样式替代，但切勿移除 */
:focus-visible {
    outline: 2px solid #4d90fe; /* 示例颜色 */
    outline-offset: 2px;
}

/* 禁用状态样式 */
[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 减少运动偏好设置 (尊重用户系统设置) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   4. 实用重置 (根据项目需要启用)
   ========================================================================== */
/* 清除浮动 (传统方式，现代布局中可能不需要) */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* 文本选择颜色 */
::selection {
    background-color: #b3d4fc; /* 示例颜色 */
    color: #000;
}