/*
 * 企评社 PC 端共享样式基线（P3-G216 起，浅色专业风）。
 *
 * 与 /js/theme.js 的分工：token 值只在 theme.js 定义一处，本文件只写"机制"——
 * 组件类一律引用 var(--c-*)，不再出现裸色值，改主题永远只动 theme.js。
 *
 * 只有引了本文件的页面才会拿到这些类；未迁移页面（仍带 inline tailwind.config）
 * 完全不受影响，这是分批改版能一页一页推进的前提。
 *
 * 历史遗留的第二套配色 /css/styles.css（--color-primary:#FF6B00 的橙色 :root，19.6KB）
 * 经全仓 git grep 核实 0 个模板引用，已于 P3-G216 删除；本文件是唯一的自定义样式层。
 */

/* ---------- 基线 ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--c-page);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--c-primary) 16%, transparent); }

/* 键盘可达性：全站统一一圈，替代各页自带的散乱 outline */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- 面板与描边 ----------
   浅色版式靠 1px 描边 + 极浅投影分层级，不靠大阴影、不靠反白。 */
.panel {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
}
.panel-quiet { background: var(--c-surface2); box-shadow: none; }
.panel-hover { transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.panel-hover:hover {
  border-color: var(--c-line2);
  box-shadow: 0 2px 4px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .07);
}
.hairline { border-color: var(--c-line); }

/* ---------- 按钮 ----------
   橙色只留给主 CTA，一屏最多一个；次级一律描边中性。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  height: 2.375rem; padding: 0 1rem;
  border-radius: 8px; font-size: .875rem; font-weight: 600; line-height: 1;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn-primary { background: var(--c-cta); color: #fff; }
.btn-primary:hover { background: #A63A0A; }
.btn-brand { background: var(--c-primary); color: #fff; }
.btn-brand:hover { background: #1C4C86; }
.btn-ghost { background: var(--c-surface); color: var(--c-ink); border-color: var(--c-line2); }
.btn-ghost:hover { background: var(--c-surface2); border-color: var(--c-faint); }
.btn-sm { height: 2rem; padding: 0 .75rem; font-size: .8125rem; }

/* ---------- 次级文本与标签 ---------- */
.lead { color: var(--c-mute); font-size: 1.0625rem; line-height: 1.7; }
.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-faint);
}
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  color: var(--c-mute); font-size: .8125rem; text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.chip:hover { border-color: var(--c-line2); color: var(--c-ink); }
.chip[aria-selected="true"], .chip.is-active {
  background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface));
  border-color: color-mix(in srgb, var(--c-primary) 28%, var(--c-line));
  color: var(--c-primary); font-weight: 600;
}

/* ---------- 表单控件（工具页主力元素） ---------- */
.field {
  width: 100%; background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-line2); border-radius: 8px;
  padding: .55rem .75rem; font-size: .9375rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field:hover { border-color: var(--c-faint); }
.field:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 14%, transparent);
}
.field::placeholder { color: var(--c-faint); }
.label { display: block; font-size: .8125rem; font-weight: 600; color: var(--c-mute); margin-bottom: .35rem; }

/* 数字与代码：等宽 + 细字距，计算器类结果的读数更稳 */
.num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---------- 分隔与区块节奏 ---------- */
.rule { height: 1px; background: var(--c-line); border: 0; }
.section-tight { padding-top: 4.5rem; padding-bottom: 5rem; }

/* ---------- 深色品牌面（页脚/hero 若保留深色时使用） ---------- */
.brand-face { background: var(--c-primary); color: #fff; }
.brand-face a { color: rgba(255, 255, 255, .82); }
.brand-face a:hover { color: #fff; }

/* 尊重系统的减弱动效设置：全站 reveal/hover 位移一律关掉 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}