/* ============================================================
 * 全局变量 — 绿色能源·明亮清新主题
 * 江苏亿晏辰环保工程科技有限公司
 * ============================================================ */

/* 本地字体（避免依赖 Google Fonts CDN，境内无法访问） */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../assets/fonts/outfit-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../assets/fonts/outfit-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* === 主色系（绿色能源） === */
  --bg-primary: #f6f9f7;
  --bg-secondary: #edf5f0;
  --bg-hero: linear-gradient(160deg, #e8f5e9 0%, #e0f2f1 40%, #f1f8e9 100%);
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-hover: rgba(255, 255, 255, 0.95);

  /* === 强调色 === */
  --accent-primary: #2e7d32;       /* 森林绿 主色 */
  --accent-secondary: #00897b;     /* 青绿 辅色 */
  --accent-light: #66bb6a;         /* 亮绿 */
  --accent-warm: #ef6c00;          /* 活力橙 点缀 */
  --accent-sky: #0288d1;           /* 天际蓝 */

  /* === 渐变 === */
  --gradient-primary: linear-gradient(135deg, #2e7d32, #00897b);
  --gradient-green: linear-gradient(135deg, #43a047, #26a69a);
  --gradient-warm: linear-gradient(135deg, #ef6c00, #ff8f00);
  --gradient-sky: linear-gradient(135deg, #0288d1, #00897b);
  --gradient-soft: linear-gradient(135deg, #a5d6a7, #80cbc4);

  /* === 文字 === */
  --text-primary: #1b2e1f;
  --text-secondary: #4a5f52;
  --text-muted: #7a8f82;
  --text-white: #ffffff;

  /* === 玻璃态（亮色） === */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(46, 125, 50, 0.1);
  --glass-border-hover: rgba(46, 125, 50, 0.3);

  /* === 阴影 === */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 16px 60px rgba(0, 0, 0, 0.1);
  --shadow-green: 0 4px 20px rgba(46, 125, 50, 0.15);

  /* === 间距 === */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 80px;
  --spacing-xxl: 120px;

  /* === 圆角 === */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* === 字体 === */
  --font-primary: 'Outfit', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* === 过渡 === */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overflow-x: hidden;
}

body {
  font-family: var(--font-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--accent-secondary);
}

img {
  max-width: 100%;
  height: auto;
}