/*
 * 变量命名规范
 * 格式: --[类别]-[属性]-[修饰词]
 * 示例：
 * --text-color-white
 * --font-size-sm
 */

:root {

    /* 颜色体系 */
    --primary-color: #337ab7;       /* 主色 */
    --gradient-start: #337ab7;      /* 渐变起始色 */
    --gradient-end: #2d6ca2;        /* 渐变结束色 */
    --text-color-primary: #333;     /* 主要文字色 */
    --text-color-white: #fff;       /* 反白文字 */

    /* 业务状态色 */
    --color-success: #67c23a;  /* 成功状态 */
    --color-warning: #e6a23c;  /* 警告状态 */
    --color-danger: #f56c6c;   /* 危险状态 */
    --color-info: #909399;     /* 信息状态 */

    /* 背景色 */
    --bg-color-page: #f5f7fa;         /* 页面背景 */
    --bg-color-card: #ffffff;         /* 卡片背景 */
    --bg-color-hover: #f8f9fa;        /* 悬停背景 */

    /* 明暗主题变量 */
    --gradient-start-light: #5ba4e5;
    --gradient-end-light: #4387c5;
    --gradient-start-dark: #2d6ca2;
    --gradient-end-dark: #1a4d75;

    /* 状态渐变 */
    --gradient-success: linear-gradient(to bottom, #67c23a, #5aad32);
    --gradient-warning: linear-gradient(to bottom, #e6a23c, #d9922b);

    /* 过渡效果 */
    --transition-duration-fast: 0.2s;  /* 快速过渡 */
    --transition-duration-base: 0.3s;  /* 标准过渡 */
    --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* 动画曲线 */

    /* 字体体系 */
    --font-size-sm: 0.24rem;        /* 12px */
    --font-size-base: 0.28rem;      /* 14px */
    --font-size-lg: 0.32rem;        /* 16px */
    --font-size-xl: 0.44rem;        /* 22px */

    --font-weight-light: 300;    /* 细体 */
    --font-weight-regular: 400;  /* 常规 */
    --font-weight-medium: 500;   /* 中粗 */
    --font-weight-bold: 600;     /* 加粗 */

    --line-height-sm: 1.4;      /* 紧凑行高 */
    --line-height-base: 1.6;    /* 常规行高 */
    --line-height-lg: 1.8;      /* 宽松行高 */

    /* 间距体系 */
    --space-xs: 0.1rem;             /* 5px */
    --space-sm: 0.2rem;             /* 10px */
    --space-md: 0.3rem;             /* 15px */
    --space-lg: 0.5rem;             /* 25px */

    /* 尺寸体系 */
    --header-height: 1rem;          /* 50px */
    --footer-height: 1rem;          /* 50px */
    --max-container-width: 12rem;   /* 600px */

    /* 圆角 */
    --radius-xs: 2px;    /* 小圆角 */
    --radius-sm: 4px;    /* 标准圆角 */
    --radius-md: 8px;    /* 大圆角 */
    --radius-lg: 12px;   /* 超大圆角 */

}

/* 小屏适配（如 320px~750px 的移动端） */
@media screen and (max-width: 750px) {
    html {
        font-size: 13.3333vw; /* 375px 屏幕下 1vw = 3.75px ,根元素的字体大小设置为13.3333vm 约等于 50px, 则1rem=50px */
    }

    body {
        font-size: var(--font-size-base); /* 设置body基础字体大小 */
    }

    /* 定义移动端容器 */
    .mobile-container {
        max-width: var(--max-container-width);
        margin: 0 auto;
        height: 100vh;
        position: relative;
        overflow: hidden;
        font-size: var(--font-size-base); /* 设置字体大小 */
        line-height: var(--line-height-base); /* 设置基础行高 */
    }

    /* 覆盖表格mini中的字体样式 */
    .el-table--mini {
        font-size: var(--font-size-base)!important;
    }

    /* 覆盖button small中的字体样式 */
    .el-button--small {
        font-size: var(--font-size-base)!important;
    }

    /* 覆盖button mini中的字体样式 */
    .el-button--mini {
        font-size: var(--font-size-sm)!important;
    }

    /* 覆盖el-tooltip__popper中的字体样式 */
    .el-tooltip__popper {
        font-size: var(--font-size-base)!important;
    }

    /* 覆盖van-tag中的字体样式 */
    .van-tag {
        font-size: var(--font-size-base)!important;
    }

    /* 覆盖el-tag中的字体样式 */
    .el-tag {
        font-size: var(--font-size-base)!important;
    }

    /* 覆盖van-nav-bar__left  van-nav-bar__right 中的字体样式 */
    .van-nav-bar__left, .van-nav-bar__right {
        font-size: var(--font-size-base)!important;
    }
}

/* 强制所有元素继承字体大小 */
* {
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
}

/* 覆盖van-tabbar-item的字体样式 */
.van-tabbar-item {
    font-size: var(--font-size-base)!important;
}

/* 覆盖van-cell__label的字体样式 */
.van-cell__label {
    font-size: var(--font-size-base)!important;
}

/* 覆盖van-cell-group__title的字体样式 */
.van-cell-group__title {
    font-size: var(--font-size-base)!important;
}

/* 覆盖van-cell的字体样式 */
.van-cell {
    font-size: var(--font-size-base)!important;
}

/* 覆盖van-nav-bar__title的字体样式 */
.van-nav-bar__title {
    font-size: var(--font-size-lg)!important;
}

/* 覆盖van-cell__label下custom-title的字体样式 */
.van-cell__label .custom-title {
    font-size: var(--font-size-lg)!important;
    color: var(--text-color-primary)!important;
}

/* 覆盖van-tab__text的字体样式 */
.van-tab__text {
    font-size: var(--font-size-base)!important;
}