/* 金属灰色主题 - 统一网站风格 */

/* 颜色变量定义 */
:root {
    /* 主色调 - 金属灰色系 */
    --metal-primary: #2c3e50;      /* 深金属灰 */
    --metal-secondary: #34495e;    /* 中金属灰 */
    --metal-light: #5d6d7e;        /* 浅金属灰 */
    --metal-lighter: #85929e;      /* 更浅金属灰 */
    --metal-accent: #95a5a6;       /* 金属灰强调色 */
    
    /* 背景色 */
    --bg-primary: #ecf0f1;         /* 主背景色 - 浅灰 */
    --bg-secondary: #f8f9fa;       /* 次背景色 - 更浅灰 */
    --bg-dark: #2c3e50;            /* 深背景色 */
    
    /* 文字颜色 */
    --text-primary: #2c3e50;       /* 主文字色 - 深灰 */
    --text-secondary: #34495e;     /* 次文字色 - 中灰 */
    --text-light: #7f8c8d;         /* 浅文字色 */
    --text-white: #ffffff;         /* 白色文字 */
    
    /* 边框和阴影 */
    --border-color: #bdc3c7;       /* 边框色 */
    --shadow-light: rgba(44, 62, 80, 0.1);  /* 浅阴影 */
    --shadow-medium: rgba(44, 62, 80, 0.2); /* 中阴影 */
    --shadow-dark: rgba(44, 62, 80, 0.3);   /* 深阴影 */
    
    /* 渐变 */
    --gradient-primary: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    --gradient-secondary: linear-gradient(135deg, #34495e 0%, #5d6d7e 100%);
    --gradient-light: linear-gradient(135deg, #ecf0f1 0%, #f8f9fa 100%);
}

/* 全局样式覆盖 */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* 导航栏 - 金属灰色主题 */
.navbar {
    background: var(--gradient-primary);
    box-shadow: 0 2px 15px var(--shadow-medium);
}

.nav-link:hover {
    color: var(--metal-accent);
}

.nav-link.active {
    color: var(--metal-accent);
}

.nav-logo i {
    color: var(--metal-accent);
}

/* 下拉菜单 */
.dropdown-content {
    background: var(--bg-secondary);
    box-shadow: 0 8px 25px var(--shadow-medium);
    border: 1px solid var(--border-color);
}

.dropdown-content a {
    color: var(--text-primary);
}

.dropdown-content a:hover {
    background: var(--metal-accent);
    color: var(--text-white);
}

/* 页面头部 - 统一金属灰色 */
.page-header {
    background: var(--gradient-primary);
    color: var(--text-white);
}

.page-title {
    color: var(--text-white);
}

.page-subtitle {
    color: var(--text-white);
    opacity: 0.9;
}

/* 首页英雄区域 - 金属灰色主题 */
.hero {
    background: var(--gradient-light);
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.05) 0%, rgba(52, 73, 94, 0.05) 100%);
    pointer-events: none;
}

.hero-title {
    color: var(--text-primary);
}

.hero-subtitle {
    color: var(--text-secondary);
}

/* 按钮样式 - 金属灰色主题 */
.btn-primary {
    background: var(--gradient-primary);
    color: var(--text-white);
    border: none;
    box-shadow: 0 4px 15px var(--shadow-medium);
}

.btn-primary:hover {
    background: var(--gradient-secondary);
    box-shadow: 0 6px 20px var(--shadow-dark);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--metal-primary);
}

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

/* 卡片样式 - 金属灰色主题 */
.category-card,
.product-card,
.advantage-card,
.certification-item,
.team-member {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 5px 15px var(--shadow-light);
    transition: all 0.3s ease;
}

.category-card:hover,
.product-card:hover,
.advantage-card:hover,
.certification-item:hover,
.team-member:hover {
    box-shadow: 0 10px 25px var(--shadow-medium);
    transform: translateY(-3px);
    border-color: var(--metal-accent);
}

/* 图标背景 - 金属灰色 */
.category-icon,
.advantage-icon {
    background: var(--gradient-primary);
}

.category-icon i,
.advantage-icon i {
    color: var(--text-white);
}

/* 标题样式 - 金属灰色 */
.section-title,
.about-text h2,
.about-text h3,
.advantage-card h3,
.certification-item h4,
.team-member h3 {
    color: var(--text-primary);
}

/* 文字样式 - 金属灰色 */
.about-text p,
.advantage-card p,
.certification-item p,
.team-member .bio,
.team-member .position {
    color: var(--text-secondary);
}

/* 产品图片容器 */
.product-image {
    background: var(--gradient-light);
    border: 1px solid var(--border-color);
}

/* 表单样式 - 金属灰色主题 */
.form-group input,
.form-group textarea,
.form-group select {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--metal-primary);
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

/* 表格样式 - 金属灰色主题 */
.products-table table {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.products-table th {
    background: var(--metal-primary);
    color: var(--text-white);
}

.products-table tr:hover {
    background: rgba(44, 62, 80, 0.05);
}

/* 页脚 - 金属灰色主题 */
.footer {
    background: var(--gradient-primary);
    color: var(--text-white);
}

.footer-section h3 {
    color: var(--text-white);
}

.footer-section p,
.footer-section ul li a {
    color: rgba(255, 255, 255, 0.8);
}

.footer-section ul li a:hover {
    color: var(--metal-accent);
}

/* 联系信息样式 */
.contact-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.contact-item i {
    color: var(--metal-primary);
}

.contact-item h4 {
    color: var(--text-primary);
}

.contact-item p {
    color: var(--text-secondary);
}

/* 产品筛选区域 - 基础样式，具体样式在products.css中定义 */
.product-filters {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.filter-controls {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* 响应式设计保持 */
@media (max-width: 768px) {
    .hero .container {
        background: var(--bg-primary);
    }
}

/* 特殊效果 */
.metal-glow {
    box-shadow: 0 0 20px rgba(44, 62, 80, 0.2);
}

.metal-border {
    border: 2px solid var(--metal-primary);
}

.metal-text {
    color: var(--text-primary);
    font-weight: 600;
}