/* 自定义CSS变量和基础样式 */
:root {
    /* 语义化颜色体系 - 基础色 */
    --color-primary: 59 130 246;    /* #3b82f6 - 蓝色 */
    --color-secondary: 107 114 128; /* #6b7280 - 灰色 */
    --color-accent: 239 68 68;      /* #ef4444 - 红色 */
    
    /* 语义化颜色体系 - 上下文色 */
    --color-foreground: 17 24 39;   /* #111827 - 深灰/黑 */
    --color-muted-foreground: 107 114 128; /* #6b7280 */
    --color-border: 229 231 235;    /* #e5e7eb - 浅灰 */
    --color-muted: 249 250 251;     /* #f9fafb - 浅白灰 */
    --color-card: 255 255 255;      /* #ffffff - 白色 */
}

.dark-mode {
    /* 暗色主题变量 */
    --color-primary: 96 165 250;    /* #60a5fa - 浅蓝色 */
    --color-foreground: 243 244 246; /* #f3f4f6 - 浅灰 */
    --color-muted-foreground: 156 163 175; /* #9ca3af */
    --color-border: 55 65 81;       /* #374151 - 深灰 */
    --color-muted: 31 41 55;        /* #1f2937 - 深灰 */
    --color-card: 17 24 39;         /* #111827 - 深灰/黑 */
}

/* 应用语义化颜色类 */
.bg-card { background-color: rgb(var(--color-card)); }
.bg-muted { background-color: rgb(var(--color-muted)); }
.text-foreground { color: rgb(var(--color-foreground)); }
.text-muted-foreground { color: rgb(var(--color-muted-foreground)); }
.border-border { border-color: rgb(var(--color-border)); }
.bg-primary { background-color: rgb(var(--color-primary)); }
.text-primary { color: rgb(var(--color-primary)); }
.bg-accent { background-color: rgb(var(--color-accent)); }
.text-accent { color: rgb(var(--color-accent)); }

/* 自定义动画 */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in { animation: fade-in 0.5s ease-out; }
.animate-slide-up { animation: slide-up 0.4s ease-out; }
.animate-scale-in { animation: scale-in 0.3s ease-out; }

/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgb(var(--color-muted));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgb(var(--color-border));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--color-muted-foreground));
}

/* 表单元素焦点样式 */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--color-primary), 0.1);
}

/* 响应式调整 */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    #uploadArea {
        padding: 1.5rem;
    }
}

/* 打印样式 */
@media print {
    header, footer, button {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}