@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --brand-bg: #f8f6f4;
    --brand-white: #ffffff;
    --brand-primary: #09090b;
    --brand-gray: #71717a;
    --brand-accent: #b1584a;
    --brand-shadow: 0 5px 10px rgba(0, 0, 0, 0.06);
}

.dark {
    --brand-bg: #09090b;
    /* 深黑背景 */
    --brand-white: #18181b;
    /* 卡片深灰背景 */
    --brand-primary: #f4f4f5;
    /* 浅灰/白字 */
    --brand-gray: #a1a1aa;
    /* 次级文字 */
    --brand-accent: #b1584a;
    /* 保持强调色，或者稍微亮一点 */
    --brand-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

body {
    background-color: var(--brand-bg);
    color: var(--brand-primary);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.3s, color 0.3s;
}

/* 导航栏样式 */
.nav-link {
    color: var(--brand-gray);
    transition: all 0.2s;
}

.nav-link:hover {
    color: var(--brand-accent);
}

.nav-link.active {
    color: var(--brand-accent);
    font-weight: 600;
    border-bottom: 2px solid var(--brand-accent);
}

/* 搜索框 */
.search-input {
    background: var(--brand-white);
    border: 1px solid #e4e4e7;
    border-radius: 9999px;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    width: 100%;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.dark .search-input {
    border-color: #27272a;
    color: var(--brand-primary);
}

.search-input:focus {
    outline: none;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 2px rgba(177, 88, 74, 0.1);
}

/* 数字字体优化 */
.font-numbers {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* 文本截断 */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 隐藏滚动条但保持滚动功能 */
.scrollbar-hide {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari and Opera */
}

/* 平滑滚动 */
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}