html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

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

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
}

:root {
    /*颜色*/
    /* 主色 */
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-primary-light: #2563eb;

    /* 中性色 */
    --color-gray-100: #f3f4f6;
    --color-gray-800: #1f2937;

    /*字体大小*/
    --text-xs: 0.75rem; /* 12px - 辅助文字 */
    --text-sm: 0.875rem; /* 14px - 正文/标签 */
    --text-base: 1rem; /* 16px - 默认正文 */
    --text-lg: 1.125rem; /* 18px - 小标题 */
    --text-xl: 1.5rem; /* 24px - 标题 */
    --text-2xl: 2rem; /* 32px - 大标题 */

    /*间距:采用一个基准单位（如4px或8px）的倍数来统一所有间距。*/
    --space-0: 0; /* 4px */
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px - 基准单位 */
    --space-5: 1.5rem; /* 24px */
    --space-6: 2rem; /* 32px */
    --space-8: 3rem; /* 48px */
}

/* 弹性布局 */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

/* 网格布局 */
.grid {
    display: grid;
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* 显示/隐藏 */
.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

/*字体样式*/
.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-base {
    font-size: var(--text-base);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

/*文本颜色*/
.text-primary {

}

.text-secondary {

}

.text-gray-500 {

}

/* 对齐 */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left
}

/* 字重 */
.font-normal {
    font-weight: 400;
}

.font-bold {
    font-weight: 700;
}

/* 行高 */
.leading-tight {
    line-height: 1.25;
}

.leading-relaxed {
    line-height: 1.6;
}


/* 边距（margin） */
.m-0 { margin: var(--space-0); }
.m-4 { margin: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.p-4 { padding: var(--space-4); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.gap-2 { gap: var(--space-2); }
/* 16px */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* 水平居中 */

/* 内边距（padding） */
.p-2 {
    padding: 0.5rem;
}

/* 8px */
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* 12px */

/* 间隙（gap） */
.gap-4 {
    gap: 1rem;
}

/* 16px */


html {
    font-size: 16px;
}