xiaozhi/jk-rag-platform/src/styles/variables.scss

// ===== 建科小智全局样式变量 v3.2 =====
// 项目：jk-rag-platform
// 更新：2026-03-24
// 说明：更新为企业品牌色彩系统（基于 favicon #005D80）

// ==================== 主题变量 ====================

:root {
    --sidebar-bg: #ffffff;
    --header-bg: #ffffff;
    --header-text-color: #374151;
}

html[data-theme='dark'] {
    --sidebar-bg: #1f2d3d;
    --header-bg: #1f2d3d;
    --header-text-color: #ffffff;
}

html[data-theme='light'] {
    --sidebar-bg: #ffffff;
    --header-bg: #ffffff;
    --header-text-color: #374151;
}

// Less 变量别名
$sidebar-bg: var(--sidebar-bg);
$header-bg: var(--header-bg);
$header-text-color: var(--header-text-color);

// 按钮选中/强调色
html[data-theme='dark'] {
    --btn-selected-bg: #005D80;
    --btn-selected-color: #fff;
}

html[data-theme='light'] {
    --btn-selected-bg: #005D80;
    --btn-selected-color: #fff;
}

$btn-selected-bg: var(--btn-selected-bg);
$btn-selected-color: var(--btn-selected-color);


// ===== 色彩系统（v3.2 更新为企业品牌色）=====

// 主色调 - 企业蓝色系（基于 favicon #005D80）
// 对比度测试：#005D80 on #FFFFFF = 8.02:1 ✅ WCAG AAA
$primary-color: #005D80;        // 企业主色（深度蓝）
$primary-light: #007A99;        // 提亮 20%（悬停/强调），对比度 6.5:1 ✅
$primary-dark: #004060;         // 加深 20%（点击/激活），对比度 10.2:1 ✅
$primary-lightest: #E6F7FA;     // 最浅色（背景点缀）

// 主色渐变（仅用于大图形/按钮背景）
$primary-gradient-start: #00A0CA;  // 渐变起点（亮蓝）
$primary-gradient-end: #005D80;    // 渐变终点（深蓝）

// 辅助色 - 基于企业绿色系 + 功能性颜色
// 成功色：使用加深绿，确保对比度安全
$success-color: #059669;        // 成功色（加深），对比度 4.6:1 ✅ WCAG AA
$success-light: #10B981;        // 成功浅色（仅大图标/背景）
$success-dark: #047857;         // 成功深色（强调）

// 警告色：橙色系
$warning-color: #F59E0B;        // 警告色，对比度 2.9:1 ⚠️ 仅大图形
$warning-light: #FBBF24;        // 警告浅色
$warning-dark: #B45309;         // 警告深色（文字用），对比度 5.8:1 ✅

// 错误色：红色系
$error-color: #DC2626;          // 错误色（加深），对比度 4.5:1 ✅ WCAG AA
$error-light: #EF4444;          // 错误浅色
$error-dark: #B91C1C;           // 错误深色

// 信息色：企业青色
$info-color: #00A0C7;           // 信息色（企业青），对比度 3.8:1 ⚠️ 大图形
$info-light: #06B6D4;           // 信息浅色
$info-dark: #0E7490;            // 信息深色（文字用）

// Chat 专用色（universalChat 使用）
$chat-primary-start: #00A0C7;   // Chat 渐变起点（青）
$chat-primary-end: #08A84C;     // Chat 渐变终点（绿）
$chat-accent: #059669;          // Chat 强调色（加深绿，文字可用）

// 中性色 - 文字
$text-primary: #1F2937;
$text-secondary: #6B7280;
$text-hint: #9CA3AF;
$text-disabled: #D1D5DB;

// 中性色 - 背景
$bg-primary: #F9FAFB;
$bg-secondary: #FFFFFF;
$bg-tertiary: #F3F4F6;
$bg-hover: #F9FAFB;
$bg-active: rgba(0, 93, 128, 0.1);  // 使用新主色的 10% 透明度

// 中性色 - 边框
$border-light: #F3F4F6;
$border-base: #E5E7EB;
$border-dark: #D1D5DB;

// ===== 间距系统（4px 基准）=====

$spacing-1: 4px;
$spacing-2: 8px;
$spacing-3: 12px;
$spacing-4: 16px;
$spacing-5: 20px;
$spacing-6: 24px;
$spacing-7: 28px;
$spacing-8: 32px;
$spacing-9: 36px;
$spacing-10: 40px;
$spacing-12: 48px;
$spacing-16: 64px;

// 快捷别名
$spacing-xs: $spacing-1;
$spacing-sm: $spacing-2;
$spacing-md: $spacing-3;
$spacing-lg: $spacing-4;
$spacing-xl: $spacing-6;
$spacing-2xl: $spacing-8;

// ===== 圆角系统 =====

$radius-sm: 4px;
$radius-md: 6px;
$radius-lg: 8px;
$radius-xl: 12px;
$radius-2xl: 16px;
$radius-full: 9999px;

// 快捷别名
$border-radius-sm: $radius-sm;
$border-radius-md: $radius-md;
$border-radius-lg: $radius-lg;
$border-radius-xl: $radius-xl;
$border-radius-2xl: $radius-2xl;
$border-radius-full: $radius-full;

// ===== 阴影系统 =====

$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
$shadow-glow: 0 0 20px rgba(0, 93, 128, 0.3);  // 使用新主色的发光效果
$shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

// ===== 字体系统 =====

// 字体大小（整体缩小一号）
$font-xs: 8px;      // 9px → 8px
$font-sm: 11px;     // 12px → 11px
$font-base: 12px;   // 13px → 12px
$font-md: 13px;     // 14px → 13px
$font-lg: 14px;     // 15px → 14px
$font-xl: 15px;     // 16px → 15px
$font-2xl: 16px;    // 18px → 16px
$font-3xl: 18px;    // 20px → 18px
$font-4xl: 20px;    // 24px → 20px

// 字重
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;

// 行高（更紧凑）
$line-height-tight: 1.1;    // 1.2 → 1.1
$line-height-base: 1.3;     // 1.4 → 1.3
$line-height-relaxed: 1.4;  // 1.5 → 1.4
$line-height-loose: 1.5;    // 1.6 → 1.5

// 字体家族
$font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$font-family-mono: 'Monaco', 'Consolas', 'Courier New', monospace;

// ===== 动画系统 =====

// 时长
$animation-fast: 0.1s;
$animation-base: 0.2s;
$animation-slow: 0.3s;

// 缓动函数
$easing-default: cubic-bezier(0.4, 0, 0.2, 1);
$easing-in: cubic-bezier(0.4, 0, 1, 1);
$easing-out: cubic-bezier(0, 0, 0.2, 1);
$easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);

// 快捷过渡
$transition-base: all $animation-base $easing-default;
$transition-fast: all $animation-fast $easing-default;
$transition-slow: all $animation-slow $easing-default;

// ===== 响应式断点 =====

$screen-sm: 640px;
$screen-md: 768px;
$screen-lg: 1024px;
$screen-xl: 1280px;
$screen-2xl: 1536px;

// 断点别名（max-width）
$breakpoint-xs: "only screen and (max-width: #{$screen-sm})";
$breakpoint-sm: "only screen and (max-width: #{$screen-md})";
$breakpoint-md: "only screen and (max-width: #{$screen-lg})";
$breakpoint-lg: "only screen and (max-width: #{$screen-xl})";
$breakpoint-xl: "only screen and (max-width: #{$screen-2xl})";

// 断点别名（min-width）
$breakpoint-sm-up: "only screen and (min-width: #{$screen-sm})";
$breakpoint-md-up: "only screen and (min-width: #{$screen-md})";
$breakpoint-lg-up: "only screen and (min-width: #{$screen-lg})";
$breakpoint-xl-up: "only screen and (min-width: #{$screen-xl})";
$breakpoint-2xl-up: "only screen and (min-width: #{$screen-2xl})";

// ===== 布局尺寸 =====

$header-height: 64px;
$sidebar-width: 240px;  // 紧凑布局：256px → 240px
$sidebar-collapsed-width: 80px;
$sidebar-width-md: 200px;  // 中等屏幕（≤1024px）
$logo-size: 40px;
$search-height: 40px;
$breadcrumb-height: 44px;

// 卡片尺寸
$card-padding: $spacing-4;  // 16px
$card-radius: $radius-xl;   // 12px
$card-icon-size: 48px;
$card-btn-size: 28px;
$card-play-btn-size: 36px;

// ===== Z-Index 层级 =====

$z-index-base: 1;
$z-index-dropdown: 100;
$z-index-sticky: 200;
$z-index-fixed: 300;
$z-index-modal-backdrop: 400;
$z-index-modal: 500;
$z-index-popover: 600;
$z-index-tooltip: 700;
$z-index-notification: 800;
$z-index-max: 9999;

// ===== 透明度 =====

$opacity-disabled: 0.5;
$opacity-disabled-light: 0.3;
$opacity-overlay: 0.5;
$opacity-hover: 0.9;
$opacity-active: 0.8;

// ===== 图标尺寸 =====

$icon-xs: 12px;
$icon-sm: 14px;
$icon-md: 16px;
$icon-lg: 18px;
$icon-xl: 20px;
$icon-2xl: 24px;
$icon-3xl: 32px;

// ===== 特殊颜色 =====

// Sidebar 专用颜色
$sidebar-bg: #FFFFFF;             // 白色背景
$sidebar-text-color: #5E5E66;     // 默认文字色（加深）
$sidebar-hover-bg: #F3F4F6;       // 悬停背景
$sidebar-active-color: #131212;   // 激活文字色（深灰近黑）

// 边框颜色别名
$border-color: $border-base;

// 占位符文字颜色
$text-placeholder: $text-hint;

// 主色悬停
$primary-color-hover: $primary-light;

// 缓动别名
$ease-base: $easing-default;

// 卡片图标背景色
$icon-bg-blue: #EFF6FF;
$icon-bg-indigo: #EEF2FF;
$icon-bg-teal: #F0FDFA;
$icon-bg-purple: #FAF5FF;
$icon-bg-rose: #FFF1F2;
$icon-bg-cyan: #ECFEFF;
$icon-bg-amber: #FFFBEB;

// 标签颜色
$tag-bg-slate: #F1F5F9;
$tag-text-slate: #64748B;
$tag-bg-blue: #E6F7FA;         // 更新为企业蓝浅色
$tag-text-blue: #005D80;       // 更新为企业蓝色
$tag-bg-indigo: #E0E7FF;
$tag-text-indigo: #4338CA;
$tag-bg-teal: #CCFBF1;
$tag-text-teal: #0D9488;
$tag-bg-purple: #F3E8FF;
$tag-text-purple: #7E22CE;
$tag-bg-rose: #FFE4E6;
$tag-text-rose: #E11D48;
$tag-bg-cyan: #CFFAFE;
$tag-text-cyan: #0891B2;
$tag-bg-amber: #FEF3C7;
$tag-text-amber: #B45309;

// ===== 混合宏定义 =====

// 文字截断
@mixin text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-truncate {
    @include text-truncate;
}

// 多行文字截断
@mixin text-clamp($lines: 2) {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

// 居中
@mixin center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 隐藏滚动条
@mixin hide-scrollbar {
    &::-webkit-scrollbar {
        display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;
}

// 细边框
@mixin hairline-border {
    position: relative;
    
    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: $border-base;
        transform: scaleY(0.5);
    }
}

// 渐变背景（v3.2 更新为企业蓝色渐变）
@mixin gradient-primary {
    background: linear-gradient(135deg, $primary-gradient-start 0%, $primary-color 100%);
}

// Chat 渐变背景（universalChat 使用）
@mixin gradient-chat {
    background: linear-gradient(135deg, $chat-primary-start 0%, $chat-primary-end 100%);
}

// 阴影快捷方式
@mixin shadow-card {
    box-shadow: $shadow-sm;
    
    &:hover {
        box-shadow: $shadow-lg;
    }
}

// 过渡快捷方式
@mixin transition-base {
    transition: $transition-base;
}

@mixin transition-transform {
    transition: transform $animation-base $easing-default;
}

// 响应式 Mixins
@mixin media-mobile {
    @media (max-width: $screen-md) {
        @content;
    }
}

@mixin media-tablet {
    @media (min-width: $screen-md) and (max-width: $screen-lg) {
        @content;
    }
}

@mixin media-desktop {
    @media (min-width: $screen-lg) {
        @content;
    }
}

// ===== 变量别名（兼容性）=====

// 字体大小别名
$font-size-base: $font-base;
$font-size-xs: $font-xs;
$font-size-sm: $font-sm;
$font-size-md: $font-md;
$font-size-lg: $font-lg;
$font-size-xl: $font-xl;

// 字重别名（兼容简写）
$font-normal: $font-weight-normal;
$font-medium: $font-weight-medium;
$font-semibold: $font-weight-semibold;
$font-bold: $font-weight-bold;

// 圆角别名
$border-radius-base: $radius-md;
$border-radius-sm: $radius-sm;
$border-radius-md: $radius-md;
$border-radius-lg: $radius-lg;

// 主题文字颜色
$theme-text-color: $text-primary;