/* ============================================
   杭州广耀工贸有限公司 - CSS变量系统
   ============================================ */

:root {
  /* ========== 颜色系统 ========== */
  /* 主题色 - 工业橙 */
  --color-primary: #FF5722;
  --color-primary-light: #FF784E;
  --color-primary-dark: #E64A19;
  
  /* 辅助色 - 钢铁灰 */
  --color-secondary: #607D8B;
  --color-secondary-light: #78909C;
  --color-secondary-dark: #455A64;
  
  /* 强调色 - 能源黄 */
  --color-accent: #FFC107;
  --color-accent-dark: #E0A106;
  
  /* 文本颜色 */
  --color-text-dark: #1F2933;
  --color-text-medium: #52606D;
  --color-text-light: #9AA5B1;
  --color-text-white: #FFFFFF;
  
  /* 背景颜色 */
  --color-background: #F4F6F8;
  --color-background-light: #FFFFFF;
  --color-background-dark: #ECEFF1;
  --color-background-darker: #1C252E;
  
  /* 边框颜色 */
  --color-border: #D9E2EC;
  --color-border-light: #E4EBF3;
  --color-border-strong: #607D8B;
  
  /* 状态颜色 */
  --color-success: #4CAF50;
  --color-warning: #FFC107;
  --color-error: #E53935;
  --color-info: #0288D1;
  
  /* 悬停效果颜色 */
  --color-hover: #FF6A3D;
  --color-active: #C63D13;
  
  /* 质感渐变 */
  --gradient-industrial: linear-gradient(135deg, rgba(255, 87, 34, 0.95) 0%, rgba(96, 125, 139, 0.95) 60%, rgba(28, 37, 46, 0.98) 100%);
  --gradient-steel: linear-gradient(135deg, #1F2A35 0%, #37474F 45%, #263238 100%);
  --gradient-energy: linear-gradient(135deg, #FFC107 0%, #FF9800 45%, #FF5722 100%);
  
  /* ========== 字体系统 ========== */
  /* 字体族 */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Source Han Sans SC', 'Microsoft YaHei', sans-serif;
  --font-family-heading: 'Source Han Sans SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'Courier New', 'Courier', monospace;
  
  /* 字号 */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;
  
  /* 标题字号 */
  --font-size-h1: 3rem;      /* 48px */
  --font-size-h2: 2.5rem;    /* 40px */
  --font-size-h3: 2rem;      /* 32px */
  --font-size-h4: 1.5rem;    /* 24px */
  --font-size-h5: 1.25rem;   /* 20px */
  --font-size-h6: 1rem;      /* 16px */
  
  /* 行高 */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.8;
  --line-height-loose: 2;
  
  /* 字重 */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* ========== 间距系统 ========== */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 80px;
  --spacing-5xl: 96px;
  
  /* 内边距快捷方式 */
  --padding-xs: var(--spacing-xs);
  --padding-sm: var(--spacing-sm);
  --padding-md: var(--spacing-md);
  --padding-lg: var(--spacing-lg);
  --padding-xl: var(--spacing-xl);
  
  /* 外边距快捷方式 */
  --margin-xs: var(--spacing-xs);
  --margin-sm: var(--spacing-sm);
  --margin-md: var(--spacing-md);
  --margin-lg: var(--spacing-lg);
  --margin-xl: var(--spacing-xl);
  
  /* ========== 圆角系统 ========== */
  --border-radius-none: 0;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-2xl: 16px;
  --border-radius-full: 9999px;
  
  /* ========== 阴影系统 ========== */
  --box-shadow-none: none;
  --box-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
  --box-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --box-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);
  --box-shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.2);
  
  /* 悬停阴影 */
  --box-shadow-hover: 0 12px 24px rgba(255, 87, 34, 0.2);
  --box-shadow-metal: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(12, 20, 26, 0.25);
  
  /* ========== 边框 ========== */
  --border-width-thin: 1px;
  --border-width-base: 1px;
  --border-width-thick: 2px;
  --border-width-thicker: 3px;
  
  /* ========== 过渡/动画 ========== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* ========== 断点 ========== */
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1440px;
  
  /* ========== Z-Index 层级 ========== */
  --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;
  
  /* ========== 容器宽度 ========== */
  --container-width-sm: 540px;
  --container-width-md: 720px;
  --container-width-lg: 960px;
  --container-width-xl: 1140px;
  --container-width-2xl: 1320px;
  
  /* ========== Grid系统 ========== */
  --grid-columns: 12;
  --grid-gap: var(--spacing-md);
  --grid-gap-lg: var(--spacing-lg);
}

/* ========== 响应式断点媒体查询 ========== */

/* 平板电脑及以上 */
@media (min-width: 768px) {
  :root {
    --font-size-base: 16px;
    --font-size-h1: 3.5rem;
    --font-size-h2: 2.75rem;
    --font-size-h3: 2.25rem;
  }
}

/* 桌面及以上 */
@media (min-width: 1024px) {
  :root {
    --font-size-base: 16px;
    --font-size-h1: 4rem;
    --font-size-h2: 3rem;
    --font-size-h3: 2.5rem;
  }
}

/* 大屏桌面 */
@media (min-width: 1200px) {
  :root {
    --font-size-base: 16px;
  }
}