/* Tailwind配置 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 配置Tailwind自定义颜色 */
@layer base {
    :root {
        --color-primary: #3B82F6;
        --color-secondary: #10B981;
        --color-accent: #6366F1;
        --color-neutral: #1F2937;
    }
    
    /* 确保Tailwind能识别自定义颜色 */
    * {
        @apply transition-colors duration-200;
    }
    
    body2 {
        font-family: Inter, system-ui, sans-serif;
        background-color: #f3f4f6;
    }
    
    /* 增强头部标题和描述的可见性 */
    header2 {
        background: linear-gradient(to right, var(--color-primary), var(--color-accent)) !important;
    }
    
    /* 确保头部文字为白色，提高可读性 */
    header2 h1 {
        color: white !important;
    }
    
    header2 p {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    h1, h2, h3 {
        color: var(--color-neutral);
    }
    
    p {
        color: #4B5563;
    }

    .footer_custom_text p {
        color: #4B5563;
		display: flex;
		justify-content: center; /* 水平居中 */
		gap: 8px; /* 可选：设置链接之间的间距 */
		flex-wrap: nowrap; /* 禁止换行（默认就是不换行） */
		margin: 0; /* 可根据需要调整 */
		padding: 0;
    }
    
    /* 确保按钮颜色正确 */
    .bg-primary {
        background-color: var(--color-primary) !important;
    }
    
    .bg-secondary {
        background-color: var(--color-secondary) !important;
    }
    
    .text-primary {
        color: var(--color-primary) !important;
    }
    
    .text-secondary {
        color: var(--color-secondary) !important;
    }
    
    .text-neutral {
        color: var(--color-neutral) !important;
    }

    .max-w-5xl {
        max-width: 78rem !important;
    }
}

/* 自定义工具类 */
@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .card-shadow {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    }
    .input-focus {
        @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
    }
    .btn-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5;
    }
    .fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}