/*
 * base.css — 极光趣动官网
 * 用途：CSS 自定义变量定义 + Reset 样式 + 全局基础排版
 * 所有页面必须首先引入此文件
 */

/* ========== CSS 自定义变量 ========== */
:root {
  /* 配色 */
  --color-bg:           #0a0e1a;
  --color-surface:      #0f172a;
  --color-glass:        rgba(255, 255, 255, 0.08);
  --color-glass-hover:  rgba(255, 255, 255, 0.13);

  --color-aurora-1:     #7c3aed;
  --color-aurora-2:     #06b6d4;
  --color-aurora-3:     #10b981;

  --color-text:         #f8fafc;
  --color-text-muted:   #94a3b8;
  --color-text-subtle:  #64748b;
  --color-border:       rgba(255, 255, 255, 0.10);
  --color-border-hover: rgba(255, 255, 255, 0.20);

  /* 渐变 */
  --gradient-aurora:      linear-gradient(135deg, var(--color-aurora-1), var(--color-aurora-2), var(--color-aurora-3));
  --gradient-aurora-text: linear-gradient(90deg, var(--color-aurora-1), var(--color-aurora-2));
  --gradient-aurora-bg:   linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.10), rgba(16,185,129,0.08));

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

  /* 间距（8px 栅格） */
  --space-1:  8px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  40px;
  --space-6:  48px;
  --space-8:  64px;
  --space-12: 96px;
  --space-16: 128px;

  /* 字体族 */
  --font-sans-zh: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --font-sans-en: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
  --font-body:    var(--font-sans-en), var(--font-sans-zh);

  /* 字号 */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  80px;

  /* 行高 */
  --leading-tight:  1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* 动效时长 */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* 阴影 */
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --shadow-glow:  0 0 40px rgba(124, 58, 237, 0.30);
  --shadow-card:  0 4px 24px rgba(0, 0, 0, 0.40);

  /* 布局 */
  --container-max: 1200px;
  --container-pad: var(--space-3);
  --header-height: 64px;
}

/* ========== Reset ========== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--text-base);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* 图片基础 */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* 表单元素继承字体 */
input, button, textarea, select {
  font: inherit;
}

/* 链接基础 */
a {
  color: inherit;
  text-decoration: none;
}

/* 列表重置 */
ul, ol {
  list-style: none;
}

/* 标题字重 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* 段落行高 */
p {
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ========== 全局工具类 ========== */

/* 极光渐变文字 */
.text-aurora {
  background: var(--gradient-aurora-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 居中容器 */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* 屏幕阅读器专用 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========== 减弱动效（无障碍） ========== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}