/* ==========================================================================
   tokens.css — 云希谷科技 GUROBOT 设计令牌层
   方向：极致极简 × 工业科技。极简白为底、深空灰为技术面、亮橘为唯一强调色。
   所有颜色/间距/圆角/阴影/时长必须走变量，组件内禁止硬编码。
   ========================================================================== */

:root {
  /* ======================================================================
     色彩：三色语言 —— 亮橘 / 白 / 深空灰
     全站只允许这三族颜色 + 一个错误红（功能性必需，不可用于装饰）。
     组件层禁止硬编码色值，一律走这里的变量。
     ====================================================================== */

  /* ---- 亮橘族：唯一强调色，占比 ≤10% ---- */
  --c-accent: #f97316;        /* 主橘，CTA / 关键数据 / 焦点 */
  --c-accent-600: #ea6a0b;    /* 按压态 */
  --c-accent-400: #fb923c;    /* 渐变亮端 */
  --c-accent-200: #fdba74;    /* 深色面上的橘字 / 图表浅橘 */
  --c-accent-deep: #c2410c;   /* 渐变暗端（干净橘，不用脏棕） */
  --c-accent-soft: #fff3e9;   /* 橘底面，浅色区标签 */

  /* ---- 白族：占比 60%，承载全部留白与浅灰面 ---- */
  --c-bg: #ffffff;            /* 主背景 纯白 */
  --c-surface: #f8fafc;       /* 浅灰面 Slate-50 */
  --c-surface-2: #f1f5f9;     /* 次级灰面（唯一浅灰，禁止偏蓝灰） */
  --c-line: #e2e8f0;          /* 边框与分割线 */
  --c-line-2: #cbd5e1;        /* 描边 / 图标灰 */

  /* ---- 深空灰族：占比 30%，文字与技术面 ---- */
  --c-ink: #0f172a;           /* 主文字 / 科技面底 */
  --c-ink-2: #475569;         /* 次要说明文字 */
  --c-ink-3: #94a3b8;         /* 占位 / 失效文字 */
  --c-tech: #0f172a;          /* 深色板块底 */
  --c-tech-card: #1b2537;     /* 深色板块内卡片 */
  --c-tech-hi: #24314a;       /* 深色渐变高光端 */
  --c-tech-lo: #0b1220;       /* 深色渐变暗端 */
  /* ---- 语义色：全站仅两个例外，禁止装饰性使用 ---- */
  --c-danger: #dc2626;        /* 仅用于表单错误态 */
  --c-trust: #0284c7;         /* 版权合规信任蓝：正版认证徽章 / 知识产权高亮 */

  /* ======================================================================
     透明档位：全部收敛成固定梯度，组件禁止自造 alpha 值。
     就近归档时可容忍的最大偏差 ≤0.08，肉眼无跳变。
     ====================================================================== */

  /* 深色面上的文字层级：100 / 78 / 66 / 48 / 42 / 24 */
  --on-tech: #f8fafc;
  --on-tech-80: rgba(248, 250, 252, 0.78);
  --on-tech-2: rgba(248, 250, 252, 0.66);
  --on-tech-50: rgba(248, 250, 252, 0.48);
  --on-tech-3: rgba(248, 250, 252, 0.42);
  --on-tech-4: rgba(248, 250, 252, 0.24);

  /* 深色面上的面与线：16 / 10 / 05 / 03 */
  --c-tech-mist: rgba(255, 255, 255, 0.16);   /* 圆点/图标 */
  --c-tech-veil: rgba(255, 255, 255, 0.1);    /* 胶囊底 / 分隔线 */
  --c-tech-ghost: rgba(255, 255, 255, 0.05);  /* 行底 */
  --c-tech-faint: rgba(255, 255, 255, 0.03);  /* 极淡行底 */
  --c-tech-line: rgba(255, 255, 255, 0.1);    /* 分隔线（与 veil 同值，语义分离） */

  /* 深空灰透明：浅色面上的描边与投影 44 / 16 / 08 / 05 */
  --ink-a4: rgba(15, 23, 42, 0.44);
  --ink-a3: rgba(15, 23, 42, 0.16);
  --ink-a2: rgba(15, 23, 42, 0.08);
  --ink-a1: rgba(15, 23, 42, 0.05);
  --tech-shadow: rgba(11, 18, 32, 0.72);      /* 深色卡投影（深空灰，非纯黑） */

  /* 亮橘透明：70 / 35 / 22 / 14 / 06 */
  --accent-a5: rgba(249, 115, 22, 0.7);
  --accent-a4: rgba(249, 115, 22, 0.35);
  --accent-a3: rgba(249, 115, 22, 0.22);
  --accent-a2: rgba(249, 115, 22, 0.14);
  --accent-a1: rgba(249, 115, 22, 0.06);
  --accent-lit: rgba(253, 186, 116, 0.16);    /* 浅橘描边/发光 */

  /* ---- 字体 ---- */
  --font-cn: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans CN",
    "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-num: "DIN Pro", "DIN Alternate", "Bahnschrift", "Oswald",
    "HarmonyOS Sans", var(--font-cn);
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Cascadia Mono", monospace;

  /* 字阶：1.25 模块化比例 */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 4rem;

  /* ---- 间距梯度 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- 圆角 ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- 阴影三级：Y 偏移 2 / 12 / 28，带环境色而非纯黑 ---- */
  --sh-1: 0 2px 8px rgba(15, 23, 42, 0.05);
  --sh-2: 0 12px 24px -4px rgba(15, 23, 42, 0.08);
  --sh-3: 0 28px 64px -14px rgba(15, 23, 42, 0.16);
  --sh-accent: 0 10px 24px -6px rgba(249, 115, 22, 0.42);

  /* ---- 动效 ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 720ms;

  /* ---- 布局 ---- */
  --max: 1280px;
  --gutter: 48px;
  --header-h: 76px;

  /* ======================================================================
     安全区（刘海屏 / 底部横条避让）
     必须配 viewport-fit=cover 才生效；不支持 env() 的旧引擎整条声明失效，
     自动退回无安全区的原始布局，不会出现负值 padding。
     ====================================================================== */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}