/* =============================================================
   智链导航 v3.0.0 · 设计令牌（Design Tokens）
   -------------------------------------------------------------
   这是「换肤不换骨」的单一事实源：主色 / 间距 / 圆角 / 阴影 / 字号阶。
   旧的 --theme / --radius / --bg 等变量由 style.css 与 header.php 内联定义，
   本文件在其之上补一套语义化令牌（--sl-*），新组件（申请即时化 / 更新日志 /
   移动底部导航）一律消费 --sl-*，不再各写一套硬编码值。
   本文件必须在 style.css 之前加载（header.php）。
   ============================================================= */
:root {
  /* 主色阶（在后台 theme_color 覆盖 --theme 的基础上补一套固定色阶，供徽标/状态用） */
  --sl-primary:        var(--theme, #2563eb);
  --sl-primary-dark:   var(--theme-dark, #1d4ed8);
  --sl-primary-soft:   #eaf2fe;

  /* 语义色 */
  --sl-success:        #128a5a;
  --sl-success-soft:   #e8f6ef;
  --sl-warning:        #e0811a;
  --sl-warning-soft:   #fdf3e4;
  --sl-danger:         #dc2626;
  --sl-danger-soft:    #fdeaea;
  --sl-info-soft:      #f1f5fb;

  /* 中性色（与 style.css 的 --text/--muted/--border/--bg/--card 对齐） */
  --sl-text:           var(--text, #1f2937);
  --sl-muted:          var(--muted, #6b7280);
  --sl-border:         var(--border, #e5e7eb);
  --sl-bg:             var(--bg, #f5f7fb);
  --sl-card:           var(--card, #ffffff);

  /* 间距阶（4 的倍数） */
  --sl-space-1: 4px;
  --sl-space-2: 8px;
  --sl-space-3: 12px;
  --sl-space-4: 16px;
  --sl-space-5: 24px;
  --sl-space-6: 32px;

  /* 圆角阶 */
  --sl-radius-s: 6px;
  --sl-radius-m: var(--radius, 12px);
  --sl-radius-l: 18px;
  --sl-radius-pill: 999px;

  /* 阴影阶 */
  --sl-shadow-s: 0 2px 8px rgba(20, 40, 80, .06);
  --sl-shadow-m: 0 6px 24px rgba(20, 40, 80, .08);
  --sl-shadow-l: 0 18px 50px rgba(15, 23, 42, .16);

  /* 字号阶 */
  --sl-fs-xs: 12px;
  --sl-fs-sm: 13px;
  --sl-fs-md: 14px;
  --sl-fs-lg: 16px;
  --sl-fs-xl: 20px;
  --sl-fs-2xl: 26px;

  /* 移动底部导航高度 + 刘海屏安全区（全局可用） */
  --sl-bnav-h: 56px;
  --sl-safe-b: env(safe-area-inset-bottom, 0px);
}

/* 统一卡片基底：site-card / category-card / article-card 共享的圆角+阴影+底色。
   旧卡片样式在 style.css 里已成型，这里只补一个可复用的 .sl-card 基底类，
   新页面（更新日志/申请即时化）直接用，不回去改旧卡片以免回归。 */
.sl-card {
  background: var(--sl-card);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-m);
  box-shadow: var(--sl-shadow-s);
}

/* 暗色模式跟随（token 层补暗色微调） */
html[data-theme="dark"] {
  --sl-primary-soft:   rgba(37, 99, 235, .16);
  --sl-success-soft:   rgba(18, 138, 90, .16);
  --sl-warning-soft:   rgba(224, 129, 26, .16);
  --sl-danger-soft:    rgba(220, 38, 38, .16);
  --sl-info-soft:      rgba(148, 163, 184, .14);
  --sl-shadow-s: 0 2px 8px rgba(0, 0, 0, .3);
  --sl-shadow-m: 0 6px 24px rgba(0, 0, 0, .4);
  --sl-shadow-l: 0 18px 50px rgba(0, 0, 0, .55);
}
