/**
 * 楚海能源官网 - CSS变量定义
 * 基于 UI设计文档 v1.0
 */

:root {
  /* ========== 颜色系统 ========== */

  /* 主色系 - 深邃科技蓝 */
  --color-primary-700: #003366;
  --color-primary-600: #0052CC;
  --color-primary-500: #0066FF;
  --color-primary-400: #3399FF;
  --color-primary-300: #66B2FF;
  --color-primary-200: #CCE5FF;
  --color-primary-100: #E6F2FF;
  
  /* 辅助色 - 环保绿 */
  --color-secondary-600: #00A878;
  --color-secondary-500: #00C896;
  --color-secondary-400: #33D9AB;
  --color-secondary-300: #66E6C0;
  --color-secondary-100: #E6F9F3;
  
  /* 中性色 - 文字 */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4D4D4D;
  --color-text-tertiary: #808080;
  --color-text-disabled: #B3B3B3;
  --color-text-white: #FFFFFF;
  
  /* 中性色 - 背景 */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F5F7FA;
  --color-bg-tertiary: #EBEEF5;
  --color-bg-dark: #1A1A1A;
  
  /* 点缀色 - 金色/橙色 */
  --color-accent-gold: #FFB800;
  --color-accent-orange: #FF6B35;
  --color-accent-copper: #C4713F;

  /* 功能色 */
  --color-success: #00C896;
  --color-warning: #FFAA00;
  --color-error: #FF4D4F;
  --color-info: #3399FF;
  
  /* ========== 字体系统 ========== */
  
  /* 字体家族 */
  --font-family-primary: -apple-system, BlinkMacSystemFont, "PingFang SC", 
                         "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-family-number: "DIN Alternate", "Roboto Mono", monospace;
  
  /* 字体大小 - 更大更大气 */
  --font-size-h1: 64px;
  --font-size-h2: 42px;
  --font-size-h3: 32px;
  --font-size-h4: 24px;
  --font-size-body-lg: 20px;
  --font-size-body: 18px;
  --font-size-body-sm: 16px;
  --font-size-caption: 14px;
  
  /* 字重 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* 行高 */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ========== 间距系统 - 增加留白 ========== */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;
  
  /* ========== 圆角 ========== */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-full: 9999px;
  
  /* ========== 阴影 - 更柔和 ========== */
  --shadow-sm: 0 2px 8px rgba(0, 51, 102, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 51, 102, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 51, 102, 0.16);
  --shadow-xl: 0 16px 48px rgba(0, 51, 102, 0.20);
  --shadow-glow: 0 0 20px rgba(0, 102, 255, 0.3);
  
  /* ========== 响应式断点 ========== */
  /* 注意：CSS变量不能用于媒体查询，此处仅作记录 */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* ========== 过渡动画 ========== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* ========== Z-index层级 ========== */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-tooltip: 1060;
}