/* ==========================================================================
   基础样式与设计变量（Design Tokens）
   ========================================================================== */
:root {
  /* 色彩 —— 暗色系基础 */
  --color-bg: #05050a;
  --color-bg-soft: #0a0a14;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-hover: rgba(255, 255, 255, 0.1);
  --color-border: rgba(255, 255, 255, 0.12);

  /* 文字 —— 满足 WCAG 2.1 AA 对比度 */
  --color-text: #f5f5f7;          /* 主文字，对比度 ≥ 12:1 */
  --color-text-secondary: #c7c7cc; /* 次文字，对比度 ≥ 9:1 */
  --color-text-tertiary: #a1a1a6;  /* 辅助文字，对比度 ≥ 7:1 */

  /* 强调色 —— 星辰蓝 / 银河紫 */
  --color-accent-blue: #4da6ff;
  --color-accent-purple: #c77dff;
  --color-accent-cyan: #64d2ff;

  /* 渐变背景 */
  --gradient-hero:
    radial-gradient(1200px 800px at 75% 18%, rgba(80, 60, 180, 0.35), transparent 60%),
    radial-gradient(1000px 700px at 15% 75%, rgba(30, 90, 200, 0.28), transparent 60%),
    linear-gradient(180deg, #05050a 0%, #0a0f22 45%, #0b0d2a 78%, #05050a 100%);

  /* 字体族 —— 苹果风无衬线 */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue",
    Helvetica, Arial, sans-serif;

  /* 尺寸与形状 */
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --container-max: 1120px;
  --header-height: 64px;

  /* 动效 */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 0.55s;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: rgba(77, 166, 255, 0.35);
  color: #fff;
}

/* 通用布局容器 */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}