/* ==========================================================================
   Hairline Surface 设计系统(浅色主题 · Linear 克制风)
   规范来源:卡片边框hairline改造.md
   核心理念:结构边界用 border,层级边界用 box-shadow hairline
            层级型 Surface 移除赤裸 border,改用 box-shadow stack
   ========================================================================== */

:root {
  /* ── 三层 shadow 原子变量(黑 alpha,不超过 0.12) ── */
  --hairline-edge:      0 0 0 1px rgba(0, 0, 0, 0.06);   /* edge ring:1px zero-blur,定义边界 */
  --hairline-contact:   0 1px 2px rgba(0, 0, 0, 0.04);   /* contact shadow:贴地接触感 */
  --hairline-ambient:   0 4px 12px rgba(0, 0, 0, 0.06);  /* ambient shadow:环境氛围 */
  --hairline-top-glow:  inset 0 1px 0 rgba(255, 255, 255, 0.5); /* 顶部 inner highlight */

  /* ── 组合档位(消费侧引用) ── */
  --shadow-surface:        var(--hairline-edge), var(--hairline-contact), var(--hairline-ambient), var(--hairline-top-glow);
  --shadow-surface-hover:  0 0 0 1px rgba(37, 99, 235, 0.2), 0 2px 4px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-overlay:        0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-flat:           var(--hairline-edge), var(--hairline-contact); /* 紧凑组件:仅 edge + contact */
}

/* ==========================================================================
   地区选择卡片(.features .single-feature)
   原状:白底无 border 无默认 shadow,仅 hover 有重 shadow
   改造:默认加 hairline edge ring + 克制 ambient;hover 提升层级(蓝色 edge)
   ========================================================================== */
.features .single-feature {
  box-shadow: var(--shadow-surface) !important;
  -webkit-box-shadow: var(--shadow-surface) !important;
}

.features .single-feature:hover {
  box-shadow: var(--shadow-surface-hover) !important;
  -webkit-box-shadow: var(--shadow-surface-hover) !important;
}