/* ==============================================================
   common.css · 全局 CSS 变量 + 工具类
   --------------------------------------------------------------
   本文件是设计 tokens 的唯一来源。
   修改这里的变量，整站同步生效。
   ============================================================== */

:root {
  /* ---------- 颜色：品牌 ---------- */
  --color-bg-dark:        #0a1729;   /* 主深色背景（hero、footer、section） */
  --color-bg-dark-2:      #0c1c3c;   /* 深色背景渐变终点 */
  --color-bg:             #ffffff;   /* 默认浅色背景 */
  --color-bg-soft:        #f5f7fa;   /* 浅色区块底色 */

  --color-accent:         #1e90ff;   /* 主强调色：链接/按钮/激活 */
  --color-accent-2:       #0099ff;   /* 次强调色：渐变/hover */
  --color-accent-soft:    rgba(30, 144, 255, 0.12);

  --color-text:           #0c1c3c;   /* 浅色背景正文 */
  --color-text-soft:      #5a6478;   /* 浅色背景次要文本 */
  --color-text-inverse:   #ffffff;   /* 深色背景正文 */
  --color-text-muted:     #a0a8b8;   /* 深色背景次要文本 */

  --color-border:         #e3e7ee;   /* 浅色背景描边 */
  --color-border-dark:    rgba(255, 255, 255, 0.08); /* 深色背景描边 */
  --color-border-accent:  rgba(30, 144, 255, 0.4);

  /* ---------- 字体 ---------- */
  --font-family-base:     "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-family-heading:  var(--font-family-base);

  --font-size-xs:         0.75rem;   /* 12px */
  --font-size-sm:         0.875rem;  /* 14px */
  --font-size-base:       1rem;      /* 16px */
  --font-size-md:         1.125rem;  /* 18px */
  --font-size-lg:         1.25rem;   /* 20px */
  --font-size-xl:         1.5rem;    /* 24px */
  --font-size-2xl:        2rem;      /* 32px */
  --font-size-3xl:        2.5rem;    /* 40px */
  --font-size-4xl:        3rem;      /* 48px */
  --font-size-5xl:        3.75rem;   /* 60px */
  --font-size-hero:       4.5rem;    /* 72px：仅 hero */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.2;
  --line-height-snug:     1.4;
  --line-height-base:     1.6;
  --line-height-relaxed:  1.8;

  --letter-spacing-tight: -0.01em;
  --letter-spacing-base:  0;
  --letter-spacing-wide:  0.04em;
  --letter-spacing-wider: 0.16em;

  /* ---------- 间距（8px 基准）---------- */
  --space-1:              0.25rem;   /*  4px */
  --space-2:              0.5rem;    /*  8px */
  --space-3:              0.75rem;   /* 12px */
  --space-4:              1rem;      /* 16px */
  --space-5:              1.5rem;    /* 24px */
  --space-6:              2rem;      /* 32px */
  --space-7:              2.5rem;    /* 40px */
  --space-8:              3rem;      /* 48px */
  --space-10:             4rem;      /* 64px */
  --space-12:             5rem;      /* 80px */
  --space-16:             7rem;      /* 112px */
  --space-20:             9rem;      /* 144px */

  /* ---------- 容器与断点 ---------- */
  --container-max:        1280px;
  --container-padding:    var(--space-5);
  --breakpoint-tablet:    768px;
  --breakpoint-desktop:   1025px;
  --breakpoint-wide:      1440px;

  /* ---------- 圆角 / 阴影 / 过渡 ---------- */
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            16px;
  --radius-full:          9999px;

  --shadow-sm:            0 1px 2px rgba(12, 28, 60, 0.08);
  --shadow-md:            0 8px 24px rgba(12, 28, 60, 0.12);
  --shadow-lg:            0 20px 50px rgba(12, 28, 60, 0.2);

  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms ease;

  /* ---------- Header 高度（用于 sticky 偏移）---------- */
  --header-height:        80px;
  --header-height-mobile: 64px;

  /* ---------- z-index 层级 ---------- */
  --z-base:               1;
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-header:             300;
  --z-overlay:            400;
  --z-modal:              500;
  --z-toast:              600;
}

/* ==============================================================
   布局工具类
   ============================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.container--narrow {
  max-width: 960px;
}

.container--wide {
  max-width: 1440px;
}

.section {
  padding-block: var(--space-12);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-16);
  }
}

@media (min-width: 1025px) {
  .section {
    padding-block: var(--space-20);
  }
}

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
}

.section--soft {
  background-color: var(--color-bg-soft);
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .md\:flex-row { flex-direction: row; }
  .md\:gap-6 { gap: var(--space-6); }
  .md\:gap-8 { gap: var(--space-8); }
}

@media (min-width: 1025px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg\:gap-10 { gap: var(--space-10); }
  .lg\:gap-12 { gap: var(--space-12); }
}

/* ==============================================================
   文本工具类
   ============================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.text-muted { color: var(--color-text-soft); }
.text-inverse-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent); }
.text-uppercase { text-transform: uppercase; }
.text-bold { font-weight: var(--font-weight-bold); }
.text-semibold { font-weight: var(--font-weight-semibold); }
.text-medium { font-weight: var(--font-weight-medium); }

.eyebrow {
  display: inline-block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-accent);
}

/* 标题层级 */
h1, .h1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}
h2, .h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}
h3, .h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}
h4, .h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

@media (min-width: 768px) {
  h1, .h1 { font-size: var(--font-size-4xl); }
  h2, .h2 { font-size: var(--font-size-3xl); }
}

@media (min-width: 1025px) {
  h1, .h1 { font-size: var(--font-size-5xl); }
  h2, .h2 { font-size: var(--font-size-3xl); }
}

/* 段落与列表 */
.lead {
  font-size: var(--font-size-md);
  color: var(--color-text-soft);
  line-height: var(--line-height-relaxed);
}

.list-disc {
  list-style: disc;
  padding-left: var(--space-5);
}

/* ==============================================================
   间距工具类（margin / padding）
   ============================================================== */

.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }

.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }

.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }
.py-8 { padding-block: var(--space-8); }
.py-10 { padding-block: var(--space-10); }

.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }
.px-8 { padding-inline: var(--space-8); }

/* ==============================================================
   装饰 / 视觉
   ============================================================== */

.divider {
  height: 1px;
  background: var(--color-border);
  border: 0;
  margin-block: var(--space-6);
}

.divider--dark {
  background: var(--color-border-dark);
}

.bg-dark { background-color: var(--color-bg-dark); color: var(--color-text-inverse); }
.bg-soft { background-color: var(--color-bg-soft); }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.hidden { display: none; }

@media (min-width: 768px) {
  .md\:hidden { display: none; }
}
@media (max-width: 767px) {
  .md\:show { display: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==============================================================
   通用动画
   ============================================================== */

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fade-in var(--transition-slow) both;
}