/* ==========================================================================
 * 智客云 · 产品介绍页（独立部署）· 设计令牌
 * 与原型 prototype-vue/src/shared/tokens.css 对齐：改这里 = 全站换肤。
 * 换肤同步点：本文件 --accent 四件套 + index.html 的 favicon 色值。
 * ========================================================================== */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-var.woff2') format('woff2');
}

:root {
  /* ---------- 表面 ---------- */
  --canvas: #E4E6E9;
  --bg: #F4F5F7;
  --bg-warm: #FBFAF9;
  --card: #FFFFFF;
  --inset: #F7F8F9;
  --line: #DFE2E6;
  --divider: #EEF0F2;
  --dark: #14171A;
  --dark-2: #1D2126;
  --dark-line: #2C3238;

  /* ---------- 文字 ---------- */
  --ink: #14171A;
  --ink-2: #5B6470;
  --ink-3: #8B939E;
  --ink-4: #C3CAD1;
  --on-dark: #FFFFFF;
  --on-dark-2: #A9B2BC;
  --on-accent-2: #FFD9C2;

  /* ---------- 动作与语义（★ 换肤点） ---------- */
  --accent: #FF6A1F;
  --accent-deep: #E04E00;
  --accent-bg: #FFF3EA;
  --accent-line: #FFD6B8;
  --danger: #C0392B;
  --danger-bg: #FCEBE9;
  --warn: #C2721A;
  --warn-bg: #FFF6E8;

  /* ---------- 渐变档位（只用于结果数字 / 装饰面） ---------- */
  --g1: linear-gradient(135deg, #FF8A3D 0%, #FF5A00 100%);
  --g2: linear-gradient(135deg, #FFBD5C 0%, #FF8A00 100%);
  --g3: linear-gradient(135deg, #FF8570 0%, #EE4C2E 100%);
  --g5: linear-gradient(135deg, #57CFC4 0%, #12968C 100%);
  --g-hero: linear-gradient(120deg, #FF7A29 0%, #FF5A00 48%, #DE4A00 100%);
  --g-gloss: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 55%);
  --g-shadow-1: 0 6px 18px rgba(255, 90, 0, .26);
  --g-shadow-hero: 0 14px 34px rgba(224, 78, 0, .30);

  /* ---------- 状态色 ---------- */
  --st-paid: #2F6FEB;
  --st-done: #2E7D32;
  --st-done-bg: #E6F2E7;
  --st-ready: #0F8A9E;
  --st-ready-bg: #E4F3F6;

  /* ---------- 圆角 ---------- */
  --r-card: 18px;
  --r-inner: 16px;
  --r-btn: 14px;
  --r-pill: 999px;
  --r-tag: 6px;

  /* ---------- 阴影 ---------- */
  --shadow-card: 0 1px 2px rgba(20, 23, 26, .04), 0 8px 18px rgba(20, 23, 26, .05);
  --shadow-lift: 0 2px 4px rgba(20, 23, 26, .04), 0 18px 44px rgba(20, 23, 26, .10);
  --shadow-deep: 0 30px 70px rgba(20, 23, 26, .16);

  /* ---------- 字体 ---------- */
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;
  --font-num: "Outfit", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ---------- 版心 ---------- */
  --wrap: 1200px;
  --nav-h: 68px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }   /* height:auto 必须保留：否则 width/height 属性会把截图压变形 */
svg { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
.num, time { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }