/* 全局样式 */
@import url('fonts.googleapis.com.css');
@import 'themes/light.css';
@import 'themes/dark.css';

:root {
    --primary: #0EA5E9;
    --primary-dark: #0284C7;
}

/* 基础样式 */
html {
    scroll-behavior: smooth;
}

body {
    @apply font-light antialiased text-slate-600 dark:text-slate-300 bg-slate-50 dark:bg-slate-900;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* 通用样式 */
.gradient-text {
    @apply bg-gradient-to-r from-cyan-500 to-emerald-500 bg-clip-text text-transparent;
}

/* 动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

/* 响应式布局 */
.container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* 段落样式 */
.text-content {
    @apply text-gray-600 dark:text-gray-400 text-lg font-light;
}

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
    @apply font-light text-slate-900 dark:text-white;
}

.section-title {
    @apply text-3xl md:text-4xl font-light mb-12 gradient-text text-center;
}

/* 卡片样式 */
.card {
    @apply bg-white dark:bg-slate-800 rounded-lg overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300;
}

/* 按钮样式 */
.btn {
    @apply px-4 py-2 rounded-lg transition-all duration-300;
}

.btn-primary {
    @apply bg-gradient-to-r from-cyan-500 to-emerald-500 text-white hover:from-cyan-600 hover:to-emerald-600;
}

.btn-secondary {
    @apply bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-slate-600;
}

/* 主色调 */
.text-primary {
    color: var(--primary);
}

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

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

.hover\:text-primary:hover {
    color: var(--primary);
}

/* 暗色模式适配 */
.dark .dark\:text-primary {
    color: var(--primary);
}

.dark .dark\:bg-primary {
    background-color: var(--primary);
}

.dark .dark\:hover\:bg-primary:hover {
    background-color: var(--primary);
}

.dark .dark\:hover\:text-primary:hover {
    color: var(--primary);
}

/* 导航菜单文字不换行 */
.nav-menu-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@import './components/Navigation.css';
@import './components/Features.css';
@import './components/Carousel.css';