// ===== H5 移动端独立样式变量（暖色调）=====
// 项目：jk-rag-platform H5 移动端
// 更新：2026-03-24
// 说明：仅在屏幕宽度 ≤ 768px 时生效，不影响主系统 Web/Pad

// ===== H5 移动端色彩系统（暖色调）=====
// 基于 universalChat 的白色背景设计，与主系统保持一致

@media (max-width: 768px) {
    :root {
        // 背景色（白色，与 universalChat 一致）
        --h5-bg-primary: #ffffff;      // 白色背景（与 universalChat 一致）
        --h5-bg-secondary: #ffffff;     // 纯白卡片
        --h5-bg-tertiary: #F3F4F6;      // 浅灰色（功能分类）

        // 文字色（与 universalChat 一致）
        --h5-text-primary: #131212;     // 主文字（深灰近黑）
        --h5-text-secondary: #5E5E66;   // 次文字（中灰）
        --h5-text-muted: #9CA3AF;       // 提示文字（浅灰）

        // 强调色（深棕）
        --h5-accent: #5C4A3D;           // 深棕色（激活状态）
        --h5-accent-light: #8B7355;     // 浅棕色（悬停）
        --h5-accent-dark: #3D2F25;      // 深棕色（点击）

        // 边框色（与 universalChat 一致）
        --h5-border: #F3F4F6;           // 浅灰色边框

        // 字体（移动端偏大）
        --h5-font-xs: 11px;             // 辅助文字
        --h5-font-sm: 13px;             // 次要文字
        --h5-font-base: 15px;           // 基础文字（正文）
        --h5-font-lg: 17px;             // 小标题
        --h5-font-xl: 24px;             // 欢迎语大标题
        --h5-font-2xl: 28px;            // 超大标题

        // 字重
        --h5-font-weight-normal: 400;
        --h5-font-weight-medium: 500;
        --h5-font-weight-semibold: 600;

        // 圆角（大圆角设计）
        --h5-radius-sm: 8px;            // 小按钮
        --h5-radius-md: 12px;           // 中等卡片
        --h5-radius-lg: 16px;           // 大卡片（默认）
        --h5-radius-xl: 24px;           // 超大圆角
        --h5-radius-full: 9999px;       // 胶囊形（输入框、气泡）

        // 间距
        --h5-spacing-xs: 4px;
        --h5-spacing-sm: 8px;
        --h5-spacing-md: 12px;
        --h5-spacing-lg: 16px;
        --h5-spacing-xl: 20px;
        --h5-spacing-2xl: 24px;

        // 阴影
        --h5-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
        --h5-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
        --h5-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

        // 过渡
        --h5-transition: all 0.2s ease;
    }
}

// ===== H5 移动端全局样式 =====

@media (max-width: 768px) {
    // 全局背景
    #root {
        background: var(--h5-bg-primary);
    }

    // 隐藏滚动条
    .hide-scrollbar {
        scrollbar-width: none;
        -ms-overflow-style: none;

        &::-webkit-scrollbar {
            display: none;
        }
    }
}
