/* ═══════════════════════════════════════════════════════════════
   Satisficing Lab · 品牌色彩系统 CSS 变量
   版本: v2.0 · 2026-06-16
   使用: <link rel="stylesheet" href="/css_brand_vars.css">
   命名: --sl-* (Satisficing Lab) 避免与现有 -- 变量冲突
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 品牌主色 ── */
  --sl-red:        #C23B22;   /* 火星红 · 品牌强调色 */
  --sl-gold:       #B8860B;   /* 暗金色 · 高端点缀 */
  --sl-bg:         #F5F0E6;   /* 纸本色 · 全局背景 */
  --sl-ink:        #4A4A4A;   /* 墨灰色 · 正文 */
  --sl-title:      #2A2A2A;   /* 深墨色 · 标题 */
  --sl-border:     #E0D5C0;   /* 枯草色 · 分割线/边框 */
  --sl-white:      #FFFFFF;   /* 纯白 · 卡片背景 */
  --sl-light-gold: #FBF8F2;   /* 淡金色 · 悬停/选中背景 */

  /* ── 功能色扩展 ── */
  --sl-green:      #2D8B4E;   /* 成功/绿灯 */
  --sl-orange:     #E67E22;   /* 警告/黄灯 */
  --sl-blue:       #4682B4;   /* 信息/链接 */
  --sl-teal:       #00897B;   /* 木属性辅助色 */
  --sl-silver:     #C0C0C0;   /* 金属性辅助色 */
  --sl-wood:       #8B6914;   /* 土属性辅助色 */

  /* ── 语义变量 ── */
  --sl-text-primary:    var(--sl-title);
  --sl-text-secondary:  var(--sl-ink);
  --sl-text-muted:      #8A8A8A;
  --sl-text-inverse:    var(--sl-white);

  --sl-bg-primary:      var(--sl-bg);
  --sl-bg-card:         var(--sl-white);
  --sl-bg-raised:       var(--sl-light-gold);
  --sl-bg-inverse:      #2A2A2A;

  --sl-border-default:  var(--sl-border);
  --sl-border-focus:    var(--sl-red);

  --sl-accent:          var(--sl-red);
  --sl-accent-hover:    #A5321C;
  --sl-accent-light:    #FEF5F2;

  /* ── 交互状态 ── */
  --sl-hover-bg:        var(--sl-light-gold);
  --sl-hover-border:    var(--sl-red);
  --sl-selected-bg:     #FEF5F2;
  --sl-disabled-bg:     #E8E3D8;
  --sl-disabled-text:   #B0B0B0;

  /* ── 评分/等级色 ── */
  --sl-score-high:      var(--sl-green);    /* ≥80% */
  --sl-score-medium:    var(--sl-orange);   /* 50-79% */
  --sl-score-low:       var(--sl-red);      /* <50% */

  /* ── 阴影 ── */
  --sl-shadow-sm:       0 1px 3px rgba(74, 74, 74, 0.08);
  --sl-shadow-md:       0 4px 12px rgba(74, 74, 74, 0.12);
  --sl-shadow-lg:       0 8px 24px rgba(74, 74, 74, 0.16);

  /* ── 圆角 ── */
  --sl-radius-sm:       4px;
  --sl-radius-md:       8px;
  --sl-radius-lg:       16px;
  --sl-radius-pill:     9999px;

  /* ── 字体 ── */
  --sl-font-sans:       "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sl-font-mono:       "SF Mono", "Cascadia Code", monospace;

  /* ── 字号 ── */
  --sl-text-xs:         0.75rem;   /* 12px */
  --sl-text-sm:         0.875rem;  /* 14px */
  --sl-text-base:       1rem;      /* 16px */
  --sl-text-lg:         1.125rem;  /* 18px */
  --sl-text-xl:         1.25rem;   /* 20px */
  --sl-text-2xl:        1.5rem;    /* 24px */
  --sl-text-3xl:        1.875rem;  /* 30px */

  /* ── 间距 ── */
  --sl-space-xs:        4px;
  --sl-space-sm:        8px;
  --sl-space-md:        16px;
  --sl-space-lg:        24px;
  --sl-space-xl:        32px;
  --sl-space-2xl:       48px;

  /* ── 过渡 ── */
  --sl-transition-fast: 0.15s ease;
  --sl-transition-base: 0.3s ease;
}

/* ── 暗色模式预留 ── */
@media (prefers-color-scheme: dark) {
  :root {
    /* 当前无暗色设计需求，占位 */
  }
}