/* 基础样式配置 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
    }
    .bg-blur {
        backdrop-filter: blur(8px);
    }
}

/* 全局样式 */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
}

/* 动画效果 */
.animate-fade-in {
    animation: fadeIn 0.8s ease forwards;
    opacity: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 统计卡片效果 */
.stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 导航栏滚动效果 */
.nav-scrolled {
    background-color: rgba(22, 82, 132, 0.95);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 计数器动画 */
.counter {
    counter-reset: count 0;
    animation: countUp 2s forwards;
}

/* 自定义颜色变量 */
:root {
    --primary: #165284; /* 主色调-深蓝色 */
    --accent: #36B37E; /* 强调色-绿色 */
    --light: #F5F5F5;
    --neutral: #666666;
}

/* 颜色类 */
.bg-primary {
    background-color: #165284;
}

.text-primary {
    color: #165284;
}

.bg-accent {
    background-color: #36B37E;
}

.text-accent {
    color: #36B37E;
}

.bg-light {
    background-color: #F5F5F5;
}

.text-neutral {
    color: #666666;
}