/* ============================================================================
   tokens.css — 设计令牌层
   松讯智能官网 · 深空科技风（Retro-futuristic / 深色基座）

   定调说明
   ---------
   受众：制造业 / 园区 / 集团 / 政企单位的网络与智能化采购决策者。
   方向：深空科技风 —— 近黑深蓝底 + 单一青色强调 + 发丝网格 + 等宽数字。
   字体：Chakra Petch（拉丁展示，自托管）/ JetBrains Mono（数据与编号，自托管）
         / 中文采用系统黑体栈并靠字重、字距、渐变裁切达成展示级质感
         （中文完整字库 5MB+，对 1.6G 单核服务器与国内首屏速度不划算，
           故中文走系统栈，拉丁与数字走自托管展示字，这是本项目的刻意取舍）。
   记忆点：网络拓扑即界面 —— 会呼吸的节点连线贯穿首屏、分隔、卡片与进度线。

   本文件只放变量。禁止在组件里硬编码色值 / 字号 / 时长。
   ========================================================================== */

/* --- 自托管字体（拉丁子集，unicode-range 由 fonts.css 限定） --------------- */
@import url("../fonts/fonts.css");

:root {
  /* ===== 表面色：近黑 + 蓝调，绝不用纯黑 ===== */
  --c-void:      #04070e;   /* 最深一层（页面底） */
  --c-bg:        #060b16;   /* 页面背景 */
  --c-surface:   #0b1424;   /* 卡片 / 面板 */
  --c-surface-2: #111d31;   /* 抬高的卡片、悬停态 */
  --c-surface-3: #16253c;   /* 输入框、代码块 */

  /* ===== 发丝线：整套视觉的骨 ===== */
  --c-line:      rgba(126, 196, 220, 0.13);
  --c-line-2:    rgba(126, 196, 220, 0.26);
  --c-line-3:    rgba(126, 196, 220, 0.42);

  /* ===== 文字（对比度已实测，见 README） ===== */
  --t-hi:   #eaf4fb;   /* 标题      对 --c-bg ≈ 16.4:1 */
  --t-mid:  #a9bccd;   /* 正文      对 --c-bg ≈ 10.1:1 */
  --t-low:  #7e95a8;   /* 辅助说明  对 --c-bg ≈  6.0:1 */

  /* ===== 强调色：单屏只有一个，只留给关键动作 ===== */
  --a:        #2ee8dd;                       /* 青 —— 12.8:1 */
  --a-deep:   #12a89f;
  --a-soft:   rgba(46, 232, 221, 0.12);
  --a-glow:   rgba(46, 232, 221, 0.34);
  --a-text:   #04110f;                       /* 青底上的文字色 13.1:1 */
  /* 渐变高亮（标题里的 .hl）中间那一档往哪侧偏。
     深底要朝**白**偏，才显得是「发光」；换到明底就必须翻过来朝**深**偏，
     否则中间档会比 --a 还淡，实测会掉到 1.7:1 —— 首屏主标题直接看不清。 */
  --a-tint:   #ffffff;

  /* ===== 氛围色：只用于光晕与极少量数据对比，绝不作为交互色 ===== */
  --atmo-1:   rgba(46, 232, 221, 0.16);      /* 青 */
  --atmo-2:   rgba(96, 88, 255, 0.14);       /* 靛紫 */
  --atmo-3:   rgba(255, 107, 138, 0.07);     /* 品红，仅一点点 */
  --c-warn:   #ff6b8a;                       /* 仅用于数据对比 / 风险提示 */

  /* ===== 字体族 ===== */
  --f-cn:      "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
               "Noto Sans CJK SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --f-display: "Chakra Petch", var(--f-cn);
  --f-body:    var(--f-cn);
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ===== 字阶：模块化 1.25，中文字号整体上浮一档 ===== */
  --fs-xs:   0.75rem;    /* 12.0 */
  --fs-sm:   0.8438rem;  /* 13.5 */
  --fs-base: 0.9688rem;  /* 15.5 */
  --fs-md:   1.0625rem;  /* 17.0 */
  --fs-lg:   1.3125rem;  /* 21.0 */
  --fs-xl:   1.625rem;   /* 26.0 */
  --fs-2xl:  2rem;       /* 32.0 */
  --fs-3xl:  2.5rem;     /* 40.0 */
  --fs-4xl:  3.125rem;   /* 50.0 */
  --fs-5xl:  3.875rem;   /* 62.0 */

  /* 流式字号：小屏不溢出，大屏够震撼。
     首屏标题上限刻意压在 3.9rem —— 左栏只有约 707px，
     中文每字 1em，超过这个字号 20 字的标题会被挤成三行且断在词中间。 */
  --fs-hero:   clamp(2rem, 4.4vw, 3.9rem);
  --fs-sect:   clamp(1.75rem, 3.6vw, 2.75rem);
  --fs-sub:    clamp(1.125rem, 1.7vw, 1.5rem);

  /* ===== 行高与字距 ===== */
  --lh-display: 1.04;
  --lh-tight:   1.24;
  --lh-body:    1.78;    /* 中文正文 ≥1.7 */
  --ls-display: -0.025em;
  --ls-cn:      0.01em;
  --ls-caps:    0.14em;  /* 全大写标签 */

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

  /* ===== 圆角：整体偏锐，只有胶囊按钮用全圆 ===== */
  --r-xs: 2px;  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-pill: 999px;

  /* ===== 阴影：带环境色，不用纯黑 ===== */
  --sh-1: 0 2px 8px  rgba(2, 8, 18, 0.5);
  --sh-2: 0 8px 28px rgba(2, 8, 18, 0.58);
  --sh-3: 0 24px 64px rgba(2, 8, 18, 0.68);
  --sh-glow: 0 0 0 1px var(--a-soft), 0 12px 40px -12px var(--a-glow);

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

  /* ===== 布局 ===== */
  --w-page:  1240px;
  --w-text:  68ch;
  --h-nav:   74px;
  --z-bg: 0; --z-content: 1; --z-nav: 60; --z-drawer: 80; --z-modal: 100;
}

/* ============================================================================
   明色主题（供 prefers-color-scheme: light 使用）
   深空科技风以暗色为主体验；明色档是「打印 / 强光会议室」的兜底，
   刻意做成「冷白工程图纸」质感，而不是把暗色简单地反相。
   ========================================================================== */
:root[data-theme="light"] {
  --c-void:      #eef3f8;
  --c-bg:        #f6f9fc;
  --c-surface:   #ffffff;
  --c-surface-2: #f1f6fa;
  --c-surface-3: #e6eef6;

  --c-line:      rgba(11, 42, 66, 0.13);
  --c-line-2:    rgba(11, 42, 66, 0.24);
  --c-line-3:    rgba(11, 42, 66, 0.38);

  --t-hi:   #0a1a2a;
  --t-mid:  #3b5163;
  --t-low:  #5d7386;

  --a:        #0a7c74;      /* 明底上压深青，保证 4.5:1 以上 */
  --a-deep:   #065c56;
  --a-soft:   rgba(10, 124, 116, 0.10);
  --a-glow:   rgba(10, 124, 116, 0.22);
  --a-text:   #ffffff;
  /* 见深色主题里的说明：明底上渐变中间档必须朝深偏，否则对比度崩 */
  --a-tint:   #06201e;

  --atmo-1: rgba(10, 124, 116, 0.10);
  --atmo-2: rgba(80, 72, 220, 0.08);
  --atmo-3: rgba(214, 60, 90, 0.05);
  --c-warn: #c02a4c;

  --sh-1: 0 2px 8px  rgba(11, 42, 66, 0.07);
  --sh-2: 0 8px 28px rgba(11, 42, 66, 0.10);
  --sh-3: 0 24px 64px rgba(11, 42, 66, 0.14);
  --sh-glow: 0 0 0 1px var(--a-soft), 0 12px 36px -14px var(--a-glow);
}

/* 暗色为默认；显式声明一次，避免浏览器 UI 控件与滚动条打架 */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }