/**
 * 千讼设计系统 - 统一的设计变量和基础样式
 * 用于全站统一的配色、字体、间距等设计规范
 */

:root {
    /* ========== 配色系统 ========== */
    
    /* 主色调 - Manus Zinc风格：深锌色提供良好对比 */
    --qs-primary: #3f3f46;            /* 主色：Zinc 700 - 深锌色 */
    --qs-primary-hover: #52525b;      /* 主色悬停：Zinc 600 */
    --qs-primary-light: #f4f4f5;     /* 主色浅色：Zinc 100 */
    --qs-primary-dark: #27272a;       /* 主色深色：Zinc 800 */
    
    /* 强调色 - Manus风格：Indigo蓝作为点缀色 */
    --qs-accent: #4f46e5;             /* 强调色：Indigo 600 - 蓝紫色 */
    --qs-accent-hover: #4338ca;       /* 强调色悬停：Indigo 700 */
    --qs-accent-soft: #eef2ff;        /* 强调色浅色：Indigo 50 */
    
    /* 交互色 - Manus风格：清晰的交互反馈 */
    --qs-interactive: #e4e4e7;        /* 交互背景：Zinc 200 */
    --qs-interactive-hover: #d4d4d8;  /* 交互悬停：Zinc 300 */
    
    /* 背景色 - Manus风格：清晰层次的中性色 */
    --qs-bg: #fafafa;                  /* 主背景：清晰的浅灰 */
    --qs-bg-secondary: #f4f4f5;       /* 次背景：Zinc 100（侧边栏） */
    --qs-bg-tertiary: #e4e4e7;        /* 三级背景：Zinc 200 */
    --qs-surface: #ffffff;             /* 表面色：纯白 */
    --qs-surface-elevated: #ffffff;    /* 提升表面 */
    --qs-surface-hover: #f4f4f5;      /* 悬停表面 */
    
    /* 边框色 - Manus风格：清晰的边界定义 */
    --qs-border: #e4e4e7;             /* 标准边框：Zinc 200 */
    --qs-border-light: #f1f1f1;      /* 浅边框 */
    --qs-border-dark: #a1a1aa;       /* 深边框 */
    
    /* 文本色 - Manus风格：良好的可读性 */
    --qs-text: #3f3f46;                /* 主文本：Zinc 700 */
    --qs-text-secondary: #52525b;     /* 次文本：Zinc 600 */
    --qs-text-muted: #71717a;         /* 弱文本：Zinc 500 */
    --qs-text-disabled: #a1a1aa;      /* 禁用文本：Zinc 400 */
    
    /* 语义化颜色 */
    --qs-success: #10b981;            /* 成功 */
    --qs-success-light: #d1fae5;      /* 成功浅色 */
    --qs-warning: #f59e0b;             /* 警告 */
    --qs-warning-light: #fef3c7;      /* 警告浅色 */
    --qs-error: #ef4444;               /* 错误 */
    --qs-error-light: #fee2e2;        /* 错误浅色 */
    --qs-info: #3b82f6;                /* 信息 */
    --qs-info-light: #dbeafe;         /* 信息浅色 */
    
    /* ========== 字体系统 ========== */
    
    /* 字体族 - 优化中文字体支持 */
    --qs-font-family: 
        -apple-system, 
        BlinkMacSystemFont, 
        'Segoe UI', 
        'PingFang SC', 
        'Hiragino Sans GB', 
        'Microsoft YaHei', 
        'WenQuanYi Micro Hei',
        'Noto Sans SC',
        sans-serif;
    
    /* 品牌字体 - 更现代的中文衬线 */
    --qs-font-brand: 
        'Songti SC', 
        'STSong', 
        'Noto Serif SC', 
        'Source Han Serif SC',
        'Times New Roman', 
        serif;
    
    /* 等宽字体 */
    --qs-font-mono: 
        'SF Mono', 
        'Monaco', 
        'Menlo', 
        'Consolas', 
        'Liberation Mono', 
        'Courier New', 
        monospace;
    
    /* 字体大小 */
    --qs-font-xs: 11px;
    --qs-font-sm: 12px;
    --qs-font-base: 14px;
    --qs-font-md: 16px;
    --qs-font-lg: 18px;
    --qs-font-xl: 20px;
    --qs-font-2xl: 24px;
    --qs-font-3xl: 30px;
    
    /* 字重 */
    --qs-font-normal: 400;
    --qs-font-medium: 500;
    --qs-font-semibold: 600;
    --qs-font-bold: 700;
    
    /* 行高 */
    --qs-leading-tight: 1.25;
    --qs-leading-normal: 1.5;
    --qs-leading-relaxed: 1.75;
    
    /* 字间距 */
    --qs-tracking-tight: -0.025em;
    --qs-tracking-normal: 0;
    --qs-tracking-wide: 0.025em;
    --qs-tracking-wider: 0.05em;
    
    /* ========== 间距系统 ========== */
    
    --qs-space-1: 4px;
    --qs-space-2: 8px;
    --qs-space-3: 12px;
    --qs-space-4: 16px;
    --qs-space-5: 20px;
    --qs-space-6: 24px;
    --qs-space-8: 32px;
    --qs-space-10: 40px;
    --qs-space-12: 48px;
    --qs-space-16: 64px;
    
    /* ========== 圆角系统 - Manus风格：中等圆角 ========== */
    
    --qs-radius-sm: 6px;
    --qs-radius-md: 8px;
    --qs-radius-lg: 10px;              /* Manus风格：标准圆角 */
    --qs-radius-xl: 12px;
    --qs-radius-2xl: 16px;
    --qs-radius-full: 9999px;
    
    /* ========== 视觉效果系统 - Manus风格 ========== */
    
    --qs-glow-subtle: 0 0 0 1px rgba(79, 70, 229, 0.1);
    --qs-glow-strong: 0 0 0 2px rgba(79, 70, 229, 0.2);
    --qs-backdrop-blur: blur(8px);
    
    /* ========== 阴影系统 - Manus风格：适度的层次感 ========== */
    
    --qs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --qs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --qs-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --qs-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --qs-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    --qs-shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    --qs-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);  /* Manus风格：适度阴影 */
    
    /* 内阴影 */
    --qs-shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    
    /* ========== 过渡动画 ========== */
    
    --qs-transition-fast: 150ms ease;
    --qs-transition-base: 200ms ease;
    --qs-transition-slow: 300ms ease;
    
    /* ========== Z-index 层级 ========== */
    
    --qs-z-base: 1;
    --qs-z-dropdown: 1000;
    --qs-z-sticky: 1020;
    --qs-z-fixed: 1030;
    --qs-z-modal-backdrop: 1040;
    --qs-z-modal: 1050;
    --qs-z-popover: 1060;
    --qs-z-tooltip: 1070;
}

/* ========== 暗色模式支持 - Harvey 风格：保持极简 ========== */
@media (prefers-color-scheme: dark) {
    :root {
        --qs-bg: #09090b;
        --qs-bg-secondary: #18181b;
        --qs-bg-tertiary: #27272a;
        --qs-surface: #18181b;
        --qs-surface-elevated: #27272a;
        --qs-surface-hover: #3f3f46;
        
        --qs-border: #3f3f46;
        --qs-border-light: #27272a;
        --qs-border-dark: #52525b;
        
        --qs-text: #fafafa;
        --qs-text-secondary: #d4d4d8;
        --qs-text-muted: #a1a1aa;
        --qs-text-disabled: #71717a;
        
        --qs-primary: #fafafa;
        --qs-primary-hover: #d4d4d8;
        --qs-primary-light: #3f3f46;
        
        --qs-accent: #818cf8;
        --qs-accent-hover: #6366f1;
        --qs-accent-soft: #312e81;
        
        --qs-interactive: #3f3f46;
        --qs-interactive-hover: #52525b;
    }
}

/* ========== 基础重置和优化 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--qs-font-family);
    font-size: var(--qs-font-base);
    line-height: var(--qs-leading-normal);
    color: var(--qs-text);
    background-color: var(--qs-bg);
    -webkit-tap-highlight-color: transparent;
}

/* ========== 焦点状态优化 ========== */
*:focus-visible {
    outline: 2px solid var(--qs-primary);
    outline-offset: 2px;
}

/* ========== 选择文本样式 ========== */
::selection {
    background-color: var(--qs-primary-light);
    color: var(--qs-primary-dark);
}

/* ========== 滚动条样式 - Harvey 风格：极淡 ========== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--qs-border);
    border-radius: var(--qs-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--qs-border-dark);
}

/* ========== 工具类 ========== */
.hidden {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}