/* ============================================================================
 * 88API — Design Tokens
 * 版本: v1.0   |   提取来源: https://www.apiera.cn/ (生产环境 CSS)
 * 提取日期: 2026-10-23
 * 说明: 本文件为从 www.apiera.cn 线上样式表逆向核对后的令牌集，可直接引入项目使用。
 *       标注 [实测] 为线上取值；标注 [推导] 为依据实测值补全的建议值。
 * 用法:
 *   <link rel="stylesheet" href="tokens/design-tokens.css">
 *   <html data-theme="light">  → 浅色（默认/首屏优选）
 *   <html data-theme="dark">   → 深色
 * ========================================================================== */

:root {
  /* ---------- 1. 品牌基色 (Brand Primitives) [实测] ---------- */
  --blue: #2878f0;
  --blue-dark: #1764d8;
  --violet: #7a4ef4;
  --green: #20ae71;
  --ink: #172033;
  --muted: #6f7a8d;
  --line: #dce4ef;
  --surface: rgba(255, 255, 255, 0.92);

  /* 协议强调色（Chat / Responses 协议切换态） [实测] */
  --protocol-accent: #00d7a7;
  --protocol-accent-rgb: 0, 215, 167;

  /* ---------- 2. 字体 (Typography) [实测] ---------- */
  --font-sans: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* ---------- 3. 圆角 (Radius) [实测] ---------- */
  --radius-xs: 6px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-card: 14px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- 4. 布局尺度 (Layout) [实测] ---------- */
  --shell-width: min(1220px, calc(100% - 40px));
  --header-height: 64px;
  --section-gap: 96px;
  --home-gap: 48px;
  --section-title-size: 28px;
  --section-title-weight: 700;

  /* ---------- 5. 动效 (Motion) [实测] ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.28s;
  --dur-theme: 0.26s;   /* 主题切换配色过渡 [实测] */
  --dur-shell: 0.7s;    /* 容器/头部规格过渡 [实测] */

  /* ---------- 6. 阴影 (Elevation) [实测] ---------- */
  --shadow-popover-light: 0 18px 42px rgba(35, 51, 78, 0.16);
  --shadow-popover-dark: 0 18px 42px rgba(0, 0, 0, 0.34);
}

/* ============================================================================
 * 浅色主题 — LIGHT（站点默认首屏）
 * ========================================================================== */
html[data-theme="light"] {
  /* 背景层 [实测] */
  --c-canvas: #f8fafc;
  --c-canvas-gradient: linear-gradient(135deg, #fff 15%, #f5f8ff 65%, #f5f3ff);

  /* 表面/容器 */
  --c-card: #ffffff;                       /* [实测] */
  --c-card-solid: #ffffff;                 /* [实测] */
  --c-popover: rgba(255, 255, 255, 0.98);  /* [实测] */
  --c-hover: #f0f5fb;                      /* [实测] */
  --c-chip: #f8fafc;                       /* [实测] */
  --c-input: #ffffff;                      /* [实测] */

  /* 描边 */
  --c-border: #e2e8f0;                     /* [实测] */
  --c-border-strong: #bfd2eb;              /* [实测] */
  --c-input-border: #cbd5e1;               /* [实测] */

  /* 文本层级 */
  --c-title: #172033;                      /* [实测] 取 :root --ink */
  --c-text: #475569;                       /* [实测] .hero-copy > p */
  --c-muted: #526176;                      /* [实测] */
  --c-faint: #64748b;                      /* [实测] */
  --c-code: #334155;                       /* [实测] .code-area pre */

  /* 语义强调 */
  --c-kicker: #1d5fcb;                     /* [实测] 眉标题/eyebrow */
  --c-link: #1d5fcb;                       /* [实测] */
  --c-stat: #1e58a6;                       /* [实测] 数值统计 */
  --c-err: #d93850;                        /* [实测] */

  /* 卡片阴影 */
  --c-shadow: 0 8px 28px rgba(51, 65, 85, 0.045);           /* [实测] */
  --c-shadow-elevated: 0 20px 60px rgba(51, 65, 85, 0.09),  /* [实测] .api-console */
                       0 2px 8px rgba(51, 65, 85, 0.03);

  /* 徽标/标签 Tag 三件套（前景 / 背景 / 描边） [实测] */
  --c-tag-green: #238149;   --c-tag-green-bg: #f1fbf4;  --c-tag-green-bd: #cde5d5;
  --c-tag-blue: #1d5fcb;    --c-tag-blue-bg: #f2f7ff;   --c-tag-blue-bd: #cddffc;
  --c-tag-cyan: #0b7584;    --c-tag-cyan-bg: #effafb;   --c-tag-cyan-bd: #c3e6eb;
  --c-tag-amber: #b36a13;   --c-tag-amber-bg: #fff8ee;  --c-tag-amber-bd: #f1d5aa;
  --c-tag-rose: #c2355b;    --c-tag-rose-bg: #fff2f5;   --c-tag-rose-bd: #f5cad6;

  /* 分区背景 [实测] */
  --c-hero-bg: transparent;
  --c-below-fold-bg: rgba(248, 250, 252, 0.18);
  --c-header-bg: rgba(255, 255, 255, 0.94);
  --c-header-border: rgba(220, 228, 239, 0.72);

  /* 组件覆盖 [实测] */
  --c-eyebrow-fg: #1d5fcb;
  --c-eyebrow-bd: #c7dcfb;
  --c-eyebrow-bg: #eff6ff;
  --c-outline-btn-bg: #ffffff;
  --c-outline-btn-bd: #cbd5e1;
  --c-accent-violet: #7041df;
  --c-code-area-bg: #ffffff;
  --c-response-bg: #f8fafc;
  --c-endpoint-chip-fg: #1d5fcb;
  --c-endpoint-chip-bg: #eff6ff;
  --c-protocol-tab-active: #5140a0;
  --c-particle-opacity: 0.65;

  /* 三步流程强调色 [实测] */
  --step-1-accent: #713fe7;  --step-1-glow: rgba(113, 63, 231, 0.2);   --step-1-soft: rgba(113, 63, 231, 0.1);
  --step-2-accent: #2673d9;  --step-2-glow: rgba(38, 115, 217, 0.2);   --step-2-soft: rgba(38, 115, 217, 0.1);
  --step-3-accent: #22944e;  --step-3-glow: rgba(34, 148, 78, 0.2);    --step-3-soft: rgba(34, 148, 78, 0.1);

  --focus-ring: 2px solid var(--c-link);
}

/* ============================================================================
 * 深色主题 — DARK
 * ========================================================================== */
html[data-theme="dark"] {
  /* 背景层 [实测] */
  --c-canvas: #0d1420;
  --c-canvas-gradient: none;

  /* 表面/容器 */
  --c-card: rgba(27, 34, 45, 0.92);
  --c-card-solid: #1b222d;
  --c-popover: rgba(27, 34, 45, 0.96);
  --c-hover: #28313e;
  --c-chip: rgba(28, 40, 58, 0.48);
  --c-input: #0f1724;

  /* 描边 */
  --c-border: rgba(163, 181, 205, 0.13);
  --c-border-strong: #3a4c65;
  --c-input-border: rgba(163, 181, 205, 0.24);

  /* 文本层级 */
  --c-title: #f3f6fb;
  --c-text: #d8e0eb;
  --c-muted: #b5b5b5;
  --c-faint: #93a0b3;
  --c-code: #d8e0eb;

  /* 语义强调 */
  --c-kicker: #8dbfff;
  --c-link: #7eb8ff;
  --c-stat: #8dbfff;
  --c-err: #ff8197;

  /* 卡片阴影 */
  --c-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  --c-shadow-elevated: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* Tag 三件套 [实测] */
  --c-tag-green: #43ae6d;   --c-tag-green-bg: #10231a;  --c-tag-green-bd: rgba(61, 165, 99, 0.58);
  --c-tag-blue: #4b98ee;    --c-tag-blue-bg: #10243a;   --c-tag-blue-bd: rgba(55, 132, 224, 0.62);
  --c-tag-cyan: #2fb3c4;    --c-tag-cyan-bg: #0e2529;   --c-tag-cyan-bd: rgba(42, 163, 179, 0.62);
  --c-tag-amber: #dfa026;   --c-tag-amber-bg: #2b240f;  --c-tag-amber-bd: rgba(202, 139, 35, 0.64);
  --c-tag-rose: #e2688c;    --c-tag-rose-bg: #2c1219;   --c-tag-rose-bd: rgba(216, 90, 123, 0.64);

  /* 分区背景 [实测] */
  --c-hero-bg: transparent;
  --c-below-fold-bg: transparent;
  --c-header-bg: rgba(13, 20, 32, 0.94);
  --c-header-border: rgba(163, 181, 205, 0.13);

  --c-particle-opacity: 0.98;
  --focus-ring: 2px solid var(--c-link);
}

/* ============================================================================
 * 响应式令牌重定义 [实测]
 * ========================================================================== */
@media (max-width: 820px) {
  :root {
    --shell-width: min(calc(100% - 24px), 720px);
    --header-height: 58px;
    --section-gap: 64px;
    --home-gap: 32px;
    --section-title-size: 24px;
  }
}
@media (max-width: 520px) {
  :root { --section-title-size: 22px; }
}

/* ============================================================================
 * 全局基线 [实测]
 * ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.no-smooth { scroll-behavior: auto; }
body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  background: var(--c-canvas);
  color: var(--c-text);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: 0; }

/* 焦点可见性 [实测] */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(40, 120, 240, 0.32);
  outline-offset: 3px;
}

/* 按压反馈 [实测] */
button:active,
.button:active,
a.header-login:active { transform: translateY(1px) scale(0.98); }

/* 主题切换过渡 [实测] */
.theme-changing body,
.theme-changing main,
.theme-changing footer,
.theme-changing .site-header {
  transition:
    color var(--dur-theme) ease,
    background-color var(--dur-theme) ease,
    border-color var(--dur-theme) ease,
    box-shadow var(--dur-theme) ease;
}

/* 减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}