/* ============================================================
   一品智造 — 设计令牌 & 工具类 (v3.0)
   ============================================================ */

:root {
  /* --- 主色调：中国红 + 橙金发光 --- */
  --color-primary: #D81018;
  --color-primary-hover: #C40E16;
  --color-primary-active: #A80C12;
  --color-primary-light: #FEF0EE;
  --color-secondary: #E85D3A;
  --color-secondary-hover: #D94D2A;
  --color-accent: #FF6030;
  --color-accent-light: #FFD070;
  --color-success: #34c759;
  --color-warning: #FF9F0A;
  --color-error: #FF453A;
  --color-info: #FF6030;
  --color-purple: #D44D8C;
  --color-gold: #D4940A;
  --color-green: #16A34A;

  /* --- 过渡预置 (统一使用) --- */
  --transition-fast: 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-bounce: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- 按商家类型的色系（暖色统一，适配全品类） --- */
  --color-restaurant: #E85D3A;
  --color-restaurant-light: #FEF2ED;
  --color-agriculture: #D4940A;
  --color-agriculture-light: #FEF7E6;
  --color-tourism: #E04040;
  --color-tourism-light: #FDE8E8;
  --color-folk: #D44D8C;
  --color-folk-light: #FCEDF2;
  --color-ice: #FF8C42;
  --color-ice-light: #FFF0E0;

  /* --- 渐变预置（红金暖色系） --- */
  --gradient-primary: linear-gradient(135deg, #D81018, #E85D3A);
  --gradient-accent: linear-gradient(135deg, #D81018, #FF6030);
  --gradient-warm: linear-gradient(135deg, #E85D3A, #FFD070);
  --gradient-nature: linear-gradient(135deg, #D4940A, #FFD070);
  --gradient-ice: linear-gradient(135deg, #FF6030, #FFD070);
  --gradient-folk: linear-gradient(135deg, #D44D8C, #F093B0);

  /* --- 背景 --- */
  --bg-main: #ffffff;
  --bg-card: #ffffff;
  --bg-subtle: #f8f9fc;
  --bg-dark: #2c3e50;
  --bg-hover: rgba(216, 16, 24, 0.06);

  /* --- 扩展背景色板 (v2.0 多层分区) --- */
  --bg-base: #fafbfc;          /* 页面底色，最浅 */
  --bg-surface: #ffffff;       /* 卡片底色 */
  --bg-elevated: #f4f6fb;      /* 卡片悬浮区底色 */
  --bg-highlight: #FEF0EE;
  --bg-warm: #FFF5F0;
  --bg-nature: #FFF8E8;
  --bg-dark-alt: #1A0E0E;

  /* --- 灰阶（模板参考 Dashboard Graph 多层灰阶）--- */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;

  /* --- 文字 --- */
  --text-primary: #1a1a2e;
  --text-secondary: var(--gray-500);
  --text-tertiary: var(--gray-400);
  --text-placeholder: #b0b7c3;
  --text-on-primary: #ffffff;

  /* --- 边框 --- */
  --border-default: #e5e7eb;
  --border-light: #f0f0f0;
  --border-focus: #D81018;

  /* --- 阴影（白色背景上多层阴影）--- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.06), 0 12px 40px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 20px 60px rgba(0,0,0,0.06);
  --shadow-button: 0 1px 2px rgba(0,0,0,0.05);

  /* --- 圆角 --- */
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;      /* 底部弹窗顶部圆角 */
  --radius-input: 12px;    /* 输入框专用 */
  --radius-btn: 14px;      /* 按钮专用 */
  --radius-card: 16px;     /* 卡片专用 */
  --radius-card-lg: 20px;  /* 大卡片 */
  --radius-full: 9999px;

  /* --- 阴影增强（配合圆角）--- */
  --shadow-button-glow: 0 3px 5px rgba(255,130,132,0.28);

  /* --- 间距（基于4px网格）--- */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-base: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;
  --sp-3xl: 64px;

  /* --- 字体 --- */
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-h1: 700 28px/40px var(--font-family);
  --font-h2: 700 22px/32px var(--font-family);
  --font-h3: 600 18px/26px var(--font-family);
  --font-body-l: 400 16px/24px var(--font-family);
  --font-body: 400 14px/22px var(--font-family);
  --font-caption: 400 12px/18px var(--font-family);

  /* --- 导航 --- */
  --nav-height: 52px;
  --tab-height: 56px;
}

/* ============================================================
   全局重置
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 22px;
  color: var(--text-primary);
  background: var(--bg-main);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; height: auto; }

/* ============================================================
   工具类 — 高级感设计语言
   ============================================================ */

/* --- 渐变文字（白底适配）--- */
.text-gradient {
  background: linear-gradient(135deg, #D81018 30%, #FF6030);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-accent {
  background: linear-gradient(135deg, #D81018, #FFD070);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-warm {
  background: linear-gradient(135deg, #E85D3A, #FFD070);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-nature {
  background: linear-gradient(135deg, #D4940A, #FFD070);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Hero 标题 --- */
.hero-title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.hero-subtitle {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* --- Eyebrow (小标) --- */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.8em;
}

/* --- 高级卡片基类 --- */
.premium-card {
  background: var(--bg-card);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base);
}
.premium-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* --- 统计数字 --- */
.stat-num {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(135deg, #D81018, #FF6030);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- 滚动提示动画 (增强) --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), 
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- 带色系的标签着色器 --- */
.color-tag-restaurant { background: var(--color-restaurant-light); color: var(--color-restaurant); border-color: rgba(232,93,58,0.2); }
.color-tag-agriculture { background: var(--color-agriculture-light); color: var(--color-agriculture); border-color: rgba(212,148,10,0.2); }
.color-tag-tourism { background: var(--color-tourism-light); color: var(--color-tourism); border-color: rgba(224,64,64,0.2); }
.color-tag-folk { background: var(--color-folk-light); color: var(--color-folk); border-color: rgba(212,77,140,0.2); }
.color-tag-ice { background: var(--color-ice-light); color: var(--color-ice); border-color: rgba(255,140,66,0.2); }

/* ============================================================
   方案A「赤焰」风格 — 图标细线化 & 配色精炼
   ============================================================ */

/* 全局图标基底 — 让所有 bi 图标更纤细 */
.bi {
  font-size: 1.15em;
  vertical-align: -0.15em;
}

/* 在浅色圆底上的图标居中 */
.ws-grid-icon .bi,
.nav-btn .bi,
.tab-item .bi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 赤焰配色微调 — 更沉稳的红色系 */
:root {
  --color-primary: #D41018;
  --color-primary-hover: #C40E16;
  --color-primary-active: #A80C12;
  --color-primary-light: #FEF0EE;
}

/* 暖白基底 — 克制精致 */
:root {
  --bg-base: #F5F5F0;
}

/* 卡片阴影更淡更精致 */
:root {
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

/* ============================================================
   动画
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }
#particles-js { pointer-events: none; }
#particles-js canvas { display: block; }

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-bg {
  background: linear-gradient(135deg, #D81018, #FF6030, #FFD070, #D81018);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}

/* 卡片悬浮上升动画 */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}


/* ============================================================
   Section 分区底色 (v2.0)
   ============================================================ */
.section-base { background: var(--bg-base); }
.section-surface { background: var(--bg-surface); }
.section-elevated { background: var(--bg-elevated); }
.section-highlight { background: var(--bg-highlight); }
.section-warm { background: var(--bg-warm); }
.section-nature { background: var(--bg-nature); }
.section-dark {
  background: linear-gradient(135deg, #1A0E0E 0%, #3D1A1A 100%);
  color: #fff;
}
.section-gradient {
  background: var(--gradient-primary);
  color: #fff;
}
.section-gold {
  background: linear-gradient(135deg, #fef9e7, #fef3cd);
  color: var(--text-primary);
  border-top: 1px solid rgba(212,148,10,0.08);
}
.section-blue {
  background: linear-gradient(135deg, #FFF0E0, #FFE4C8);
  color: var(--text-primary);
  border-top: 1px solid rgba(255,140,66,0.08);
}