/* ==========================================================================
   设计令牌：颜色 / 字号 / 间距 / 圆角 / 阴影 / 动效
   全站统一变量，便于维护与换肤
   ========================================================================== */

:root {
  /* ---------- 品牌色 ---------- */
  --color-primary: #0a2540;        /* 深蓝主色 */
  --color-primary-deep: #061829;   /* 更深蓝 */
  --color-primary-soft: #15365b;   /* 浅一档蓝 */
  --color-accent: #00d4b4;         /* 青绿点缀 */
  --color-accent-soft: #2ee6ca;    /* 浅青绿 */
  --color-cta: #00c896;            /* 行动按钮绿 */
  --color-cta-hover: #00b083;      /* 按钮 hover */

  /* ---------- 中性色 ---------- */
  --color-ink: #0c1b2a;            /* 正文深色 */
  --color-text: #2b3a48;           /* 常规正文 */
  --color-text-muted: #5c6b7a;     /* 次要文字 */
  --color-text-light: #8a98a6;     /* 弱化文字 */
  --color-text-inverse: #ffffff;
  --color-line: #e4e9ef;           /* 分割线 */
  --color-bg: #ffffff;             /* 页面底色 */
  --color-bg-soft: #f5f8fb;        /* 浅灰区块底 */
  --color-bg-metal: #eef2f6;       /* 金属灰卡片底 */

  /* ---------- 深色区块 ---------- */
  --color-dark-1: #0b1220;
  --color-dark-2: #122036;
  --color-dark-3: #1a2942;
  --color-dark-copy: #dfe7f0;
  --color-dark-copy-soft: #c4d0dd;
  --color-dark-copy-subtle: #a9b8c9;
  --color-dark-copy-muted: #a4b3c2;
  --color-dark-copy-weaker: #93a3b4;
  --color-dark-copy-faint: #7b8b9c;
  --color-cta-text: #042b22;

  /* ---------- 玻璃质感 ---------- */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-nav: rgba(8, 18, 32, 0.55);
  --glass-nav-solid: rgba(8, 18, 32, 0.92);

  /* ---------- 表单状态 ---------- */
  --color-form-label: #c9d7e5;
  --color-form-label-soft: #c0cfdf;
  --color-form-placeholder: #7e91a4;
  --color-form-readonly: #bfeee6;
  --color-form-note: #8fa3b7;
  --color-form-control-bg: var(--glass-bg-strong);
  --color-form-control-bg-soft: var(--glass-bg-strong);
  --color-form-control-bg-focus: var(--glass-bg-strong);
  --color-form-control-border: rgba(255, 255, 255, 0.18);
  --color-form-option-bg: #435268;
  --color-success-text: var(--color-accent-soft);
  --color-success-bg: rgba(0, 200, 150, 0.16);
  --color-success-border: rgba(0, 200, 150, 0.35);
  --color-success-border-strong: rgba(0, 200, 150, 0.4);
  --color-error-text: #ffb0b0;
  --color-error-text-soft: #ff9b9b;
  --color-error-bg: rgba(255, 99, 99, 0.14);
  --color-error-border: rgba(255, 99, 99, 0.35);
  --color-error-border-strong: rgba(255, 99, 99, 0.4);

  /* ---------- 渐变 ---------- */
  --grad-hero: linear-gradient(135deg, #0b1220 0%, #122036 55%, #0a2540 100%);
  --grad-accent: linear-gradient(120deg, #00d4b4 0%, #00c896 100%);
  --grad-dark: linear-gradient(180deg, #0b1220 0%, #122036 100%);
  --grad-card: linear-gradient(160deg, #ffffff 0%, #f3f7fb 100%);

  /* ---------- 字号（rem）---------- */
  --fs-display: 5.6rem;   /* 首屏大标题 */
  --fs-h1: 4.4rem;
  --fs-h2: 3.6rem;
  --fs-h3: 2.6rem;
  --fs-h4: 2rem;
  --fs-lg: 1.8rem;
  --fs-base: 1.6rem;
  --fs-sm: 1.4rem;
  --fs-xs: 1.3rem;

  /* ---------- 字体 ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC", "Hiragino Sans GB",
    sans-serif;

  /* ---------- 间距 ---------- */
  --space-1: 0.8rem;
  --space-2: 1.6rem;
  --space-3: 2.4rem;
  --space-4: 3.2rem;
  --space-5: 4.8rem;
  --space-6: 6.4rem;
  --space-7: 9.6rem;

  /* 区块上下留白 */
  --section-pad: 9.6rem;

  /* ---------- 圆角 ---------- */
  --radius-sm: 0.8rem;
  --radius-md: 1.4rem;
  --radius-lg: 2rem;
  --radius-xl: 2.8rem;
  --radius-pill: 999px;

  /* ---------- 阴影 ---------- */
  --shadow-sm: 0 0.2rem 0.8rem rgba(10, 37, 64, 0.06);
  --shadow-md: 0 1rem 3rem rgba(10, 37, 64, 0.1);
  --shadow-lg: 0 2rem 5rem rgba(10, 37, 64, 0.16);
  --shadow-accent: 0 1.2rem 3rem rgba(0, 200, 150, 0.28);
  --shadow-float: 0 2.4rem 6rem rgba(6, 24, 41, 0.35);

  /* ---------- 布局 ---------- */
  --container: 1440px;
  --container-wide: 1440px;

  /*
   * 响应式断点标准：
   * 1360 宽屏收敛 / 1200 桌面降级 / 1120 导航与双栏
   * 960 平板横向 / 768 移动布局 / 560 小屏微调
   */

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.2s;
  --dur: 0.35s;
  --dur-slow: 0.6s;

  --header-h: 7.6rem;
}

/* 响应式字号微调 */
@media (max-width: 1200px) {
  :root {
    --fs-display: 4.6rem;
    --fs-h2: 3.2rem;
    --section-pad: 7.2rem;
  }
}

@media (max-width: 768px) {
  :root {
    --fs-display: 3.4rem;
    --fs-h1: 3rem;
    --fs-h2: 2.6rem;
    --fs-h3: 2.2rem;
    --fs-lg: 1.7rem;
    --section-pad: 5.6rem;
    --header-h: 6.4rem;
  }
}