/**
 * Aurora Design System v2.0 - Design Tokens
 * 大鸟聪聪官网设计系统 - 苹果式叙事设计
 * 
 * 核心理念：温暖、有活力、接地气但专业
 * 主色：琥珀橙（不是蓝色！）
 * 辅助色：深紫
 * 基调：深色背景 + 极简主义
 */

:root {
  /* ==================== 配色系统 ==================== */
  
  /* 主色：琥珀橙（温暖、活力、接地气） */
  --color-primary-400: #FBBF24;
  --color-primary-500: #F59E0B;   /* 主色 */
  --color-primary-600: #D97706;
  --color-primary-700: #B45309;
  --color-primary-800: #92400E;
  
  /* 辅助色：深紫（专业、深度） */
  --color-secondary-600: #7C3AED;
  --color-secondary-700: #6D28D9;  /* 辅助色 */
  --color-secondary-800: #5B21B6;
  
  /* 语义化变量 */
  --primary: #F59E0B;
  --secondary: #7C3AED;
  
  /* 渐变：橙紫对比（曙光感） */
  --gradient-hero: linear-gradient(135deg, 
    #92400E 0%,   /* 深橙 */
    #F59E0B 30%,  /* 琥珀橙 */
    #D97706 50%,  /* 中橙 */
    #9333EA 80%,  /* 亮紫 */
    #7C3AED 100%  /* 深紫 */
  );
  
  --gradient-primary: linear-gradient(135deg, 
    #F59E0B 0%, 
    #D97706 100%
  );
  
  /* 背景：深色系（v2.0 新增） */
  --bg-black: #000000;
  --bg-dark: #0a0a0a;
  --bg-darker: #1a0f2e;
  --bg-canvas: #FAFAF9;  /* 浅色模式保留 */
  --bg-surface: #FFFFFF;  /* 浅色模式保留 */
  
  /* 文字：深色模式 */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.6);
  
  /* 边框：深色模式 */
  --border-default: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.05);
  
  /* ==================== 字体系统 ==================== */
  
  /* 字体族 */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* 字号（只用 3 种） - 桌面端 */
  --text-body: 19px;      /* 正文 */
  --text-heading: 56px;   /* 标题 */
  --text-mega: 80px;      /* 超大标题 */
  
  /* 字号细分（为兼容保留） */
  --text-xs: 13px;
  --text-sm: 15px;
  --text-base: 19px;
  --text-lg: 21px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 56px;
  --text-5xl: 72px;
  --text-6xl: 80px;
  
  /* 字重 */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  
  /* 行高 */
  --leading-none: 1;
  --leading-tight: 1.1;    /* 标题 */
  --leading-snug: 1.2;
  --leading-normal: 1.5;   /* 正文 */
  --leading-relaxed: 1.6;
  --leading-loose: 2;
  
  /* 字间距 */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.03em;  /* 大标题 */
  --tracking-normal: 0;
  --tracking-wide: 0.05em;    /* 小标签 */
  --tracking-wider: 0.1em;
  
  /* ==================== 间距系统 ==================== */
  
  /* 基础间距 */
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-3-5: 14px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-28: 112px;
  --spacing-32: 128px;
  
  /* 语义化间距（v2.0 更新） */
  --section-gap: 120px;    /* 区块间距（超大留白） */
  --content-gap: 80px;     /* 内容间距 */
  --element-gap: 16px;     /* 元素间距 */
  
  /* 容器宽度 */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;  /* 标准容器（v2.0 更新） */
  
  /* ==================== 圆角系统 ==================== */
  
  --radius-none: 0;
  --radius-sm: 6px;      /* 小元素（徽章） */
  --radius-md: 12px;     /* 中等元素（按钮） */
  --radius-lg: 24px;     /* 大元素（卡片 - v2.0 更新） */
  --radius-xl: 32px;     /* 超大区块 */
  --radius-2xl: 40px;
  --radius-3xl: 48px;
  --radius-full: 980px;  /* 超圆角（Apple 式按钮 - v2.0 新增） */
  
  /* ==================== 阴影系统 ==================== */
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  
  /* 带颜色倾向的阴影（v2.0 新增） */
  --shadow-primary: 0 8px 24px rgba(245, 158, 11, 0.15);
  --shadow-primary-lg: 0 20px 60px rgba(245, 158, 11, 0.15);
  --shadow-secondary: 0 8px 24px rgba(124, 58, 237, 0.15);
  
  /* ==================== 过渡动画 ==================== */
  
  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ==================== 响应式断点 ==================== */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* ==================== Z-index 层级 ==================== */
  
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ==================== 移动端字号调整 ==================== */

@media (max-width: 767px) {
  :root {
    /* 字号（只用 3 种） - 移动端 */
    --text-body: 17px;
    --text-heading: 36px;
    --text-mega: 48px;
    
    /* 间距调整 */
    --section-gap: 80px;
    --content-gap: 48px;
  }
}

/* ==================== 工具类（v2.0 新增） ==================== */

/* 磨砂玻璃效果 */
.glass {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 滚动触发动画 */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 超圆角按钮（Apple 式） */
.btn-apple {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  font-size: var(--text-body);
  font-weight: var(--font-semibold);
  background: var(--primary);
  color: #000;
  border-radius: var(--radius-full);
  transition: all var(--transition-base);
  text-decoration: none;
}

.btn-apple:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-primary-lg);
}