:root {
	/* ============================
     * 🎨 颜色体系（Color System）
     * ============================ */

	/* 主色（品牌） */
	--ql-color-primary: #2c3e50;
	--ql-color-primary-light: #3d566e;
	--ql-color-primary-dark: #1f2d3a;
	--ql-color-primary-contrast: #ffffff;
	--ql-color-primary-rgb: 44, 62, 80;

	/* 辅助色 */
	--ql-color-secondary: #f5b247;
	--ql-color-tertiary: #999999;
	--ql-color-white: #ffffff;

	/* 功能色（可扩展，企业站常用） */
	--ql-color-success: #4caf50;
	--ql-color-warning: #ff9800;
	--ql-color-danger: #f44336;
	--ql-color-info: #2196f3;

	/* 背景色 */
	--ql-color-bg: #f5f5f5;
	--ql-color-bg-light: #fafafa;
	--ql-color-bg-dark: #222831;
	--ql-color-surface: #ffffff;
	--ql-color-surface-alt: #fafafa; /* 额外卡片背景 */

	/* 边框 & 分割线 */
	--ql-color-border: #e0e0e0;
	--ql-color-border-light: #eeeeee;
	--ql-color-border-dark: #cccccc;

	/* 文本色 */
	--ql-color-text: #333333;
	--ql-color-text-regular: #333333;
	--ql-color-text-dark: #222222;
	--ql-color-text-light: #777777;
	--ql-color-text-placeholder: #999999;
	--ql-color-text-inverse: #ffffff;
	--ql-color-text-disabled: #bdbdbd;

	/* ============================
     * 🅰 排版体系（Typography System）
     * ============================ */

	/* 字体 */
	--ql-font-family-base: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
	--ql-font-family: var(--ql-font-family-base);

	/* 字号（标题 → 正文 → 辅助） */
	--ql-font-size-xxl: 32px;
	--ql-font-size-2xl: var(--ql-font-size-xxl);
	--ql-font-size-xl: 24px;
	--ql-font-size-lg: 20px;
	--ql-font-size-md: 16px;
	--ql-font-size-sm: 14px;
	--ql-font-size-xs: 12px;

	/* 行高 */
	--ql-line-height-xxl: 40px;
	--ql-line-height-xl: 32px;
	--ql-line-height-lg: 28px;
	--ql-line-height-md: 24px;
	--ql-line-height-sm: 20px;
	--ql-line-height-xs: 16px;

	/* 字重 */
	--ql-font-weight-light: 300;
	--ql-font-weight-regular: 400;
	--ql-font-weight-medium: 500;
	--ql-font-weight-bold: 600;

	/* 字间距 */
	--ql-letter-spacing-sm: 0.5px;
	--ql-letter-spacing-md: 0.25px;
	--ql-letter-spacing-normal: 0px;

	/* ============================
     * ⬜ 容器布局（Container Width）
     * ============================ */
	--ql-container-width: 1200px; /* 默认主体宽度 */
	--ql-container-wide: 1440px;  /* 大屏内容宽度 */

	/* ============================
     * 🟦 圆角体系（Radius）
     * ============================ */
	--ql-radius-sm: 4px;
	--ql-radius-md: 8px;
	--ql-radius-lg: 12px;
	--ql-radius-round: 50px;

	/* ============================
     * 🌫 阴影体系（Shadow）
     * ============================ */
	--ql-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--ql-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--ql-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);

	/* ============================
     * ⚡ 动效体系（Transitions）
     * ============================ */
	--ql-transition-fast: 0.15s ease;
	--ql-transition-default: 0.3s ease;
	--ql-transition-slow: 0.5s ease;

	/* ============================
     * 📐 间距体系（Spacing）
     * 基于 4px 网格
     * ============================ */
	--ql-space-1: 4px;
	--ql-space-2: 8px;
	--ql-space-3: 12px;
	--ql-space-4: 16px;
	--ql-space-5: 20px;
	--ql-space-6: 24px;
	--ql-space-8: 32px;
	--ql-space-10: 40px;
	--ql-space-12: 48px;
	--ql-space-16: 64px;

	/* ============================
     * 📱 响应式断点（Breakpoints）
     * ============================ */
	--ql-breakpoint-sm: 480px;
	--ql-breakpoint-md: 768px;
	--ql-breakpoint-lg: 996px;
	--ql-breakpoint-xl: 1200px;
}