/* CSS变量定义 */
:root {
    --coffee-dark: #4A2C2A;
    --coffee-medium: #6B4423;
    --tech-blue: #3A86FF;
    --bg-light: #F5F1EA;
    --latte-gold: #D4A574;
    --white: #FFFFFF;
}

/* 全局样式 */
body {
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background-color: var(--bg-light);
}

/* 渐变背景 */
.gradient-coffee {
    background: linear-gradient(135deg, var(--coffee-dark) 0%, var(--coffee-medium) 100%);
}

.gradient-tech {
    background: linear-gradient(135deg, var(--tech-blue) 0%, #6366F1 100%);
}

/* 卡片悬停效果 */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(74, 44, 42, 0.2);
}

/* 咖啡纹理背景 */
.coffee-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234A2C2A' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* 导航链接样式 */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--latte-gold);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* 按钮样式 */
.btn-primary {
    background: linear-gradient(135deg, var(--coffee-dark) 0%, var(--coffee-medium) 100%);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(74, 44, 42, 0.3);
}

.btn-secondary {
    border: 2px solid var(--tech-blue);
    color: var(--tech-blue);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: var(--tech-blue);
    color: white;
}

/* AI发光效果 */
.ai-glow {
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 10px var(--tech-blue);
    }
    to {
        box-shadow: 0 0 20px var(--tech-blue), 0 0 30px var(--tech-blue);
    }
}

/* 平滑滚动 */
.scroll-smooth {
    scroll-behavior: smooth;
}
