:root {
  /* 能源主题配色 - 绿色环保与科技蓝 */
  --background: oklch(0.1200 0.0100 200);
  --foreground: oklch(0.9800 0.0050 200);
  --card: oklch(0.1800 0.0150 200);
  --card-foreground: oklch(0.9500 0.0050 200);
  --popover: oklch(0.2000 0.0150 200);
  --popover-foreground: oklch(0.9800 0.0050 200);

  /* 主色调 - 充满活力的绿色 */
  --primary: oklch(0.7200 0.1800 142);
  --primary-foreground: oklch(0.1200 0.0100 142);

  /* 次要色调 - 科技蓝 */
  --secondary: oklch(0.6800 0.1600 230);
  --secondary-foreground: oklch(0.9800 0.0050 230);

  /* 静音色 */
  --muted: oklch(0.2500 0.0100 200);
  --muted-foreground: oklch(0.7000 0.0050 200);

  /* 强调色 - 太阳能金黄 */
  --accent: oklch(0.8500 0.1500 85);
  --accent-foreground: oklch(0.1500 0.0100 85);

  /* 警告色 */
  --destructive: oklch(0.6500 0.2200 28);
  --destructive-foreground: oklch(0.9800 0.0050 28);

  /* 边框和输入 */
  --border: oklch(0.3000 0.0100 200);
  --input: oklch(0.2200 0.0100 200);
  --ring: oklch(0.7200 0.1800 142);

  /* 图表配色 - 能源数据可视化 */
  --chart-1: oklch(0.7200 0.1800 142); /* 绿色 - 可再生能源 */
  --chart-2: oklch(0.6800 0.1600 230); /* 蓝色 - 水电 */
  --chart-3: oklch(0.8500 0.1500 85);  /* 金色 - 太阳能 */
  --chart-4: oklch(0.7500 0.1400 190); /* 青色 - 风能 */
  --chart-5: oklch(0.6000 0.1200 320); /* 紫色 - 核能 */

  /* 字体设置 */
  --font-sans: 'Inter', 'Roboto', system-ui, -apple-system, sans-serif;
  --font-serif: 'Merriweather', 'Georgia', serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* 圆角和间距 */
  --radius: 0.75rem;
  --spacing: 0.25rem;

  /* 阴影效果 - 柔和的光晕效果 */
  --shadow-2xs: 0 1px 2px 0px rgba(0, 255, 128, 0.05);
  --shadow-xs: 0 1px 3px 0px rgba(0, 255, 128, 0.08);
  --shadow-sm: 0 2px 4px 0px rgba(0, 255, 128, 0.10), 0 1px 2px -1px rgba(0, 255, 128, 0.08);
  --shadow: 0 4px 6px -1px rgba(0, 255, 128, 0.10), 0 2px 4px -2px rgba(0, 255, 128, 0.08);
  --shadow-md: 0 8px 10px -2px rgba(0, 255, 128, 0.12), 0 4px 6px -2px rgba(0, 255, 128, 0.08);
  --shadow-lg: 0 12px 16px -4px rgba(0, 255, 128, 0.15), 0 6px 8px -2px rgba(0, 255, 128, 0.10);
  --shadow-xl: 0 20px 25px -5px rgba(0, 255, 128, 0.18), 0 8px 10px -3px rgba(0, 255, 128, 0.12);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 255, 128, 0.25);

  /* 动画时长 */
  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;

  /* 渐变色 */
  --gradient-primary: linear-gradient(135deg, oklch(0.7200 0.1800 142), oklch(0.6800 0.1600 230));
  --gradient-hero: linear-gradient(180deg, oklch(0.1200 0.0100 200), oklch(0.1800 0.0150 200));
  --gradient-card: linear-gradient(145deg, oklch(0.1800 0.0150 200), oklch(0.2200 0.0100 200));

  /* 能源特色渐变 */
  --gradient-solar: linear-gradient(135deg, oklch(0.8500 0.1500 85), oklch(0.9200 0.1200 65));
  --gradient-wind: linear-gradient(135deg, oklch(0.7500 0.1400 190), oklch(0.8200 0.1200 180));
  --gradient-hydro: linear-gradient(135deg, oklch(0.6800 0.1600 230), oklch(0.7500 0.1400 220));

  /* 圆角变体 */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-full: 9999px;
}

/* 深色主题特有样式 */
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* 毛玻璃效果 */
.glassmorphism {
  background: rgba(24, 28, 38, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 255, 128, 0.1);
}

/* 发光效果 */
.glow {
  box-shadow:
    0 0 20px rgba(0, 255, 128, 0.3),
    0 0 40px rgba(0, 255, 128, 0.2),
    0 0 60px rgba(0, 255, 128, 0.1);
}

/* 能源数据展示特效 */
.energy-card {
  background: var(--gradient-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base) ease;
}

.energy-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary);
}

/* 技能雷达图容器 */
.radar-container {
  background: radial-gradient(circle at center,
    rgba(0, 255, 128, 0.05) 0%,
    transparent 70%);
}

/* 项目卡片网格 */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: calc(var(--spacing) * 6);
}

/* 打字机效果文字 */
.typewriter {
  font-family: var(--font-mono);
  color: var(--accent);
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}