/* CSS 主题变量 - 工业模型软件管理平台 */

/* 导入变量配置 */
@import './variables.css';

:root {
  /* ===== 基础颜色常量 ===== */

  /* 核心调色板 - 基础颜色值 */
  --color-primary-base: 42, 92, 170;     /* #2A5CAA */
  --color-primary-light-base: 77, 148, 255;  /* #4d94ff */
  --color-primary-dark-base: 30, 74, 140;    /* #1e4a8c */
  --color-success-base: 76, 175, 80;     /* #4CAF50 */
  --color-warning-base: 255, 152, 0;     /* #FF9800 */
  --color-error-base: 244, 67, 54;       /* #F44336 */
  --color-info-base: 33, 150, 243;       /* #2196F3 */
  --color-bg-primary-base: 30, 30, 30;   /* #1E1E1E */
  --color-bg-secondary-base: 42, 42, 42; /* #2A2A2A */
  --color-bg-tertiary-base: 26, 26, 26;  /* #1A1A1A */
  --color-white-base: 255, 255, 255;     /* #ffffff */
  --color-black-base: 0, 0, 0;           /* #000000 */

  /* ===== 语义化颜色系统 ===== */

  /* 主色调 */
  --color-primary: rgb(var(--color-primary-base));
  --color-primary-light: rgb(var(--color-primary-light-base));
  --color-primary-dark: rgb(var(--color-primary-dark-base));
  --color-primary-gradient: linear-gradient(135deg, rgb(var(--color-primary-base)) 0%, rgb(var(--color-primary-light-base)) 100%);
  --color-primary-gradient-hover: linear-gradient(135deg, rgb(var(--color-primary-dark-base)) 0%, rgb(var(--color-primary-base)) 100%);

  /* 状态色 */
  --color-success: rgb(var(--color-success-base));
  --color-warning: rgb(var(--color-warning-base));
  --color-error: rgb(var(--color-error-base));
  --color-info: rgb(var(--color-info-base));
  
  /* 背景状态色 */
  --color-bg-error: rgba(var(--color-error-base), 0.1);
  --color-bg-success: rgba(var(--color-success-base), 0.1);
  --color-bg-warning: rgba(var(--color-warning-base), 0.1);
  --color-bg-info: rgba(var(--color-info-base), 0.1);

  /* 背景色 */
  --color-bg-primary: rgb(var(--color-bg-primary-base));
  --color-bg-secondary: rgb(var(--color-bg-secondary-base));
  --color-bg-tertiary: rgb(var(--color-bg-tertiary-base));
  --color-bg-quaternary: rgb(37, 37, 37);
  --color-bg-card: rgba(var(--color-bg-secondary-base), 0.8);
  --color-bg-hover: rgba(var(--color-white-base), 0.05);
  --color-bg-active: rgba(var(--color-primary-base), 0.1);
  --color-bg-input: rgba(var(--color-white-base), 0.05);

  /* 渐变背景 */
  --color-bg-gradient-main: linear-gradient(135deg, rgb(var(--color-bg-primary-base)) 0%, rgb(var(--color-bg-secondary-base)) 100%);
  --color-bg-gradient-sidebar: linear-gradient(135deg, rgb(var(--color-bg-tertiary-base)) 0%, rgb(37, 37, 37) 100%);
  --color-bg-gradient-header: linear-gradient(135deg, rgb(var(--color-bg-tertiary-base)) 0%, rgb(37, 37, 37) 100%);
  --color-bg-gradient-brand: var(--color-primary-gradient);
  --color-bg-gradient-brand-hover: var(--color-primary-gradient-hover);

  /* 边框色 */
  --color-border-primary: rgba(var(--color-white-base), 0.1);
  --color-border-secondary: rgba(var(--color-white-base), 0.2);
  --color-border-active: var(--color-primary);
  --color-border-error: var(--color-error);
  
  /* 文字色 */
  --color-text-primary: rgb(var(--color-white-base));
  --color-text-secondary: rgb(204, 204, 204);
  --color-text-tertiary: rgb(136, 136, 136);
  --color-text-quaternary: rgb(102, 102, 102);
  --color-text-disabled: rgb(153, 153, 153);
  --color-text-error: var(--color-error);

  /* 特殊文字色 */
  --color-text-orange: rgb(255, 107, 53);
  --color-text-red: rgb(255, 0, 0);
  --color-text-blue: rgb(0, 100, 200);

  /* 几何复杂度分析主题色 */
  --color-complexity-base: 255, 140, 0;     /* #FF8C00 */
  --color-complexity: rgb(var(--color-complexity-base));
  --color-complexity-bg-1: rgba(var(--color-complexity-base), 0.05);
  --color-complexity-bg-2: rgba(var(--color-complexity-base), 0.08);
  --color-complexity-bg-3: rgba(var(--color-complexity-base), 0.1);
  --color-complexity-border-1: rgba(var(--color-complexity-base), 0.1);
  --color-complexity-border-2: rgba(var(--color-complexity-base), 0.2);
  --color-complexity-border-3: rgba(var(--color-complexity-base), 0.3);
  --color-complexity-border-15: rgba(var(--color-complexity-base), 0.15);

  /* Revit建筑设计主题色 */
  --color-revit-base: 46, 139, 87;          /* #2E8B57 */
  --color-revit: rgb(var(--color-revit-base));
  --color-revit-light-base: 32, 178, 170;   /* #20B2AA */
  --color-revit-light: rgb(var(--color-revit-light-base));
  --color-revit-gradient: linear-gradient(135deg, rgb(var(--color-revit-base)) 0%, rgb(var(--color-revit-light-base)) 100%);
  --color-revit-bg-1: rgba(var(--color-revit-base), 0.05);
  --color-revit-bg-2: rgba(var(--color-revit-base), 0.08);
  --color-revit-bg-3: rgba(var(--color-revit-base), 0.1);
  --color-revit-shadow: rgba(var(--color-revit-base), 0.3);

  /* Revit建筑元素专用颜色 */
  --color-revit-walls-base: 139, 69, 19;    /* #8B4513 */
  --color-revit-walls: rgb(var(--color-revit-walls-base));
  --color-revit-walls-bg: rgba(var(--color-revit-walls-base), 0.1);
  --color-revit-doors-base: 255, 165, 0;    /* #FFA500 */
  --color-revit-doors: rgb(var(--color-revit-doors-base));
  --color-revit-doors-bg: rgba(var(--color-revit-doors-base), 0.1);
  --color-revit-windows-base: 135, 206, 250; /* #87CEEB */
  --color-revit-windows: rgb(var(--color-revit-windows-base));
  --color-revit-windows-bg: rgba(var(--color-revit-windows-base), 0.1);
  --color-revit-floors-base: 105, 105, 105;  /* #696969 */
  --color-revit-floors: rgb(var(--color-revit-floors-base));
  --color-revit-floors-bg: rgba(var(--color-revit-floors-base), 0.1);
  --color-revit-ceilings-base: 220, 220, 220; /* #DCDCDC */
  --color-revit-ceilings: rgb(var(--color-revit-ceilings-base));
  --color-revit-ceilings-bg: rgba(var(--color-revit-ceilings-base), 0.1);
  --color-revit-columns-base: 47, 79, 79;    /* #2F4F4F */
  --color-revit-columns: rgb(var(--color-revit-columns-base));
  --color-revit-columns-bg: rgba(var(--color-revit-columns-base), 0.1);
  --color-revit-beams-base: 160, 82, 45;     /* #A0522D */
  --color-revit-beams: rgb(var(--color-revit-beams-base));
  --color-revit-beams-bg: rgba(var(--color-revit-beams-base), 0.1);
  --color-revit-rooms-base: 221, 160, 221;   /* #DDA0DD */
  --color-revit-rooms: rgb(var(--color-revit-rooms-base));
  --color-revit-rooms-bg: rgba(var(--color-revit-rooms-base), 0.1);
  --color-revit-stairs-base: 70, 130, 180;   /* #4682B4 */
  --color-revit-stairs: rgb(var(--color-revit-stairs-base));
  --color-revit-stairs-bg: rgba(var(--color-revit-stairs-base), 0.1);
  --color-revit-railings-base: 64, 64, 64;   /* #404040 */
  --color-revit-railings: rgb(var(--color-revit-railings-base));
  --color-revit-railings-bg: rgba(var(--color-revit-railings-base), 0.1);

  /* PDMS工厂设计主题色 */
  --color-pdms-base: 255, 107, 53;          /* #FF6B35 */
  --color-pdms: rgb(var(--color-pdms-base));
  --color-pdms-light-base: 247, 147, 30;    /* #F7931E */
  --color-pdms-light: rgb(var(--color-pdms-light-base));
  --color-pdms-gradient: linear-gradient(135deg, rgb(var(--color-pdms-base)) 0%, rgb(var(--color-pdms-light-base)) 100%);
  --color-pdms-bg-1: rgba(var(--color-pdms-base), 0.05);
  --color-pdms-bg-2: rgba(var(--color-pdms-base), 0.08);
  --color-pdms-bg-3: rgba(var(--color-pdms-base), 0.1);
  --color-pdms-shadow: rgba(var(--color-pdms-base), 0.3);

  /* PDMS工厂元素专用颜色 */
  --color-pdms-pipe-base: 59, 130, 246;     /* #3B82F6 */
  --color-pdms-pipe: rgb(var(--color-pdms-pipe-base));
  --color-pdms-pipe-bg: rgba(var(--color-pdms-pipe-base), 0.1);
  --color-pdms-elbo-base: 139, 69, 19;      /* #8B4513 */
  --color-pdms-elbo: rgb(var(--color-pdms-elbo-base));
  --color-pdms-elbo-bg: rgba(var(--color-pdms-elbo-base), 0.1);
  --color-pdms-valve-base: 220, 38, 127;    /* #DC267F */
  --color-pdms-valve: rgb(var(--color-pdms-valve-base));
  --color-pdms-valve-bg: rgba(var(--color-pdms-valve-base), 0.1);
  --color-pdms-fitting-base: 168, 85, 247;  /* #A855F7 */
  --color-pdms-fitting: rgb(var(--color-pdms-fitting-base));
  --color-pdms-fitting-bg: rgba(var(--color-pdms-fitting-base), 0.1);
  --color-pdms-equipment-base: 34, 197, 94; /* #22C55E */
  --color-pdms-equipment: rgb(var(--color-pdms-equipment-base));
  --color-pdms-equipment-bg: rgba(var(--color-pdms-equipment-base), 0.1);
  --color-pdms-structure-base: 156, 163, 175; /* #9CA3AF */
  --color-pdms-structure: rgb(var(--color-pdms-structure-base));
  --color-pdms-structure-bg: rgba(var(--color-pdms-structure-base), 0.1);

  /* 复杂度分析状态颜色 */
  --color-complexity-low-base: 40, 167, 69;    /* #28a745 */
  --color-complexity-low: rgb(var(--color-complexity-low-base));
  --color-complexity-medium-base: 255, 193, 7; /* #ffc107 */
  --color-complexity-medium: rgb(var(--color-complexity-medium-base));
  --color-complexity-high-base: 220, 53, 69;   /* #dc3545 */
  --color-complexity-high: rgb(var(--color-complexity-high-base));
  --color-complexity-critical-base: 139, 0, 0; /* #8B0000 */
  --color-complexity-critical: rgb(var(--color-complexity-critical-base));
  --color-complexity-excellent-base: 34, 139, 34; /* #228B22 */
  --color-complexity-excellent: rgb(var(--color-complexity-excellent-base));
  --color-complexity-high-gradient: linear-gradient(135deg, rgb(var(--color-complexity-high-base)), rgb(200, 35, 51));
  --color-complexity-high-gradient-hover: linear-gradient(135deg, rgb(200, 35, 51), rgb(167, 30, 42));

  /* 复杂度分析背景色 */
  --color-complexity-low-bg: rgba(var(--color-complexity-low-base), 0.1);
  --color-complexity-medium-bg: rgba(var(--color-complexity-medium-base), 0.1);
  --color-complexity-high-bg: rgba(var(--color-complexity-high-base), 0.1);
  --color-complexity-critical-bg: rgba(var(--color-complexity-critical-base), 0.1);
  --color-complexity-excellent-bg: rgba(var(--color-complexity-excellent-base), 0.1);

  /* Creo模型分析工具渐变色 */
  --color-creo-analysis-gradient-1: linear-gradient(135deg, rgb(111, 66, 193), rgb(232, 62, 140));
  --color-creo-analysis-gradient-2: linear-gradient(135deg, rgb(23, 162, 184), rgb(19, 132, 150));
  --color-creo-analysis-gradient-3: linear-gradient(135deg, rgb(40, 167, 69), rgb(32, 201, 151));
  --color-creo-analysis-gradient-4: linear-gradient(135deg, rgb(253, 126, 20), rgb(232, 62, 140));
  --color-creo-analysis-gradient-5: linear-gradient(135deg, rgb(220, 53, 69), rgb(200, 35, 51));

  /* 通用灰色渐变 */
  --color-gradient-gray: linear-gradient(135deg, rgb(102, 102, 102) 0%, rgb(85, 85, 85) 100%);

  /* ===== 优化透明度层级系统 ===== */

  /* 通用透明度常量 */
  --opacity-light: 0.1;
  --opacity-medium: 0.3;
  --opacity-strong: 0.5;

  /* 主色调透明度变体 */
  --color-primary-rgb: rgba(var(--color-primary-base), 0.1);
  --color-primary-rgb-3: rgba(var(--color-primary-base), 0.3);
  --color-primary-rgb-4: rgba(var(--color-primary-base), 0.4);

  /* 成功色透明度变体 */
  --success-color-rgb: var(--color-success-base);
  --color-success-rgb-1: rgba(var(--color-success-base), 0.1);
  --color-success-rgb-3: rgba(var(--color-success-base), 0.3);
  --color-success-rgb-5: rgba(var(--color-success-base), 0.5);

  /* 橙色系透明度变体 */
  --color-orange-base: 255, 152, 0;     /* #FF9800 */
  --color-orange: rgb(var(--color-orange-base));
  --color-orange-rgb-1: rgba(var(--color-orange-base), 0.1);
  --color-orange-rgb-3: rgba(var(--color-orange-base), 0.3);

  /* 状态色透明度变体 */
  --color-error-rgb-1: rgba(var(--color-error-base), 0.1);
  --color-error-rgb-3: rgba(var(--color-error-base), 0.3);

  /* 白色透明度变体（标准5级层级）*/
  --color-white-rgb-05: rgba(var(--color-white-base), 0.05);
  --color-white-rgb-1: rgba(var(--color-white-base), 0.1);
  --color-white-rgb-15: rgba(var(--color-white-base), 0.15);
  --color-white-rgb-2: rgba(var(--color-white-base), 0.2);
  --color-white-rgb-3: rgba(var(--color-white-base), 0.3);

  /* 渐变背景 */
  --color-gradient-brand-bg: linear-gradient(135deg, rgba(var(--color-primary-base), 0.1) 0%, rgba(var(--color-primary-light-base), 0.05) 100%);
  --color-gradient-brand-bg-2: linear-gradient(135deg, rgba(var(--color-primary-base), 0.2) 0%, rgba(var(--color-primary-light-base), 0.1) 100%);
  --color-gradient-success: linear-gradient(135deg, rgba(var(--color-success-base), 0.1) 0%, rgba(var(--color-success-base), 0.05) 100%);
  --color-gradient-info: linear-gradient(135deg, rgba(var(--color-info-base), 0.1) 0%, rgba(var(--color-info-base), 0.05) 100%);
  --color-gradient-warning: linear-gradient(135deg, rgba(var(--color-warning-base), 0.1) 0%, rgba(var(--color-warning-base), 0.05) 100%);

  /* 按钮渐变（不透明） */
  --color-btn-success: linear-gradient(135deg, rgb(var(--color-success-base)) 0%, rgb(76, 175, 80) 100%);
  --color-btn-success-hover: linear-gradient(135deg, rgb(102, 187, 106) 0%, rgb(129, 199, 132) 100%);
  --color-btn-error: linear-gradient(135deg, rgb(var(--color-error-base)) 0%, rgb(239, 83, 80) 100%);
  --color-btn-error-hover: linear-gradient(135deg, rgb(239, 83, 80) 0%, rgb(229, 115, 115) 100%);
  --color-btn-warning: linear-gradient(135deg, rgb(var(--color-warning-base)) 0%, rgb(255, 183, 77) 100%);
  --color-btn-warning-hover: linear-gradient(135deg, rgb(255, 183, 77) 0%, rgb(255, 204, 2) 100%);
  --color-btn-info: linear-gradient(135deg, rgb(var(--color-info-base)) 0%, rgb(66, 165, 245) 100%);
  --color-btn-info-hover: linear-gradient(135deg, rgb(66, 165, 245) 0%, rgb(100, 181, 246) 100%);

  /* 阴影色 - 指向已有变量避免重复 */
  --color-shadow-primary: var(--color-primary-rgb-3);
  --color-shadow-hover: var(--color-primary-rgb-4);
  --color-shadow-card: 0 20px 40px rgba(var(--color-black-base), 0.3);
  --color-shadow-black-1: rgba(var(--color-black-base), 0.1);
  --color-shadow-black-3: rgba(var(--color-black-base), 0.3);

  /* 按钮阴影 */
  --color-shadow-btn: 0 2px 4px rgba(var(--color-black-base), 0.1);
  --color-shadow-btn-success: 0 4px 8px rgba(var(--color-success-base), 0.3);
  --color-shadow-btn-error: 0 4px 8px rgba(var(--color-error-base), 0.3);
  --color-shadow-btn-warning: 0 4px 8px rgba(var(--color-warning-base), 0.3);
  --color-shadow-btn-info: 0 4px 8px rgba(var(--color-info-base), 0.3);

  /* 通用阴影层级 */
  --color-shadow-black-2: rgba(var(--color-black-base), 0.2);
  --color-shadow-lg: 0 8px 32px rgba(var(--color-black-base), 0.3);
  --color-shadow-md: 0 6px 20px rgba(var(--color-black-base), 0.2);
  --color-shadow-sm: 0 2px 8px rgba(var(--color-black-base), 0.3);

  /* Revit专业阴影色 */
  --color-shadow-revit: 0 8px 32px rgba(var(--color-black-base), 0.3);
  --color-shadow-revit-light: 0 6px 20px rgba(var(--color-black-base), 0.2);
  --color-shadow-revit-btn: 0 4px 12px rgba(var(--color-revit-base), 0.3);
  --color-shadow-revit-btn-hover: 0 8px 25px rgba(var(--color-revit-base), 0.4);

  /* 成功色扩展变体 */
  --color-success-shadow: 0 2px 8px rgba(var(--color-success-base), 0.3);

  /* 滚动条 */
  --color-scrollbar-thumb: var(--color-white-rgb-2);
  --color-scrollbar-thumb-hover: var(--color-white-rgb-3);
  --color-scrollbar-track: transparent;
  
  /* ===== 尺寸系统 ===== */
  
  /* 屏幕尺寸 */
  --size-screen-height: 100vh;
  --size-screen-width: 100vw;
  
  /* 布局尺寸 */
  --size-header-height: 60px;
  --size-sidebar-width: 350px;
  --size-sidebar-width-mobile: 320px;
  --size-border-radius: 8px;
  --size-border-radius-card: 12px;
  --size-border-radius-button: 6px;

  /* 信息管理面板尺寸 */
  --size-info-panel-width: 400px;
  --size-info-panel-width-tablet: 350px;
  --size-info-panel-header-height: 60px;

  /* 连接组件尺寸 */
  --size-connection-dot: 8px;
  --size-connection-card-min-height: 120px;
  --size-connection-test-btn: 24px;
  --size-connection-test-btn-small: 20px;
  
  /* 间距系统 - 扩展到覆盖所有常用尺寸 */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  --spacing-5xl: 48px;
  --spacing-6xl: 60px;

  /* 常用固定尺寸 */
  --size-1: 1px;
  --size-2: 2px;
  --size-3: 3px;
  --size-4: 4px;
  --size-6: 6px;
  --size-8: 8px;
  --size-10: 10px;
  --size-12: 12px;
  --size-14: 14px;
  --size-15: 15px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-24: 24px;
  --size-28: 28px;
  --size-30: 30px;
  --size-32: 32px;
  --size-36: 36px;
  --size-40: 40px;
  --size-44: 44px;
  --size-48: 48px;
  --size-52: 52px;
  --size-56: 56px;
  --size-60: 60px;
  --size-64: 64px;
  --size-80: 80px;
  --size-96: 96px;
  --size-120: 120px;
  --size-140: 140px;
  --size-150: 150px;
  --size-200: 200px;

  /* 组件特定间距 */
  --spacing-connection-dot: 8px;
  --spacing-card-padding: 15px;
  --spacing-card-padding-small: 10px;
  --spacing-grid-gap: 10px;
  --spacing-form-gap: 8px;

  /* 边框尺寸 */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;

  /* 响应式断点 */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-large: 1440px;

  /* 图标尺寸系统 */
  --icon-size-xs: 12px;
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-size-xl: 24px;
  --icon-size-2xl: 28px;
  --icon-size-3xl: 32px;
  
  /* 字体大小 */
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-5xl: 32px;
  --font-size-6xl: 48px;
  --font-size-7xl: 64px;

  /* 组件特定字体大小 */
  --font-size-icon: 24px;
  --font-size-icon-small: 10px;
  --font-size-connection-name: 12px;
  
  /* 字体权重 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Z-Index层级 */
  --z-index-header: 1000;
  --z-index-sidebar: 1000;
  --z-index-modal: 1000;
  --z-index-overlay: 999;
  --z-index-dropdown: 998;

  /* ===== 动画系统 ===== */
  --transition-duration: 0.3s;
  --transition-duration-fast: 0.15s;
  --transition-duration-slow: 0.4s;
  --transition-timing: ease;
  --transition-timing-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* 完整过渡样式 */
  --transition-all: all var(--transition-duration) var(--transition-timing);
  --transition-all-smooth: all var(--transition-duration) var(--transition-timing-smooth);

  /* ===== 组件尺寸常量 ===== */
  /* 登录界面常量 */
  --login-animation-large: 200px;
  --login-animation-medium: 150px;
  --login-animation-small: 100px;
  --login-card-max-width: 420px;
  --login-card-padding: 40px;
  --login-card-padding-small: 20px;
  --login-card-border-radius: 16px;
  --login-icon-size: 60px;
  --login-title-size: 24px;
  --login-subtitle-size: 20px;
  --login-text-size: 14px;
  --login-button-text-size: 18px;

  /* 登录界面动画常量 */
  --login-float-distance: -20px;
  --login-float-duration: 6s;
  --login-animation-delay-1: 0s;
  --login-animation-delay-2: 2s;
  --login-animation-delay-3: 4s;

  /* 登录界面位置常量 */
  --login-circle-1-top: 10%;
  --login-circle-1-left: 10%;
  --login-circle-2-top: 60%;
  --login-circle-2-right: 15%;
  --login-circle-3-bottom: 20%;
  --login-circle-3-left: 20%;

  /* 登录界面背景色 */
  --color-bg-dark-95: rgba(var(--color-bg-secondary-base), 0.95);

  /* 登录界面间距常量 */
  --login-brand-margin-bottom: 40px;
  --login-form-title-margin-bottom: 30px;
  --login-form-group-margin-bottom: 20px;
  --login-form-options-margin-bottom: 30px;
  --login-help-margin-top: 20px;
  --login-brand-logo-margin-bottom: 16px;
  --login-brand-title-margin-bottom: 8px;
  --login-error-margin-bottom: 20px;
  --login-form-label-margin-bottom: 8px;
  --login-field-error-margin-top: 4px;

  /* 登录界面按钮常量 */
  --login-button-padding: 14px;
  --login-button-transform: translateY(-2px);
  --login-button-disabled-opacity: 0.7;

  /* 登录界面字体大小（响应式） */
  --login-title-size-mobile: 18px;
  --login-content-padding-mobile: 16px;
  --login-card-padding-mobile: 30px 24px;

  /* 模型查看器常量 */
  --model-viewer-padding: 20px;
  --model-viewer-border-radius: 8px;
  --model-viewer-min-height: 500px;
  --model-viewer-header-gap: 12px;
  --model-viewer-section-margin: 24px;
  --model-viewer-section-padding: 16px;

  /* 表单输入常量 */
  --input-padding-vertical: 12px;
  --input-padding-horizontal: 16px;

  /* 通知持续时间常量 */
  --notification-duration-success: 2000ms;
  --notification-duration-error: 3000ms;
}

/* 亮色主题（可选） */
[data-theme="light"] {
  --color-bg-primary: rgb(var(--color-white-base));
  --color-bg-secondary: rgb(245, 245, 245);
  --color-bg-tertiary: rgb(250, 250, 250);
  --color-bg-quaternary: rgb(238, 238, 238);
  --color-bg-card: rgba(var(--color-white-base), 0.9);
  --color-bg-hover: rgba(var(--color-black-base), 0.05);
  --color-bg-active: rgba(var(--color-primary-base), 0.1);
  --color-bg-input: rgba(var(--color-black-base), 0.02);

  --color-border-primary: rgba(var(--color-black-base), 0.1);
  --color-border-secondary: rgba(var(--color-black-base), 0.2);

  --color-text-primary: rgb(26, 26, 26);
  --color-text-secondary: rgb(51, 51, 51);
  --color-text-tertiary: rgb(102, 102, 102);
  --color-text-quaternary: rgb(153, 153, 153);
  --color-text-disabled: rgb(136, 136, 136);

  --color-shadow-card: 0 20px 40px rgba(var(--color-black-base), 0.1);
}

/* 全局基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

#app {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 通用工具类 */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-error { color: var(--color-text-error); }

.bg-primary { background: var(--color-bg-primary); }
.bg-secondary { background: var(--color-bg-secondary); }
.bg-card { background: var(--color-bg-card); }
.bg-hover:hover { background: var(--color-bg-hover); }

.border-primary { border-color: var(--color-border-primary); }
.border-secondary { border-color: var(--color-border-secondary); }
.border-active { border-color: var(--color-border-active); }

/* 按钮基础样式 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--button-padding-y) var(--button-padding-x);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--size-border-radius-button);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  text-decoration: none;
  line-height: 1;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-primary-gradient);
  border-color: transparent;
  color: var(--color-text-primary);
  box-shadow: 0 4px 15px var(--color-shadow-primary);
}

.btn-primary:hover {
  background: var(--color-primary-gradient-hover);
  box-shadow: 0 6px 20px var(--color-shadow-hover);
}

.btn-secondary {
  background: var(--color-bg-hover);
  border-color: var(--color-border-secondary);
  color: var(--color-text-secondary);
}

.btn-secondary:hover {
  background: var(--color-white-rgb-15);
  color: var(--color-text-primary);
  border-color: var(--color-border-primary);
}

.btn-error {
  background: var(--color-error-rgb-1);
  border-color: var(--color-error-rgb-3);
  color: var(--color-error);
}

.btn-error:hover {
  background: var(--color-error-rgb-1);
  border-color: var(--color-error-rgb-3);
}

/* 输入框基础样式 */
.form-input {
  width: 100%;
  padding: var(--input-padding-y) var(--input-padding-x);
  background: var(--color-bg-input);
  border: var(--input-border-width) solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  transition: all var(--transition-duration) var(--transition-timing);
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-border-active);
  box-shadow: 0 0 0 var(--input-focus-border-width) var(--color-primary-rgb);
  background: var(--color-white-rgb-05);
}

.form-input::placeholder {
  color: var(--color-text-tertiary);
}

.form-input.error {
  border-color: var(--color-border-error);
}

/* 卡片基础样式 */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.card-header {
  padding: var(--spacing-2xl);
  border-bottom: 1px solid var(--color-border-primary);
  background: var(--color-white-rgb-05);
}

.card-body {
  padding: var(--card-padding);
  flex: 1;
  overflow-y: auto;
}

.card-footer {
  padding: var(--spacing-xl) var(--spacing-2xl);
  border-top: 1px solid var(--color-border-primary);
  background: var(--color-white-rgb-05);
}

/* 布局工具类 */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-around { justify-content: space-around; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

/* 常用组合布局类 */
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-center-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center-start { display: flex; align-items: center; justify-content: flex-start; }
.flex-center-end { display: flex; align-items: center; justify-content: flex-end; }
.flex-col-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.h-full { height: 100%; }
.w-full { width: 100%; }
.h-screen { height: 100vh; }
.w-screen { width: 100vw; }

.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* 间距工具类 */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* 动画 */
.transition-all {
  transition: all var(--transition-duration) var(--transition-timing);
}

.transition-colors {
  transition: background-color var(--transition-duration) var(--transition-timing),
              border-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
}

/* 阴影 */
.shadow-card { box-shadow: var(--color-shadow-card); }
.shadow-hover:hover { box-shadow: var(--color-shadow-hover); }

/* 圆角 */
.rounded { border-radius: var(--size-border-radius); }
.rounded-card { border-radius: var(--size-border-radius-card); }
.rounded-button { border-radius: var(--size-border-radius-button); }

/* 玻璃态效果 */
.glass {
  background: var(--color-white-rgb-05);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-white-rgb-1);
}

.glass-hover:hover {
  background: var(--color-white-rgb-05);
  border-color: var(--color-white-rgb-15);
}

/* 常用按钮样式工具类 */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--size-border-radius-button);
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-all);
}

.btn-icon:hover {
  background: var(--color-primary);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}

/* 常用卡片样式 */
.card-hover {
  transition: var(--transition-all);
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--color-shadow-card), 0 8px 25px var(--color-shadow-hover);
}

/* ===== 自定义Loading样式 ===== */
.custom-loading .el-loading-text {
  color: rgba(var(--color-white-base), 0.9) !important;
}