/* ==========================================================================
   Liquidmetal 中文站 · 设计令牌（Design Tokens）
   规范来源：liquidmetal-cn/UI设计规范.md（数值逐字对应，禁止改动）
   本文件只做「变量集中定义」；组件样式在 newlqmt.webflow.min.css / custom.css，
   CMS 动态区块样式在 cms.css（必须引用本文件变量，禁止魔法值）。
   加载顺序：tokens.css → newlqmt.webflow.min.css → custom.css → cms.css
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
   * 1. 核心色板（与原站 :root 一一对应）
   * ------------------------------------------------------------------ */
  --white: #f3f4f8;              /* 页面主背景色 / 深底上的主文字色（非纯白） */
  --black: #222222;              /* 主文本色 */
  --white-2: #ffffff;            /* 纯白（表单卡片等） */
  --black-2: #000000;            /* 纯黑（遮罩等） */
  --lqm-blue: #222222;           /* 历史遗留变量：名义蓝，实为黑，勿当蓝色使用 */

  /* 别名令牌（语义化，新代码优先使用） */
  --color-bg-page: var(--white);
  --color-surface-white: var(--white-2);
  --color-text-primary: var(--black);

  /* ------------------------------------------------------------------
   * 2. 品牌色 / 渐变色
   * ------------------------------------------------------------------ */
  --color-brand-navy: #091f40;          /* 主按钮/Tab 激活渐变起点 */
  --color-brand-bluegrey: #819ec9;      /* 主按钮渐变终点 */
  --color-brand-stroke: #b8c3d4;        /* 主按钮 2px 描边 */
  --color-tab-gradient-end: #888482;    /* Tab 激活渐变终点 */
  --color-mask-hero-start: #0c4068;     /* Hero 视频遮罩渐变起 */
  --color-mask-hero-end: #8d867f;       /* Hero 视频遮罩渐变终 */

  /* 渐变令牌 */
  --gradient-button: linear-gradient(90deg, var(--color-brand-navy), var(--color-brand-bluegrey));
  --gradient-tab-active: linear-gradient(100deg, var(--color-brand-navy), var(--color-tab-gradient-end));
  --gradient-hero-mask: linear-gradient(90deg, var(--color-mask-hero-start), var(--color-mask-hero-end));

  /* ------------------------------------------------------------------
   * 3. 文本色
   * ------------------------------------------------------------------ */
  --color-text-body: #555555;           /* 浅底上的正文段落 */
  --color-text-label: #444444;          /* 表单 label */
  --color-text-input: #333333;          /* 输入框文字 */
  --color-text-placeholder: #999999;    /* placeholder */
  --color-text-inverse: var(--white);   /* 深底上的白标题（= --white） */
  --color-text-on-dark-secondary: #dddddd; /* 页脚链接 / 深色区块辅助文字 */

  /* ------------------------------------------------------------------
   * 4. 背景色
   * ------------------------------------------------------------------ */
  --color-bg-section-grey: #ededed;     /* 浅灰区块 / 下拉项 hover */
  --color-bg-marquee-light: #d7dde7;    /* 浅色跑马灯条 */
  --color-bg-dark-section: #1e232b;     /* 深色区块 / 移动菜单 */
  --color-bg-dark-alt: #1e242e;         /* 深色跑马灯条变体 */
  --color-bg-dropdown: var(--white);    /* 下拉菜单项背景 */
  --color-bg-overlay: rgba(34, 34, 34, 0.70); /* 移动菜单全屏遮罩 #222222b3 */
  --color-bg-video-mask: rgba(34, 34, 44, 0.80); /* 视频弹窗遮罩 */

  /* ------------------------------------------------------------------
   * 5. 玻璃拟态（hero / 深底按钮）
   * ------------------------------------------------------------------ */
  --color-glass-bg: rgba(248, 245, 243, 0.15);   /* #f8f5f326 */
  --color-glass-border: rgba(248, 245, 243, 0.30); /* #f8f5f34d */
  --color-glass-hover: rgba(248, 245, 243, 0.32);  /* #f8f5f352 */

  /* ------------------------------------------------------------------
   * 6. 边框 / 描边
   * ------------------------------------------------------------------ */
  --border-button: 2px solid var(--color-brand-stroke);
  --color-border-input: #d3d3d3;        /* 输入框 / 文本域 1px 描边 */
  --color-border-divider-dark: #494d51; /* 页脚分隔线 */
  --border-input: 1px solid var(--color-border-input);

  /* ------------------------------------------------------------------
   * 7. 状态色
   * ------------------------------------------------------------------ */
  --color-success: #18ad3a;             /* 表单成功提示 */
  --color-error: #ea384c;               /* 表单失败强调 */
  --color-error-bg: #ffdede;            /* 表单失败提示背景 */
  --color-focus: #3898ec;               /* 输入框 focus 描边（Webflow 默认蓝，保留） */

  /* ------------------------------------------------------------------
   * 8. 字体
   * ------------------------------------------------------------------ */
  /* MiSans VF 为主字体（含全角标点），中文系统字体作回退 */
  --font-family-base: "MiSans VF", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-label: 700;             /* 仅表单 label 使用 */

  --fs-h1: 4rem;      /* 64px */
  --fs-h2: 3rem;      /* 48px */
  --fs-h3: 2rem;      /* 32px */
  --fs-body: 1.25rem; /* 20px */
  --fs-base: 1rem;    /* 16px */
  --fs-small: 0.9rem; /* 14.4px 辅助小字 */
  --fs-footer: 0.875rem; /* 14px 页脚版权 */

  --lh-heading: 120%;
  --lh-h3: 130%;
  --lh-body: 140%;

  /* ------------------------------------------------------------------
   * 9. 间距
   * ------------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;    /* 8px  输入框上下 */
  --space-xs: 1rem;       /* 16px 输入框左右 / 下拉项 */
  --space-sm: 1.2rem;     /* 主按钮纵向 */
  --space-md: 1.5rem;     /* 24px 跑马灯条上下 / 移动容器 padding */
  --space-lg: 2rem;       /* 32px Tab 卡片 / 纵向块 */
  --space-xl: 2.5rem;     /* 40px 表单卡片 / 页脚纵向块 */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 5rem;      /* 80px 页脚横向栏间距 */
  --space-section: 7.5rem;      /* 120px 标准区块上下（桌面） */
  --space-section-mobile: 4rem; /* 64px 标准区块上下（≤991px） */
  --space-container-x: 6rem;    /* 96px 容器左右 padding（桌面） */
  --space-hero-top: 15rem;      /* 240px */
  --space-hero-bottom: 4rem;    /* 64px */
  --space-marquee: 1.5rem;      /* 跑马灯条上下 */

  /* ------------------------------------------------------------------
   * 10. 布局容器
   * ------------------------------------------------------------------ */
  --container-max: 120rem;      /* 1920px 内容容器 */
  --container-small: 61rem;     /* 976px 文案居中区 */
  --container-blog: 75rem;      /* 1200px 博客/窄容器 */
  --container-posts: 90rem;     /* 博客列表画廊 */
  --container-design: 70rem;    /* design-guide 窄容器 */
  --radius-section: 1rem;       /* 区块内图片包裹层圆角 */

  /* ------------------------------------------------------------------
   * 11. 圆角
   * ------------------------------------------------------------------ */
  --radius-control: 10px;       /* 按钮 / 输入框 / 文本域 / Tab / 下拉面板 */
  --radius-card: 8px;           /* 表单卡片 */

  /* ------------------------------------------------------------------
   * 12. 阴影（本站扁平+玻璃风，除以下两处禁止加阴影）
   * ------------------------------------------------------------------ */
  --shadow-card: 0 0 16px rgba(34, 34, 34, 0.04);     /* #2222220a 表单卡片 */
  --shadow-dropdown: 0 0 24px rgba(36, 56, 86, 0.05); /* #2438560d 导航下拉 */

  /* ------------------------------------------------------------------
   * 13. 动效
   * ------------------------------------------------------------------ */
  --ease-site: cubic-bezier(0.215, 0.61, 0.355, 1);   /* 全站统一缓动 */
  --ease-dropdown: cubic-bezier(0.165, 0.84, 0.44, 1);
  --duration-fast: 0.3s;
  --duration-slow: 0.4s;

  /* ------------------------------------------------------------------
   * 14. 流式根字号（原站精确公式，必须原样实现）
   *      视口 ≥1512px：1rem = 16px 封顶
   * ------------------------------------------------------------------ */
  font-size: 16px;
}

@media (min-width: 240px) {
  :root { font-size: calc(12.8px + 3.2 * ((100vw - 240px) / 239)); }
}
@media (min-width: 768px) {
  :root { font-size: calc(12.8px + 3.2 * ((100vw - 768px) / 223)); }
}
@media (min-width: 992px) {
  :root { font-size: calc(12.8px + 3.2 * ((100vw - 992px) / 520)); }
}
@media (min-width: 1512px) {
  :root { font-size: calc(16px + 0 * ((100vw - 1512px) / 288)); }
}