/**
 * CSS 变量定义
 * 包含全局颜色、间距、阴影等变量
 */

:root {
    /* 品牌主色（统一为 #165DFF，避免与 --accent-blue / theme 出现近似色温差异） */
    --brand-primary: #165DFF;
    --brand-bg: #f5f7fa;
    --accent-blue: #165DFF;
    --accent-gold: #fbbf24;
    
    /* 毛玻璃效果变量 */
    --glass-white: rgba(255, 255, 255, 0.7);
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-surface: rgba(255, 255, 255, 0.7);
    --glass-border: 1px solid rgba(255, 255, 255, 0.9);
    --glass-border-color: rgba(255, 255, 255, 0.4);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 1);
    --glass-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.03);
    --glass-shadow-color: rgba(0, 0, 0, 0.015);
    
    /* 边框和文字颜色 */
    --border-subtle: rgba(31, 35, 41, 0.08);
    --border-color: rgba(226, 232, 240, 0.8);
    --text-main: #1f2329;
    --text-sub: #646a73;
    
    /* 第三屏 3D 引擎变量 */
    --primary-engine: #165DFF;
    --primary-light-engine: #E8F3FF;
    --iso-angle-x: 55deg;
    --iso-angle-z: -45deg;
    
    /* 流程插画变量 */
    --accent-glow: rgba(22, 93, 255, 0.05);
    
    /* 建模插画变量 */
    --inst-sketch-stroke: #cbd5e1;
    --inst-text-main: #1e293b;
    --inst-text-sub: #64748b;
    --inst-glass-surface: rgba(255, 255, 255, 0.65);
    --inst-glass-border: rgba(255, 255, 255, 0.8);
    --inst-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    
    /* 响应式断点 */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* 第五屏预览区变量 */
#preview-5 {
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --border-subtle: #e2e8f0;
    --border-focus: #3b82f6;
    --text-main: #0f172a;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --primary: #3b82f6;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* 第六屏预览区变量 */
#preview-6 {
    --bg-body: #f8fafc;
    --bg-surface: #ffffff;
    --border-subtle: #e2e8f0;
    --border-focus: #3b82f6;
    --text-main: #0f172a;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --primary: #3b82f6;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}