/* ==========================================================================
   Linkshing 官网 · 设计变量（Design Tokens）
   来源：PROJECT-BRIEF.md 第五节「设计规范」
   说明：全局唯一变量源，所有页面与组件必须引用此处变量，禁止硬编码色值
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     一、品牌配色（从官方 Logo 提取，禁止修改）
     ------------------------------------------------------------------ */

  /* 品牌蓝（主色）—— 主按钮、标题强调、链接、导航高亮 */
  --color-primary: #0062F2;
  /* 品牌蓝-深 —— hover / 按下态 */
  --color-primary-dark: #0047B3;
  /* 品牌蓝-浅 —— 卡片底、标签底 */
  --color-primary-light: #E8F1FE;

  /* 品牌橙 —— 数据数字、标签、标题下划线（不作白字底色） */
  --color-accent: #F06000;
  /* 品牌橙-按钮底 —— 白字坐此底色对比度 4.85:1，满足 WCAG AA
     （品牌橙原色 #F06000 配白字仅 3.29:1，故按钮底单独加深） */
  --color-accent-ink: #C24C00;
  /* 品牌橙-按钮 hover */
  --color-accent-ink-hover: #A84100;
  /* 品牌橙-浅 —— 橙色浅底标签 */
  --color-accent-light: #FFF0E6;

  /* 中性色 */
  --color-ink: #1A1A1A;          /* 墨黑：标题 */
  --color-text: #4D4D4D;         /* 深灰：正文 */
  --color-text-muted: #6B6B6B;   /* 中灰：辅助文字（经 WCAG AA 校验，白/浅灰/浅蓝/浅橙底均 ≥4.5:1） */
  --color-bg: #F5F6F8;           /* 浅灰：页面背景 */
  --color-border: #E5E7EB;       /* 边框：分割线 */
  --color-white: #FFFFFF;        /* 白：卡片 */

  /* 语义色（表单校验反馈，非品牌色，按需使用） */
  --color-error: #D92D20;
  --color-success: #12B76A;

  /* ------------------------------------------------------------------
     二、字体
     ------------------------------------------------------------------ */

  /* 系统字体栈（BRIEF 指定，不引入外部字体） */
  --font-family-base: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  /* 西文专用字体栈 —— 用于英文小字（eyebrow 副标题、面包屑英文等）
     只作用于拉丁字符，中文字符自动回落到 --font-family-base。
     字体文件本地托管于 assets/fonts/，不依赖第三方 CDN。 */
  --font-family-latin: "Inter", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;

  /* 字号阶梯：桌面 / 移动（移动端在 media query 中覆盖） */
  --fs-hero: 56px;      /* Hero 主标题 */
  --fs-h1: 40px;        /* 一级标题 */
  --fs-h2: 32px;        /* 二级标题 */
  --fs-h3: 24px;        /* 三级标题 */
  --fs-body: 16px;      /* 正文 */
  --fs-small: 14px;     /* 辅助文字 */

  /* 行高 */
  --lh-heading: 1.3;    /* 标题行高 */
  --lh-body: 1.7;       /* 正文行高 */

  /* 字重 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ------------------------------------------------------------------
     三、间距（基础单位 8px）
     ------------------------------------------------------------------ */

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;    /* 板块上下间距（桌面） */
  --space-16: 128px;

  --section-padding-y: 96px;   /* 板块上下内边距（移动端 56px） */

  /* ------------------------------------------------------------------
     四、布局
     ------------------------------------------------------------------ */

  --container-max: 1200px;     /* 内容容器最大宽度 */
  --container-gutter: 24px;    /* 容器左右留白（移动端 16px） */

  /* 断点（供文档参考，实际写在 media query 中） */
  /* 375px 移动 | 768px 平板 | 1024px 小桌面 | 1440px 大桌面 */

  /* ------------------------------------------------------------------
     五、圆角
     ------------------------------------------------------------------ */

  --radius-sm: 8px;      /* 按钮 */
  --radius-md: 12px;     /* 卡片 */
  --radius-lg: 16px;     /* 大卡片 */
  --radius-pill: 999px;  /* 胶囊按钮 */

  /* ------------------------------------------------------------------
     六、阴影
     ------------------------------------------------------------------ */

  --shadow-card: 0 4px 20px rgba(0, 0, 0, .06);       /* 卡片默认阴影 */
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, .10); /* 卡片悬停阴影 */

  /* ------------------------------------------------------------------
     七、动效
     ------------------------------------------------------------------ */

  --transition-base: .25s ease;   /* 通用过渡 */
  --reveal-distance: 20px;        /* 入场淡入上移距离 */
  --reveal-duration: .5s;         /* 入场动画时长 */
  --hover-lift: -4px;             /* 卡片悬停上浮距离 */

  /* 层级 */
  --z-header: 100;
  --z-drawer: 200;
}

/* ==========================================================================
   移动端字号降级（BRIEF：Hero 32 / H1 28 / H2 24 / H3 20 / 正文 15 / 辅助 13）
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --fs-hero: 32px;
    --fs-h1: 28px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-body: 15px;
    --fs-small: 13px;

    --section-padding-y: 56px;
    --container-gutter: 16px;
  }
}