/* =========================================================================
 * tokens.css · OPC 设计令牌（Single Source of Design Truth）
 * 对标 DeepSeek 精致度：单一蓝色强调、发丝级边框、柔和弥散阴影、极致留白。
 *
 * P10：移除外部 Google Fonts @import（阻塞渲染 + 隐私），改用系统字体栈本地兜底。
 * P11：主蓝统一为 #4D6BFE（DeepSeek 基准），所有强调色/悬停/渐变收拢进令牌。
 * P12：新增阴影、圆角、间距、渐变令牌，供全站精致度系统化引用。
 * ========================================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- 中性色阶（DeepSeek 深板岩文字，绝不用纯黑）---- */
  --bg: #ffffff;
  --surface: #f7f8fa;      /* 柔和面板底 */
  --surface-2: #f1f3f7;    /* 更深一档面板 */
  --text: #1d1d1f;
  --muted: #6b7280;        /* 次级文字（较原 #81858c 更沉稳，提升对比） */
  --muted-2: #a2a8b3;      /* 三级/占位文字 */
  --line: #edeef1;         /* 发丝级边框（极浅灰） */
  --line-strong: #e2e4e9;  /* 需要更明确分隔时 */

  /* ---- 单一蓝色强调体系（DeepSeek #4D6BFE）---- */
  --accent: #4d6bfe;
  --accent-rgb: 77, 107, 254;
  --accent-hover: #3a57ef;  /* 悬停加深 */
  --accent-strong: #2f49d6; /* 按压/高对比 */
  --accent-soft: #eef2ff;   /* 浅蓝填充（pill / chip / 选中态） */
  --accent-soft-line: #dbe2ff;

  /* ---- 实体卡片纯色浅灰底（名录/机构 item：去渐变、去线框，参考首页 OPC资讯 --surface）---- */
  --entity-card: #f7f8fa;        /* 常态：纯色浅灰，对齐 --surface */
  --entity-card-hover: #f1f3f7;  /* 悬停：加深一档（对齐 --surface-2） */
  --entity-ph: #eceef2;          /* 占位图底：中性浅灰（不使用品牌蓝） */
  --entity-ph-fg: #9aa0ab;       /* 占位图文字：中性灰 */

  /* ---- 品牌渐变（hero / 占位 / logo）：蓝 → 蓝紫，统一走向 ---- */
  --grad-brand: linear-gradient(135deg, #4d6bfe 0%, #7c5cff 100%);
  --grad-brand-btn: linear-gradient(120deg, #4d6bfe 0%, #7c5cff 100%);
  --grad-ambient-light: linear-gradient(150deg, #e6edff 0%, #eef3ff 100%);
  /* ---- 环境氛围渐变（DeepSeek 柔和蓝紫光晕，用于页面背景）---- */
  --ambient:
    radial-gradient(1200px 620px at 82% -8%, rgba(77, 107, 254, .06), transparent 60%),
    radial-gradient(1000px 560px at 8% 4%, rgba(124, 92, 255, .05), transparent 58%);

  /* ---- 圆角 ---- */
  --radius-pill: 9999px;
  --radius-card: 16px;
  --radius-field: 12px;
  --radius-tag: 8px;

  /* ---- 柔和弥散阴影（DeepSeek 低对比、大扩散）---- */
  --shadow-xs: 0 1px 2px rgba(29, 29, 31, .04);
  --shadow-sm: 0 2px 10px -4px rgba(29, 29, 31, .08);
  --shadow-md: 0 12px 30px -14px rgba(29, 29, 31, .14);
  --shadow-lg: 0 14px 26px -16px rgba(29, 29, 31, .2);
  --shadow-accent: 0 8px 22px -10px rgba(var(--accent-rgb), .5);
  --shadow-btn: 0 6px 16px -4px rgba(var(--accent-rgb), .42);
  --shadow-btn-hover: 0 10px 22px -6px rgba(var(--accent-rgb), .5);
  --shadow-avatar: 0 2px 8px rgba(29, 29, 31, .08);
  --shadow-avatar-lg: 0 4px 12px rgba(29, 29, 31, .08);

  /* ---- 间距节奏 ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* ---- 字体：系统栈本地兜底，无外部请求 ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);

  /* ---- 语义色（pill 类型标签）---- */
  --semantic-community-bg: #eef7ee;
  --semantic-community-fg: #2e8b4f;
  --semantic-incubator-bg: #fdf0e6;
  --semantic-incubator-fg: #c2650a;
  --semantic-alliance-bg: #f1eefb;
  --semantic-alliance-fg: #6a3fd6;

  /* ---- 页脚深色主题 ---- */
  --footer-bg: #0c0e16;
  --footer-text: rgba(255, 255, 255, .55);
  --footer-text-muted: rgba(255, 255, 255, .42);
  --footer-text-dim: rgba(255, 255, 255, .32);
  --footer-text-faint: rgba(255, 255, 255, .22);
  --footer-border: rgba(255, 255, 255, .07);
  --footer-hover: rgba(255, 255, 255, .85);

  /* ---- 插件兼容性桥接（QAPress / wpcom-member）---- */
  /* 目的：让第三方插件自动继承 OPC 设计标准，无需修改插件源码。
     QAPress 使用 --theme-* / --qa-* 变量，wpcom-member 使用 --member-* 变量，
     这里将它们映射到 OPC tokens，确保全站主色调/圆角/文字灰度统一。 */

  /* 主色调桥接 */
  --theme-color: var(--accent);
  --theme-hover: var(--accent-hover);
  --qa-color: var(--accent);
  --qa-hover: var(--accent-hover);
  --member-color: var(--accent);
  --member-hover: var(--accent-hover);

  /* 文字颜色桥接 */
  --theme-black-color: var(--text);
  --theme-gray-color: var(--muted);
  --theme-light-color: var(--muted-2);
  --qa-black-color: var(--text);
  --qa-gray-color: var(--muted);
  --qa-light-color: var(--muted-2);

  /* 边框/背景桥接 */
  --theme-line-color: var(--line);
  --theme-border-color: var(--line-strong);
  --theme-el-bg-color: var(--bg);
  --qa-line-color: var(--line);
  --qa-border-color: var(--line-strong);
  --qa-el-bg-color: var(--bg);
  --member-el-bg-color: var(--bg);
  --member-line-color: var(--line);
  --member-border-color: var(--line-strong);

  /* 圆角桥接（映射关系：s→tag 8px, m→field 12px, l→card 16px）*/
  --theme-border-radius-s: var(--radius-tag);
  --theme-border-radius-m: var(--radius-field);
  --theme-border-radius-l: var(--radius-card);
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--ambient);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* 无障碍：尊重"减少动态效果"偏好，关闭全站过渡/动画（质量底线） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
