/* +------------------------------------------------------------------------------------------------------------------------+ */
/* | 基础变量 */
/* +------------------------------------------------------------------------------------------------------------------------+ */
:root {
    /* 公共样式-------------------------------- */
    font-size: 10px;
    /* 使用字体 */
    --fontFamily-recoleta: 'Recoleta';
    --fontFamily-roboto: 'Roboto', sans-serif;

    /* 字体大小变量 */
    --fontSize-40: 40px;
    --fontSize-36: 36px;
    --fontSize-32: 32px;
    --fontSize-30: 30px;
    --fontSize-28: 28px;
    --fontSize-26: 26px;
    --fontSize-24: 24px;
    --fontSize-22: 22px;
    --fontSize-20: 20px;
    --fontSize-18: 18px;
    --fontSize-16: 16px;
    --fontSize-14: 14px;
    --fontSize-12: 12px;
    --fontSize-10: 10px;
    --fontSize-8: 8px;

    /* 字重 */
    --weight-regular: 400;
    --weight-medium: 400;

    /* 过渡 */
    --transition-1: 0.25s ease;
    --transition-2: 0.5s ease;
    --transition-3: 1000ms cubic-bezier(0.03, 0.98, 0.52, 0.99) 0s;
    --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
    --cubic-out: cubic-bezier(0.05, 0.83, 0.52, 0.97);

    /* 通用颜色 */
    --color-white: rgb(255, 255, 255);
    --color-black: rgb(0, 0, 0);
    --color-main: #225ECD;


    /* 亮色主题-------------------------------- */
    /* 背景颜色 */
    --bg-light: hsla(0, 0%, 100%);
    /* 卡片颜色 */
    --bg-card-light: rgba(248, 253, 255, 1);
    /* 文本颜色 */  
    --text-1-light: rgba(0, 8, 38, 1);
    --text-2-light: rgba(42, 53, 70, 1);
    --text-3-light: rgba(117, 124, 156, 1);
    /* 负向颜色 */
    --reverse-light: rgb(0, 0, 0);
    /* 边框颜色 */
    --border-light: rgba(221, 235, 255, 1);


    /* 深色主题-------------------------------- */
    /* 背景颜色 */
    --bg-dark: rgb(1, 3, 6);
    /* 卡片颜色 */
    --bg-card-dark: #07070B;
    /* 文本颜色 */
    --text-1-dark: rgb(255, 255, 255);
    --text-2-dark: rgba(184, 184, 184, 1);
    --text-3-dark: rgba(92, 92, 92, 1);
    /* 负向颜色 */
    --reverse-dark: rgb(255, 255, 255);
    /* 边框颜色 */
    --border-dark: #212121;
}



/* +------------------------------------------------------------------------------------------------------------------------+ */
/* | 定义亮色主题 */
/* +------------------------------------------------------------------------------------------------------------------------+ */
[data-theme="light"] {
    --bg: var(--bg-light);
    --bg-card: var(--bg-card-light);
    --text-color-1: var(--text-1-light);
    --text-color-2: var(--text-2-light);
    --text-color-3: var(--text-3-light);
    --border: var(--border-light);
    --reverse-color: var(--reverse-light);
}


/* +------------------------------------------------------------------------------------------------------------------------+ */
/* | 定义深色主题 */
/* +------------------------------------------------------------------------------------------------------------------------+ */
[data-theme="dark"] {
    --bg: var(--bg-dark);
    --bg-card: var(--bg-card-dark);
    --text-color-1: var(--text-1-dark);
    --text-color-2: var(--text-2-dark);
    --text-color-3: var(--text-3-dark);
    --border: var(--border-dark);
    --reverse-color: var(--reverse-dark);
}



/* +------------------------------------------------------------------------------------------------------------------------+ */
/* | 样式重置 */
/* +------------------------------------------------------------------------------------------------------------------------+ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a,
img,
span,
input,
button,
textarea,

a {
    color: inherit;
    text-decoration: none;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

img {
    height: auto;
}

input,
button,
textarea {
    background: none;
    border: none;
    font: inherit;
}

input,
textarea {
    width: 100%;
}

button {
    cursor: pointer;
}

address {
    font-style: normal;
}

::-webkit-scrollbar {
    width: 0px;
}

::-webkit-scrollbar-track {
    border-inline-start: 1px solid var(--border);
}

::-webkit-scrollbar-thumb {
    background-color: var(--reverse-color);
}