/* ═══════════════════════════════════════════════════════════════
   Stratis design tokens（T3.1 前端收敛 C1+C2，2026-07-16）
   单一事实源：色板 / 字阶 / 间距圆角 / 跨页共享组件。
   demo.html（W1）与 w2.html（W2）共同引入。

   主题机制：
   - :root            = canonical 暗金主题（值=w2.html 迁移前现值）。
     ⚠ --text-3 / --warn / --accent 经过 WCAG 对比度与色相区分度校准
     （v5 技术债表），改动前必须重算对比度——CLAUDE.md 红线。
   - html.theme-light = W1 现浅色值。C3 换肤=从 demo.html 移除该 class。

   命名以 W2 短名为准（--text-2 / --warn / --*-bg）；W1 旧长名
   （--text-secondary / --warning / --*-light）以别名保留，C3 后删除。
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── 语义色（暗金 canonical）── */
  --bg:            #14140F;
  --surface:       #1C1C16;
  --surface-alt:   #242419;
  --surface-3:     #2B2B1F;
  --border:        #33331F;
  --border-strong: #45452C;
  --border-2:      var(--border-strong);
  --text:          #EDEAE0;
  --text-2:        #A8A290;
  --text-3:        #948F7F;
  --accent:        #C9A14A;
  --accent-dim:    #8A7339;
  --accent-mid:    var(--accent-dim);
  --accent-bg:     #2A2316;
  --danger:        #D4756B;
  --danger-bg:     #2A1B18;
  /* warn 刻意与 accent(金,~40°)/danger(珊瑚红,~6°) 拉开色相距离(~28°)，
     避免"完成"和"卡住"两个状态肉眼难分 */
  --warn:          #D9822E;
  --warn-bg:       #2B2116;
  --ok:            #7FB088;
  --ok-bg:         #1C2A1E;
  --info:          #7FB3D9;
  --info-bg:       #1A2430;
  --success:       var(--ok);

  /* ── W1 旧名别名（过渡期，C3 完成后删）── */
  --text-secondary: var(--text-2);
  --text-tertiary:  var(--text-3);
  --accent-light:   var(--accent-bg);
  --warning:        var(--warn);
  --warning-light:  var(--warn-bg);
  --danger-light:   var(--danger-bg);

  /* ── 字阶（语义层级，源自 demo.html 2026-07-14 P2 重构）── */
  --fs-micro:   9px;   /* 引擎标签/微型徽章 */
  --fs-caption: 10px;  /* 徽章、stat副标签、极小说明 */
  --fs-small:   11px;  /* 次要文字、小按钮、meta信息 */
  --fs-body:    12px;  /* 描述性正文 */
  --fs-base:    13px;  /* 基准正文、卡片标题 */
  --fs-heading: 15px;  /* 面板标题 */
  --fs-stat:    18px;  /* 统计数字 */
  --fs-stat-lg: 24px;  /* 大号分数 */

  /* ── 间距 / 圆角 ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --r-sm: 5px; --r-md: 8px; --r-lg: 12px;

  /* ── 统一组件语义层（W1 / W2 / Client Review 共用）──
     原始值仍由上方 canonical tokens 管理；组件只消费 --ui-*。
     Figma Starter 采用 Dark / Light 两个单模式集合，名称与此处保持一致。 */
  --ui-bg-canvas:       var(--bg);
  --ui-bg-surface:      var(--surface);
  --ui-bg-subtle:       var(--surface-alt);
  --ui-bg-muted:        var(--surface-3);
  --ui-border:          var(--border);
  --ui-border-strong:   var(--border-strong);
  --ui-text:            var(--text);
  --ui-text-muted:      var(--text-2);
  --ui-text-subtle:     var(--text-3);
  --ui-accent:          var(--accent);
  --ui-accent-muted:    var(--accent-dim);
  --ui-accent-bg:       var(--accent-bg);
  --ui-danger:          var(--danger);
  --ui-danger-bg:       var(--danger-bg);
  --ui-warning:         var(--warn);
  --ui-warning-bg:      var(--warn-bg);
  --ui-success:         var(--ok);
  --ui-success-bg:      var(--ok-bg);
  --ui-info:            var(--info);
  --ui-info-bg:         var(--info-bg);
  --ui-on-accent:       #1A1508;
  --ui-accent-hover:    #DBB35F;
  --ui-focus-ring:      rgba(201, 161, 74, .42);
  --ui-overlay:         rgba(0, 0, 0, .58);

  /* Authentication keeps the STRATIS dark-gold identity in both app themes. */
  --ui-auth-canvas:       #10100C;
  --ui-auth-surface:      #1C1C16;
  --ui-auth-surface-alt:  #242419;
  --ui-auth-border:       #3A3929;
  --ui-auth-text:         #F2EFE5;
  --ui-auth-text-muted:   #AFA997;
  --ui-auth-accent:       #D1A94F;
  --ui-auth-accent-hover: #E0BC68;
  --ui-auth-on-accent:    #1A1508;
  --ui-auth-accent-bg:    rgba(209, 169, 79, .12);
  --ui-auth-line:         rgba(237, 234, 224, .07);
  --ui-auth-shadow:       0 24px 80px rgba(0, 0, 0, .38);

  --ui-font-sans:       'IBM Plex Sans', sans-serif;
  --ui-font-mono:       'IBM Plex Mono', monospace;
  --ui-font-size-micro: var(--fs-micro);
  --ui-font-size-caption: var(--fs-caption);
  --ui-font-size-small: var(--fs-small);
  --ui-font-size-body:  var(--fs-body);
  --ui-font-size-base:  var(--fs-base);
  --ui-font-size-heading: var(--fs-heading);
  --ui-font-size-stat:  var(--fs-stat);
  --ui-font-size-stat-lg: var(--fs-stat-lg);

  --ui-space-1: var(--sp-1);
  --ui-space-2: var(--sp-2);
  --ui-space-3: var(--sp-3);
  --ui-space-4: var(--sp-4);
  --ui-space-5: var(--sp-5);
  --ui-space-6: 32px;
  --ui-radius-sm: var(--r-sm);
  --ui-radius-md: var(--r-md);
  --ui-radius-lg: var(--r-lg);
  --ui-radius-pill: 999px;
  --ui-shadow-card: 0 1px 2px rgba(0, 0, 0, .12);
  --ui-shadow-overlay: 0 12px 36px rgba(0, 0, 0, .28);
  --ui-motion-fast: 150ms;
  --ui-motion-base: 200ms;

  font-family: 'IBM Plex Sans', sans-serif;
}

/* ── 浅色主题（＝demo.html 迁移前现值；C3 换肤时整块移除）── */
html.theme-light {
  --bg:            #f5f4ef;
  --surface:       #ffffff;
  --surface-alt:   #f9f9f6;
  --surface-3:     #f0efe8;
  --border:        #e8e7e0;
  --border-strong: #d0cfc5;
  --text:          #1a1a18;
  --text-2:        #6b6b60;
  --text-3:        #999990;
  --accent:        #1d6e4e;
  --accent-dim:    #2d9e75;
  --accent-bg:     #e8f5ee;
  --danger:        #dc2626;
  --danger-bg:     #fee2e2;
  --warn:          #d97706;
  --warn-bg:       #fef3c7;
  --ok:            #1d6e4e;
  --ok-bg:         #e8f5ee;
  --info:          #0c4a6e;
  --info-bg:       #f0f9ff;
  --ui-on-accent:  #ffffff;
  --ui-accent-hover: #185f44;
  --ui-focus-ring: rgba(29, 110, 78, .28);
  --ui-overlay:    rgba(20, 20, 15, .36);
  --ui-shadow-card: 0 1px 3px rgba(26, 26, 24, .08);
  --ui-shadow-overlay: 0 12px 36px rgba(26, 26, 24, .16);
}

/* ═══ 跨页共享组件（C2：只收单一属主、语义变量参数化的原语；
   按钮两页结构差异大——黑vs金/圆角5vs8——留到 C3 换肤时统一）═══ */

/* 徽章（源自 w2.html） */
.tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:var(--fs-small);font-weight:500;letter-spacing:.02em}
.tag-green{background:var(--accent-bg);color:var(--accent)}
.tag-warn{background:var(--warn-bg);color:var(--warn)}
.tag-red{background:var(--danger-bg);color:var(--danger)}
.tag-grey{background:var(--surface-3);color:var(--text-2);border:1px solid var(--border-2)}

/* ⓘ 方法论说明弹层（源自 w2.html；侧栏 overflow:hidden 处用原生 title） */
.info-tip{position:relative;display:inline-block;color:var(--text-3);font-size:15px;line-height:1;cursor:help;margin-left:6px;font-weight:400;vertical-align:middle}
.info-tip .info-tip-pop{display:none;position:absolute;left:-8px;top:20px;z-index:120;width:320px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;font-size:var(--fs-small);line-height:1.6;color:var(--text-2);box-shadow:0 6px 20px rgba(0,0,0,.18);white-space:normal;text-align:left;font-weight:400}
.info-tip:hover .info-tip-pop,.info-tip:focus .info-tip-pop{display:block}

/* 表单字段帮助/校验（源自 demo.html） */
.field-help{font-size:var(--fs-caption);color:var(--text-3);margin-top:3px;line-height:1.45}
.field input.field-invalid,input.field-invalid,textarea.field-invalid{border-color:var(--danger)}