:root {
  /* ========================================
   * 色彩系统 - Dark 模式优先
   * 基于 Figma 设计稿: UI _ Crypto Project Placeholder
   * ======================================== */

  /* Primary 主色调 - 蓝色系 */
  --color-primary-50: #e2f2ff;
  --color-primary-100: #b9ddff;
  --color-primary-200: #8ac8ff;
  --color-primary-300: #56b2ff;
  --color-primary-400: #25a1ff;
  --color-primary-500: #0091ff;
  --color-primary-600: #0083f8;
  --color-primary-700: #0070e4;  /* CTA 主色 */
  --color-primary-800: #005fd2;
  --color-primary-900: #0b3eb3;  /* Hover CTA */

  /* 主色快捷变量 */
  --color-primary: #0070e4;
  --color-primary-bright: #0083f8;
  --color-main: #0070e4;
  --color-white: #ffffff;

  /* Neutral 中性色 */
  --color-neutral-50: #f7f8fa;
  --color-neutral-100: #f0f1f5;
  --color-neutral-200: #e9eaf0;
  --color-neutral-300: #ccced9;
  --color-neutral-400: #aeb1bf;
  --color-neutral-500: #9295a6;
  --color-neutral-600: #6c7080;  /* 段落灰 */
  --color-neutral-700: #545766;
  --color-neutral-800: #262833;
  --color-neutral-900: #090a0d;  /* 标题灰 */

  /* Success 成功色 - 绿色系 */
  --color-success-50: #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-200: #a7f3d0;
  --color-success-300: #6ee7b7;
  --color-success-400: #34d399;
  --color-success-500: #10b981;
  --color-success-600: #059669;  /* 常用 */
  --color-success-700: #047857;
  --color-success-800: #065f46;
  --color-success-900: #064e3b;
  --color-success: #03a66d;

  /* Warning 警告色 - 红色系 (设计稿中实际为 Error/Danger) */
  --color-warning-50: #fef2f2;
  --color-warning-100: #fee2e2;
  --color-warning-200: #fecaca;
  --color-warning-300: #fca5a5;
  --color-warning-400: #f87171;
  --color-warning-500: #ef4444;
  --color-warning-600: #dc2626;  /* 常用 */
  --color-warning-700: #b91c1c;
  --color-warning-800: #991b1b;
  --color-warning-900: #7f1d1d;
  --color-warning: #f5c738;
  --color-danger: #dc2626;

  /* Info 信息色 */
  --color-info: #0083f8;

  /* Dark Theme 深色主题 */
  --color-dark-main: #121318;      /* Section Color */
  --color-dark-background: #080808; /* Background Color */

  /* 语义化颜色 - Dark 模式 */
  --color-secondary: #6c7080;
  --color-secondary-strong: #2b3144;
  --color-surface: #121318;
  --color-surface-elevated: #1a1b21;
  --color-surface-contrast: #ffffff;
  --color-page: #080808;
  --color-text-primary: #ffffff;
  --color-text-body: #e9eaf0;
  --color-text-muted: #6c7080;
  --color-line: #2b3144;
  --color-line-strong: #545766;

  /* ========================================
   * 阴影系统
   * ======================================== */

  /* 灰色阴影 (Drop Shadow) */
  --shadow-none: none;
  --shadow-xs: 0px 1.3px 4px rgba(210, 208, 225, 0.07),
               0px 3.2px 10px rgba(210, 208, 225, 0.1),
               0px 6px 19px rgba(210, 208, 225, 0.12),
               0px 11px 34px rgba(210, 208, 225, 0.14),
               0px 20px 63px rgba(210, 208, 225, 0.17);
  --shadow-sm: 3px 3px 16px rgba(0, 0, 0, 0.1);
  --shadow-md: 2px 7px 20px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0px 13px 37px rgba(0, 0, 0, 0.21);
  --shadow-xl: 0px 20px 56px rgba(0, 0, 0, 0.29);

  /* 蓝色阴影 (Color Shadow) */
  --shadow-color-xs: 0px 4px 8px rgba(185, 221, 255, 0.3);
  --shadow-color-sm: 0px 6px 12px rgba(185, 221, 255, 0.5);
  --shadow-color-md: 0px 9px 18px rgba(185, 221, 255, 0.4);
  --shadow-color-lg: 0px 13px 37px rgba(185, 221, 255, 0.6);
  --shadow-color-xl: 0px 20px 56px rgba(185, 221, 255, 1);

  /* 兼容旧变量名 */
  --shadow-soft: var(--shadow-sm);
  --shadow-strong: var(--shadow-lg);

  /* ========================================
   * 字体系统
   * ======================================== */

  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-display: "Inter", sans-serif;
  --font-family-heading: "Inter", sans-serif;
  --font-family-body: "Inter", sans-serif;
  --font-family-ui: "Inter", sans-serif;

  /* 字重 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ========================================
   * 间距系统
   * ======================================== */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-xxs: var(--space-4);
  --space-xs: var(--space-8);
  --space-sm: var(--space-12);
  --space-md: var(--space-16);
  --space-lg: var(--space-24);
  --space-xl: var(--space-32);
  --space-2xl: var(--space-40);
  --space-3xl: var(--space-48);
  --space-4xl: var(--space-56);
  --space-5xl: var(--space-64);

  /* ========================================
   * 圆角
   * ======================================== */
  --radius-pill: 999px;
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-card: 10px;
  --radius-sm: 8px;

  /* ========================================
   * 布局
   * ======================================== */
  --pc-width-container: 1400px;
}

/* ========================================
 * 文字样式类 (Typography Classes)
 * 基于 Figma 设计稿 - Inter 字体
 * ======================================== */

/* Display - 超大标题 */
.text-display-1 {
  font-family: var(--font-family-display);
  font-size: 72px;
  line-height: 1.11;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.text-display-1-semibold {
  font-family: var(--font-family-display);
  font-size: 72px;
  line-height: 1.11;
  font-weight: var(--font-weight-semibold);
}

.text-display-1-extrabold {
  font-family: var(--font-family-display);
  font-size: 72px;
  line-height: 1.11;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

.text-display-2 {
  font-family: var(--font-family-display);
  font-size: 60px;
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
}

.text-display-2-semibold {
  font-family: var(--font-family-display);
  font-size: 60px;
  line-height: 1.2;
  font-weight: var(--font-weight-medium);
}

.text-display-2-extrabold {
  font-family: var(--font-family-display);
  font-size: 60px;
  line-height: 1.2;
  font-weight: var(--font-weight-extrabold);
}

/* Heading 1 - Web */
.text-h1 {
  font-family: var(--font-family-heading);
  font-size: 48px;
  line-height: 1.17;
  font-weight: var(--font-weight-regular);
}

.text-h1-semibold {
  font-family: var(--font-family-heading);
  font-size: 48px;
  line-height: 1.17;
  font-weight: var(--font-weight-semibold);
}

.text-h1-bold {
  font-family: var(--font-family-heading);
  font-size: 48px;
  line-height: 1.35;
  font-weight: var(--font-weight-bold);
}

.text-h1-extrabold {
  font-family: var(--font-family-heading);
  font-size: 48px;
  line-height: 1.17;
  font-weight: var(--font-weight-extrabold);
}

/* Heading 1 - Mobile */
.text-h1-mobile {
  font-family: var(--font-family-heading);
  font-size: 34px;
  line-height: 1.18;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
}

.text-h1-mobile-semibold {
  font-family: var(--font-family-heading);
  font-size: 34px;
  line-height: 1.18;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.text-h1-mobile-bold {
  font-family: var(--font-family-heading);
  font-size: 34px;
  line-height: 1.18;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.text-h1-mobile-extrabold {
  font-family: var(--font-family-heading);
  font-size: 34px;
  line-height: 1.18;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

/* Heading 2 - Web */
.text-h2 {
  font-family: var(--font-family-heading);
  font-size: 39px;
  line-height: 1.21;
  font-weight: var(--font-weight-regular);
}

.text-h2-medium {
  font-family: var(--font-family-heading);
  font-size: 39px;
  line-height: 1.21;
  font-weight: var(--font-weight-medium);
}

.text-h2-bold {
  font-family: var(--font-family-heading);
  font-size: 39px;
  line-height: 1.21;
  font-weight: var(--font-weight-bold);
}

.text-h2-extrabold {
  font-family: var(--font-family-heading);
  font-size: 39px;
  line-height: 1.21;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

/* Heading 2 - Mobile */
.text-h2-mobile {
  font-family: var(--font-family-heading);
  font-size: 33px;
  line-height: 1.21;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
}

.text-h2-mobile-semibold {
  font-family: var(--font-family-heading);
  font-size: 33px;
  line-height: 1.21;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.text-h2-mobile-bold {
  font-family: var(--font-family-heading);
  font-size: 33px;
  line-height: 1.21;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.text-h2-mobile-extrabold {
  font-family: var(--font-family-heading);
  font-size: 33px;
  line-height: 1.21;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

/* Heading 3 - Web */
.text-h3 {
  font-family: var(--font-family-heading);
  font-size: 33px;
  line-height: 1.21;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
}

.text-h3-medium {
  font-family: var(--font-family-heading);
  font-size: 33px;
  line-height: 1.21;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

.text-h3-bold {
  font-family: var(--font-family-heading);
  font-size: 33px;
  line-height: 1.21;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.text-h3-extrabold {
  font-family: var(--font-family-heading);
  font-size: 33px;
  line-height: 1.21;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

/* Heading 3 - Mobile */
.text-h3-mobile {
  font-family: var(--font-family-heading);
  font-size: 28px;
  line-height: 1.21;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
}

.text-h3-mobile-semibold {
  font-family: var(--font-family-heading);
  font-size: 28px;
  line-height: 1.21;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.text-h3-mobile-bold {
  font-family: var(--font-family-heading);
  font-size: 28px;
  line-height: 1.21;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.text-h3-mobile-extrabold {
  font-family: var(--font-family-heading);
  font-size: 28px;
  line-height: 1.21;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

/* Heading 4 - Web */
.text-h4 {
  font-family: var(--font-family-heading);
  font-size: 28px;
  line-height: 1.79;
  font-weight: var(--font-weight-regular);
}

.text-h4-medium {
  font-family: var(--font-family-heading);
  font-size: 28px;
  line-height: 1.21;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

.text-h4-bold {
  font-family: var(--font-family-heading);
  font-size: 28px;
  line-height: 1.21;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.text-h4-extrabold {
  font-family: var(--font-family-heading);
  font-size: 28px;
  line-height: 1.21;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

/* Heading 4 - Mobile */
.text-h4-mobile {
  font-family: var(--font-family-heading);
  font-size: 23px;
  line-height: 1.22;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
}

.text-h4-mobile-medium {
  font-family: var(--font-family-heading);
  font-size: 23px;
  line-height: 1.22;
  font-weight: var(--font-weight-medium);
}

.text-h4-mobile-semibold {
  font-family: var(--font-family-heading);
  font-size: 23px;
  line-height: 1.22;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.text-h4-mobile-extrabold {
  font-family: var(--font-family-heading);
  font-size: 23px;
  line-height: 1.22;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

/* Heading 5 - Web */
.text-h5 {
  font-family: var(--font-family-heading);
  font-size: 23px;
  line-height: 1.30;
  font-weight: var(--font-weight-regular);
}

.text-h5-medium {
  font-family: var(--font-family-heading);
  font-size: 23px;
  line-height: 1.22;
  font-weight: var(--font-weight-medium);
}

.text-h5-bold {
  font-family: var(--font-family-heading);
  font-size: 23px;
  line-height: 1.22;
  font-weight: var(--font-weight-bold);
}

.text-h5-extrabold {
  font-family: var(--font-family-heading);
  font-size: 23px;
  line-height: 1.22;
  font-weight: var(--font-weight-extrabold);
}

/* Heading 5 - Mobile */
.text-h5-mobile {
  font-family: var(--font-family-heading);
  font-size: 19px;
  line-height: 1.21;
  font-weight: var(--font-weight-regular);
  letter-spacing: 0.02em;
}

.text-h5-mobile-medium {
  font-family: var(--font-family-heading);
  font-size: 19px;
  line-height: 1.21;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

.text-h5-mobile-bold {
  font-family: var(--font-family-heading);
  font-size: 19px;
  line-height: 1.21;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.text-h5-mobile-extrabold {
  font-family: var(--font-family-heading);
  font-size: 19px;
  line-height: 1.21;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

/* Heading 6 - Web */
.text-h6 {
  font-family: var(--font-family-heading);
  font-size: 19px;
  line-height: 1.21;
  font-weight: var(--font-weight-medium);
}

.text-h6-semibold {
  font-family: var(--font-family-heading);
  font-size: 19px;
  line-height: 1.21;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.text-h6-bold {
  font-family: var(--font-family-heading);
  font-size: 19px;
  line-height: 1.21;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.text-h6-extrabold {
  font-family: var(--font-family-heading);
  font-size: 19px;
  line-height: 1.21;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

/* Heading 6 - Mobile */
.text-h6-mobile {
  font-family: var(--font-family-heading);
  font-size: 14px;
  line-height: 1.43;
  font-weight: var(--font-weight-regular);
}

.text-h6-mobile-semibold {
  font-family: var(--font-family-heading);
  font-size: 14px;
  line-height: 1.43;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}

.text-h6-mobile-bold {
  font-family: var(--font-family-heading);
  font-size: 14px;
  line-height: 1.43;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

.text-h6-mobile-extrabold {
  font-family: var(--font-family-heading);
  font-size: 14px;
  line-height: 1.29;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0.02em;
}

/* Paragraph 段落 */
.text-p1 {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.21;
  font-weight: var(--font-weight-regular);
}

.text-p1-medium {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.21;
  font-weight: var(--font-weight-medium);
}

.text-p1-underline {
  font-family: var(--font-family-body);
  font-size: 14px;
  line-height: 1.21;
  font-weight: var(--font-weight-regular);
  text-decoration: underline;
}

.text-p2 {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.38;
  font-weight: var(--font-weight-regular);
}

.text-p2-medium {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
}

.text-p2-underline {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
  text-decoration: underline;
}

.text-p3 {
  font-family: var(--font-family-body);
  font-size: 18px;
  line-height: 1.33;
  font-weight: var(--font-weight-regular);
}

.text-p3-medium {
  font-family: var(--font-family-body);
  font-size: 18px;
  line-height: 1.33;
  font-weight: var(--font-weight-medium);
}

.text-p3-underline {
  font-family: var(--font-family-body);
  font-size: 18px;
  line-height: 1.33;
  font-weight: var(--font-weight-regular);
  text-decoration: underline;
}

/* Body - 兼容性类名 */
.text-body {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
}

.text-body-semibold {
  font-family: var(--font-family-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: var(--font-weight-semibold);
}

/* Caption 说明文字 */
.text-caption {
  font-family: var(--font-family-body);
  font-size: 12px;
  line-height: 1.5;
  font-weight: var(--font-weight-regular);
}

.text-caption-medium {
  font-family: var(--font-family-body);
  font-size: 12px;
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
}

.text-caption-caps {
  font-family: var(--font-family-body);
  font-size: 12px;
  line-height: 1.5;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Footer 页脚文字 */
.text-footer {
  font-family: var(--font-family-body);
  font-size: 10px;
  line-height: 1.4;
  font-weight: var(--font-weight-regular);
}

.text-footer-semibold {
  font-family: var(--font-family-body);
  font-size: 10px;
  line-height: 1.4;
  font-weight: var(--font-weight-medium);
}

.text-footer-caps {
  font-family: var(--font-family-body);
  font-size: 10px;
  line-height: 1.4;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}