/**
 * ============================================================
 * 智悦通服务中心 · 设计 Token（V1.0）
 * ============================================================
 * 来源：Figma《智悦通SSP_视觉方案》 node-id=5741-78「设计规范·智悦通服务中心」
 *       https://www.figma.com/design/t878F3lFL5JyCY0IVIgtM1/?node-id=5741-78
 * 版本：V1.0（Foundations · Components · 16 Screens）
 * 同步：本文件为静态站的唯一 token 手工镜像；Figma 规范更新时手动同步，
 *       并在下方变更记录追加一行。仅服务 sspzhiyue.com 静态页，
 *       与 App 端 @sspzhiyue/design 包无关。
 * 采用：只给有新设计的页面接入（<link rel="stylesheet" href="/styles/tokens.css">，
 *       注意 link 需在该页自身样式之前）；无新设计的存量页面不动。
 * 前缀：--zc-（zhiyetong），与本站旧变量（--primary-* 等）隔离。
 *
 * 变更记录：
 *   2026-08-27  按 Figma 5741-78 (rev 2026-08-26) 初建
 * ============================================================
 */

:root {
  /* ---------------------------------------------------------
   * 02 · 色彩系统
   * Figma 语义变量名 → kebab-case。品牌渐变仅用于强调与主要行动。
   * --------------------------------------------------------- */

  /* 品牌行动色三段渐变（官方文档值，02·Color 色板 chips） */
  --zc-action-gradient-start: #f59e0b;
  --zc-action-gradient-middle: #ef4444;
  --zc-action-gradient-end: #ec4899;

  /* 主行动实色橙：Button Primary 填充与 Top Bar 背景（组件实测绑定
   * VariableID 5736:110；02 色板未列出，但为组件层权威值） */
  --zc-action-primary: #ff6b35;

  /* 文字 */
  --zc-text-primary: #1e293b;
  /* 次要文字/描述/Meta（全规范正文描述均绑定此灰，5736:103 实测渲染值） */
  --zc-text-secondary: #64748b;

  /* 表面 */
  --zc-bg-surface: #ffffff;
  --zc-bg-video: #0f172a;

  /* 状态：视频播放器 Status=Pending（amber-100 底 / amber-800 字） */
  --zc-status-pending-bg: #fef3c7;
  --zc-status-pending-on: #92400e;

  /* 内容卡片类型底色（Content Card Type 变体实测填充；
   * 01 信息架构区另见功能卡淡紫 #F2EDFF、功能介绍淡粉 #FFF0FA 等
   * 单页变体——改版时以当页 Figma 标注为准，勿硬编码新值进这里） */
  --zc-card-product-bg: #fff7ed;
  --zc-card-feature-bg: #fce7f3;
  --zc-card-update-bg: #fef3c7;

  /* 品牌渐变组合式。⚠️ Cover hero 在 Figma 中用的是另一组更饱和的
   * 字面色 #FF8C0D → #FF4033 → #F02985，1:1 复刻封面时用该组；
   * 渐变方向按各页 Figma 标注调整。 */
  --zc-gradient-brand: linear-gradient(
    90deg,
    var(--zc-action-gradient-start),
    var(--zc-action-gradient-middle),
    var(--zc-action-gradient-end)
  );

  /* ---------------------------------------------------------
   * 03 · 字体系统
   * Noto Sans SC 字阶。用法：font: var(--zc-type-body) var(--zc-font-family);
   * ⚠️ 大陆访问 Google Fonts 不稳定；Noto Sans SC 是否 webfont 化
   * 由各页自行决定（本地托管 @font-face 或走系统回退栈）。
   * --------------------------------------------------------- */
  --zc-font-family:
    'Noto Sans SC', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;

  --zc-type-hero: 900 38px/46px; /* Hero */
  --zc-type-h1: 700 28px/36px; /* H1 */
  --zc-type-page-title: 700 24px/32px; /* Page Title */
  --zc-type-section-title: 700 18px/26px; /* Section Title */
  --zc-type-body: 400 14px/22px; /* Body */
  --zc-type-meta: 500 12px/18px; /* Meta */

  /* ---------------------------------------------------------
   * 04 · 布局与外观
   * 390px 移动端基准，8pt 节奏，20px 页面安全边距，内容宽 350px
   * （350×197 16:9 视频，不得超出内容列）。
   * --------------------------------------------------------- */
  --zc-space-4: 4px;
  --zc-space-8: 8px;
  --zc-space-12: 12px;
  --zc-space-16: 16px;
  --zc-space-20: 20px; /* 页面边距 */
  --zc-space-24: 24px; /* 区块间距（卡片内边距 16–24） */
  --zc-space-32: 32px;
  --zc-space-40: 40px;
  --zc-space-54: 54px;

  /* 圆角。按钮实际为胶囊（高度 54 的一半 = 27，等价 Full）。 */
  --zc-radius-button: 999px; /* 规范值 27 */
  --zc-radius-video: 18px; /* 视频容器 */
  --zc-radius-card: 20px; /* 内容卡片 */
  --zc-radius-full: 999px;

  /* 阴影：用于层级与悬浮，不做装饰性堆叠 */
  --zc-shadow-card: 0 10px 24px rgba(20, 31, 51, 0.12); /* Card Soft */
  --zc-shadow-video-focus: 0 12px 30px rgba(18, 26, 51, 0.18); /* Video Focus */
  /* Floating Action：规范仅列出名称，规范稿中未见实例值；
   * 待设计补充后再加 --zc-shadow-floating。 */
}