/* ═══════════════════════════════════════════
   Converge Design Tokens v5 — Light + Dark
   规范: :root=Light(默认), html.dark=Dark
   ═══════════════════════════════════════════ */

:root {
  /* ── 背景层 (Light: 纯白→浅灰渐变) ── */
  --bg-base:       #f8fafc; /* token */
  --bg-raised:     #ffffff; /* token */
  --bg-overlay:    #f1f5f9; /* token */
  --bg-card:       #ffffff; /* token */

  /* ── 文字层 (WCAG AAA — 浅底深字) ── */
  --text-primary:   #0f172a; /* token */
  --text-secondary: #334155; /* token */
  --text-tertiary:  #475569; /* token */
  --text-inverse:   #f8fafc; /* token */

  /* ── 边框 ── */
  --border-default: #cbd5e1; /* token */
  --border-strong:  #94a3b8; /* token */

  /* ── 品牌色 (Profit Cockpit: 翠绿盈利·琥珀告警·玫瑰红亏损) ── */
  --accent:         #047857; /* token */
  --accent-hover:   #065f46; /* token */
  --accent-soft:    rgba(5, 150, 105, 0.08);
  --accent-glow:    rgba(5, 150, 105, 0.15);

  /* ── 语义色 (色彩心理学: 翠绿=盈利·琥珀=警告·玫瑰红=亏损·石板灰=信息) ── */
  --success:        #047857; /* token */
  --success-soft:   rgba(16, 185, 129, 0.10);
  --danger:         #be123c; /* token */
  --danger-soft:    rgba(225, 29, 72, 0.08);
  --warning:        #92400e; /* token */
  --warning-soft:   rgba(245, 158, 11, 0.10);
  --info:           #475569; /* token */
  --info-soft:      rgba(100, 116, 139, 0.10);
  --suggestion:     #1d4ed8; /* token */
  --suggestion-soft: rgba(59, 130, 246, 0.10);

  /* ── 大地色系 (forest=绿 · warm=暖白边框 — Light 语义, dark 见 themes.css) ── */
  --color-forest:       #2e7d32; /* token */
  --color-forest-dark:  #1b5e20; /* token */
  --color-forest-light: #4caf50; /* token */
  --border-warm:        #d8cbb0; /* token */

  /* ── 恒值 (主题无关, 深色继承) ── */
  --inverse-surface: #ffffff; /* token */
  --inverse-text:    #ffffff; /* token */
  --pure-black:      #000000; /* token */

  /* ── 头像身份色 (crc32 索引 0-7, 主题无关) ── */
  --avatar-blue:    #0052FF; /* token */
  --avatar-green:   #059669; /* token */
  --avatar-pink:    #D946EF; /* token */
  --avatar-amber:   #F59E0B; /* token */
  --avatar-red:     #EF4444; /* token */
  --avatar-violet:  #8B5CF6; /* token */
  --avatar-magenta: #EC4899; /* token */
  --avatar-cyan:    #06B6D4; /* token */

  /* ── 间距 (4px 刻度 + 半格) ── */
  --space-1:  4px;   --space-1-5: 6px;   --space-2:  8px;
  --space-3: 12px;   --space-4: 16px;   --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;   --space-10:40px;   --space-12:48px;   --space-16:64px;
  --space-0-5: 2px;  --space-2-5:10px;  --space-3-5:14px;  --space-4-5:18px;
  --space-7: 28px;   --space-9: 36px;   --space-20: 80px;

  /* ── 圆角 ── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── 阴影 (Linear-style: 极轻, 仅用于浮层) ── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.08);
  --shadow-md:  0 2px 8px rgba(0,0,0,.12);
  --shadow-lg:  0 4px 16px rgba(0,0,0,.16);
  --shadow-glow: 0 0 16px var(--accent-glow);
  --scrim: rgba(0, 0, 0, 0.4); /* token — modal overlay backdrop, 主题无关 */

  /* ── 字体族 (Phase 1: Inter + Roboto Mono) ── */
  --font-sans: 'Geist','Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', 'Consolas', 'JetBrains Mono', monospace;

  /* ── 字号层级 (8px 基准 → 4/5/6/7/8/9) ── */
  --text-2xs:  0.625rem;  /* 10px — micro-label (dash label-sm) */
  --text-xs:   0.75rem;   /* 12px — label/caption */
  --text-sm:   0.8125rem; /* 13px — body-small */
  --text-base: 0.9375rem;  /* 15px — body (Stitch 对齐 #168 P1-3) */
  --text-lg:   1rem;      /* 16px — subtitle */
  --text-xl:   1.25rem;   /* 20px — heading-sm */
  --text-2xl:  1.5rem;    /* 24px — heading-md */
  --text-3xl:  1.875rem;  /* 28px/30px — KPI value */

  /* ── 字重 ── */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* ── 动效 ── */
  --motion-fast:  150ms ease;
  --motion-slow:  300ms ease;
  --motion-normal: 200ms ease;


  /* ── 层级 (z-index) ── */
  --z-dropdown: 100;
  --z-tooltip:   600;

  /* ── Focus Ring ── */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--accent);
  --focus-ring-offset: 2px;

  /* ── 动效持续时间 ── */

  /* ── Bridge: old token names → design tokens (backward compat) ── */
  /* All existing CSS uses --surface-* / --content-* naming.            */
  /* These aliases make design-tokens.css the SINGLE :root truth source. */
  --surface-base:    var(--bg-base);      /* token */
  --surface-raised:  var(--bg-raised);    /* token */
  --surface-overlay: var(--bg-overlay);   /* token */
  --content-primary:   var(--text-primary);   /* token */
  --content-secondary: var(--text-secondary); /* token */
  --content-tertiary:  var(--text-tertiary);  /* token */
  --content-inverse:   var(--text-inverse);   /* token */
  --accent-emphasis:   var(--accent);         /* token */
  --border-subtle:     var(--border-default); /* token */

  /* ── Bridge: --color-* naming convention → design tokens ── */
  /* Templates like toolbar-extras, campaign-stats, flow-builder use   */
  /* --color-surface / --color-surface-alt / --color-border-strong     */
  /* which were undefined → dark fallbacks activated in light mode.    */
  --color-surface-alt:   var(--bg-overlay);     /* token */
  --color-border:        var(--border-default); /* token */
  --color-accent:        var(--accent);         /* token */
  --color-text-primary:   var(--text-primary);   /* token */
  --color-text-secondary: var(--text-secondary); /* token */

  /* ── Typography weights (referenced by flow-monitor.css, dock-layout.css) ── */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-normal: 1.5;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --tracking-tight: -0.025em;
  --tracking-wide: 0.025em;
  --transition: 200ms ease;

  /* ── Bridge: 第三命名家族 legacy 别名 (2026-09-02, 门禁 ⑪ 收口) ──
     此前全站 var(--space-md) 等引用无任何定义 → 恒渲染 initial/0 静默崩塌;
     空间刻度等价旧 --spacing-* 家族 (xs=1 sm=2 md=4 lg=6 xl=8 2xl=12) */
  --space-xs:  var(--space-1);
  --space-sm:  var(--space-2);
  --space-md:  var(--space-4);
  --space-lg:  var(--space-6);
  --space-xl:  var(--space-8);
  --space-2xl: var(--space-12);

  /* ── Bridge: legacy 颜色/文本/杂项别名 → 单一语义令牌 ── */
  --color-text-disabled:  var(--text-tertiary);
  --color-surface-card:   var(--bg-card);
  --color-surface-page:   var(--bg-base);
  --color-border-default: var(--border-default);
  --color-brand-primary:  var(--accent);
  --color-feedback-success: var(--success);
  --color-feedback-warning: var(--warning);
  --color-feedback-info:    var(--info);
  --color-feedback-error:   var(--danger);
  --color-danger:           var(--danger);
  --surface-success:  var(--success-soft);
  --content-success:  var(--success);
  --surface-danger:   var(--danger-soft);
  --content-danger:   var(--danger);
  --surface-card:     var(--bg-card);
  --surface-default:  var(--bg-raised);
  --border:           var(--border-default);
  --text-caption:     var(--text-xs);
  --text-body-sm:     var(--text-sm);
  --text-body:        var(--text-base);
  --text-md:          var(--text-base);
  --text-display:     var(--text-2xl);
  --text-on-warning:     var(--warning);
  --danger-glow:      rgba(225, 29, 72, 0.30);
  --radius-xs:   var(--radius-sm);
  --bg-input:    var(--bg-raised);
  --container-max: 1280px;
  --cq-stack-gap:  var(--space-4); /* 默认; .region-compact 可重映射 */

  /* ── TDA 断点/页宽 (值迁自 tda-container-queries.css, 令牌值单一源) ── */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-full: 100%;
  --dropdown-min-width: 160px; /* 顶栏下拉菜单最小宽 (组件维度 token, 非 --space-N 间距) */

  /* ── Extended text sizes ── */
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* ── Extended shadows ── */
  --shadow-xl: 0 16px 48px rgba(0,0,0,.5);
  --shadow-accent: 0 2px 12px var(--accent-glow);

  /* ── Extended radii ── */
  --radius-2xl: var(--space-5); /* 20px — 4px 刻度对齐, 收敛 off-grid 24px (Step 4) */


  /* ── Sidebar tokens ── */
  --sidebar-bg: #0f172a;     /* token */
  --sidebar-text: #e2e8f0;  /* token */
  --sidebar-muted: #64748b; /* token */
  --sidebar-hover: #1e293b; /* token */
  --sidebar-active: var(--accent);
  --sidebar-accent: var(--accent);
  /* simple-sidebar rail (always-dark constants) */
  --sidebar-panel-bg: #1a1a2e;     /* token */
  --sidebar-text-muted: #888888;   /* token */
  --sidebar-border: rgba(255,255,255,0.08); /* token */
  --sidebar-hover-bg: var(--sidebar-border);
  --sidebar-active-bg: var(--sidebar-border);

  /* ── Chart palette tokens ── */
  --chart-blue:  #2563eb; /* token — clicks */
  --chart-green: #00f0a8; /* token — revenue */
  --chart-navy:   #1E3A5F; /* token — funnel gradient start */
  --chart-violet: #7C3AED; /* token — funnel gradient end */

  /* ── Bridge: app-core.css legacy 全局令牌 (令牌统一搬迁, 值零漂移) ── */
  --color-primary: #152E4A;
  --color-primary-light: var(--accent);
  --color-sidebar: #0A1628;
  --color-sidebar-text: var(--border-strong);
  --color-white: var(--surface-raised);
  --color-bg: var(--surface-base);
  --color-bg-alt: var(--surface-base);
  --color-border-light: var(--surface-overlay);
  --color-text: var(--content-primary);
  --color-text-muted: var(--content-tertiary);
  --color-success: var(--success);
  --color-success-bg: var(--success-soft);
  --color-warning: var(--warning);
  --color-warning-bg: var(--warning-soft);
  --color-error: var(--danger);
  --color-error-bg: var(--danger-soft);
  --color-info: var(--accent-emphasis);
  --color-info-bg: var(--accent-soft);
  --color-profit: var(--success);
  --color-loss: var(--danger);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-relaxed: 1.75;
  --font-family: var(--font-sans);
  --font-size-xs: var(--text-xs);
  --font-size-sm: var(--text-sm);
  --font-size-base: var(--text-base);
  --font-size-lg: var(--text-lg);
  --font-size-xl: var(--text-xl);
  --font-size-2xl: var(--text-2xl);
  --navbar-height: 56px;

  /* ── Stitch 品牌色 (Landing 浅色原值 — 令牌统一搬迁, 值零漂移) ── */
  --st-primary:       #006c49; /* token */
  --st-primary-hover: #005236; /* token */
  --st-primary-soft:  rgba(0,108,73,0.08);
  --st-secondary:       #4648d4; /* token */
  --st-secondary-hover: #2f2ebe; /* token */
  --st-tertiary:      #0f172a; /* token */
  --st-success:       #10b981; /* token */
  --st-danger:        #ef4444; /* token */

  /* ── Stitch 表面色 ── */
  --st-bg:            #f8f9ff; /* token */
  --st-surface:       #ffffff; /* token */
  --st-surface-alt:   #f1f5f9; /* token */
  --st-border:        #e2e8f0; /* token */
  --st-border-strong: #cbd5e1; /* token */

  /* ── Stitch 文字色 ── */
  --st-ink:           #0b1c30; /* token */
  --st-ink-secondary: #475569; /* token */
  --st-ink-tertiary:  #94a3b8; /* token */
  --st-ink-inverse:   #ffffff; /* token */

  /* ── Stitch 间距 (8px 基准) ── */
  --st-space-xs:var(--space-1);--st-space-sm:var(--space-2);--st-space-md:var(--space-4);
  --st-space-lg:var(--space-6);--st-space-xl:var(--space-8);--st-space-2xl:var(--space-12);
  --st-space-3xl:var(--space-16);--st-space-4xl:var(--space-20);--st-gutter:var(--space-6);
  --st-margin-desktop:var(--space-10);--st-margin-mobile:var(--space-4);

  /* ── Stitch 阴影 ── */
  --st-shadow-hover:0 4px 20px rgba(15,23,42,0.08);

  /* ── Stitch 字体 ── */
  --st-font-display:'Geist','Inter',system-ui,-apple-system,sans-serif;
  --st-font-body:'Inter',system-ui,-apple-system,sans-serif;

  /* ── Stitch 排版 ── */
  --st-text-hero:clamp(2.5rem,5vw,3.5rem);
  --st-text-h1:clamp(1.75rem,3vw,2.5rem);
  --st-text-h2:clamp(1.375rem,2vw,1.875rem);
  --st-text-h3:1.25rem;
  --st-text-body:1.0625rem;
  --st-text-sm:0.9375rem;
  --st-text-xs:0.8125rem;
  --st-text-label:0.75rem;

  /* ── Stitch 动效 ── */
  --st-motion-fast:150ms ease;
  --st-motion-normal:250ms ease;

  /* ── Stitch 网格 ── */
  --st-grid-cols:12;
  --st-container-max:1200px;

  /* ── Stitch 圆角 (主题无关, 原 app-core 值) ── */
  --st-radius-sm:var(--space-1);--st-radius-md:var(--radius-md);--st-radius-lg:var(--radius-lg);--st-radius-full:var(--radius-full); /* sm=4px 主刻度 radius-sm=6px 非 4px, 保值走 --space-1 */

  /* ── App-shell dash 调色板 (Stitch 导航重构方案 v1.0, 原 app-core.css — 令牌统一搬迁, 值零漂移) ── */
  /* ── Surface (Zinc scale, dark-first) ── */
  --dash-surface:#1c1b1d; /* token */
  --dash-surface-high:#2a2a2c; /* token */
  --dash-surface-highest:#353437; /* token */

  /* ── Primary (Indigo) ── */
  --dash-primary:#c0c1ff; /* token */
  --dash-on-primary:#1000a9; /* token */
  --dash-primary-container:#8083ff; /* token */

  /* ── On-surface (text) ── */
  --dash-text-primary:#e5e1e4; /* token */
  --dash-text-secondary:#B0B0B0; /* token */
  --dash-text-tertiary:#908fa0; /* token */

  /* ── Outline/Border ── */
  --dash-border:rgba(255,255,255,0.06); /* token */
  --dash-border-strong:rgba(255,255,255,0.1); /* token */

  /* ── Status ── */
  --dash-success:#4ade80; /* token */
  --dash-success-soft:rgba(74,222,128,0.1); /* token */
  --dash-warning:#fbbf24; /* token */
  --dash-warning-soft:rgba(251,191,36,0.1); /* token */
  --dash-danger:#f87171; /* token */
  --dash-danger-soft:rgba(248,113,113,0.1); /* token */

  /* ── Background ── */
  --dash-bg:#131315; /* token */

  /* ── Spacing (4px unit) ── */
  --dash-xs:var(--space-1);--dash-sm:var(--space-2);--dash-md:var(--space-3);--dash-lg:var(--space-4);--dash-xl:var(--space-6);--dash-2xl:var(--space-8);--dash-3xl:var(--space-12);

  /* ── Typography ── */
  --dash-font-sans:'Geist','Inter',system-ui,-apple-system,sans-serif;
  --dash-text-display:var(--text-5xl);--dash-text-h2:var(--text-xl);
  --dash-text-body-lg:var(--text-lg);--dash-text-body:var(--text-base);--dash-text-body-sm:var(--text-sm);
  --dash-text-label-sm:var(--text-2xs);

  /* ── Radius ── */
  --dash-radius-sm:var(--space-1);--dash-radius-md:var(--radius-md);--dash-radius-full:var(--radius-full); /* sm=4px 主刻度 radius-sm=6px 非 4px, 保值走 --space-1 */

  /* ── Shadow ── */
  --dash-shadow-card:0 1px 3px rgba(0,0,0,0.3);
}

/* ═══ Dark Theme (html.dark) ═══ */
html.dark {
  --bg-base:       #080b12; /* token */
  --bg-raised:     #111820; /* token */
  --bg-overlay:    #1a2536; /* token */
  --bg-card:       #1a2536; /* token */
  --text-primary:   #f0f4fc; /* token */
  --text-secondary: #B0B0B0; /* token */ /* Stitch spec B0B0B0 — AA on dark bg */
  --text-tertiary:  #a0b8d0; /* token */
  --text-inverse:   #080b12; /* token */
  --border-default: rgba(255,255,255,0.06); /* token — Stitch spec border-default */
  --border-strong:  rgba(255,255,255,0.14); /* token */
  --accent:         #34d399; /* token — brighter emerald for dark */
  --accent-hover:   #10b981; /* token */
  --accent-soft:    rgba(0, 240, 168, 0.10); /* token */
  --accent-glow:    rgba(0, 240, 168, 0.25); /* token */
  --sidebar-bg:     #0f172a; /* token */
  --sidebar-text:   #e2e8f0; /* token */
  --sidebar-muted:  #64748b; /* token */
  --success-soft:   rgba(52, 211, 153, 0.12); /* token */
  --danger-soft:    rgba(248, 113, 113, 0.12); /* token */
  --warning-soft:   rgba(251, 191, 36, 0.12);  /* token */
  --info-soft:      rgba(148, 163, 184, 0.10);  /* token */

  /* ── 语义实心色 (task #273: 亮值 600-700 系在暗底 FAIL 2.0-3.3:1 →
      暗值 = 各 -soft 变体 rgba 之源色, 与 Stitch st-* 同值; 文本/badge 均 AA+) ── */
  --success:        #34d399; /* token — emerald-400 (软底 52,211,153 同源) */
  --danger:         #f87171; /* token — red-400 (软底 248,113,113 同源) */
  --warning:        #fbbf24; /* token — amber-400 (软底 251,191,36 同源) */
  --info:           #94a3b8; /* token — slate-400 (软底 148,163,184 同源) */

  --suggestion:     #93c5fd; /* token */
  --suggestion-soft: rgba(96, 165, 250, 0.12);
  --sidebar-hover:  #1e293b; /* token */
  /* warning-soft dark 底上 amber-400 AA 文本; danger glow 亮红 */
  --text-on-warning: #fbbf24; /* token */
  --danger-glow: rgba(248, 113, 113, 0.30); /* token */

  /* ── 别名桥显式镜像 (task #273: 60+ 收口) ──
     与 :root 同名别名表达式逐字一致 (var-ref 零漂移);
     :root 改别名目标时须同步本块 — 门禁 ⑪ 同源 */
  --surface-base:    var(--bg-base);
  --surface-raised:  var(--bg-raised);
  --surface-overlay: var(--bg-overlay);
  --surface-card:    var(--bg-card);
  --surface-default: var(--bg-raised);
  --bg-input:        var(--bg-raised);
  --color-surface-alt:   var(--bg-overlay);
  --color-surface-card:  var(--bg-card);
  --color-surface-page:  var(--bg-base);
  --content-primary:   var(--text-primary);
  --content-secondary: var(--text-secondary);
  --content-tertiary:  var(--text-tertiary);
  --content-inverse:   var(--text-inverse);
  --color-text-primary:   var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-disabled:  var(--text-tertiary);
  --border-subtle:        var(--border-default);
  --border:               var(--border-default);
  --color-border:         var(--border-default);
  --color-border-default: var(--border-default);
  --accent-emphasis:  var(--accent);
  --color-accent:     var(--accent);
  --color-brand-primary: var(--accent);
  --focus-ring-color: var(--accent);
  --sidebar-active:   var(--accent);
  --sidebar-accent:   var(--accent);
  --surface-success:   var(--success-soft);
  --content-success:   var(--success);
  --surface-danger:    var(--danger-soft);
  --content-danger:    var(--danger);
  --color-danger:      var(--danger);
  --color-feedback-success: var(--success);
  --color-feedback-warning: var(--warning);
  --color-feedback-info:    var(--info);
  --color-feedback-error:   var(--danger);

  /* ── Chart palette (dark: brighter for contrast) ── */
  --chart-blue:  #60a5fa; /* token */
  --chart-green: #00f0a8; /* token */
  --chart-navy:   #1E3A5F; /* token */
  --chart-violet: #7C3AED; /* token */

  /* ── Stitch 暗色 (Landing dark 原值 — 令牌统一搬迁) ── */
  --st-bg:#0f172a; /* token */
  --st-surface:#1e293b; /* token */
  --st-surface-alt:#1a2332; /* token */
  --st-border:#334155; /* token */
  --st-border-strong:#475569; /* token */
  --st-ink:#f1f5f9; /* token */
  --st-ink-secondary:#cbd5e1; /* token */
  --st-ink-tertiary:#94a3b8; /* token */
  --st-tertiary:#020617; /* token */
}

/* ── 全局重置 ── */
*,::before,::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  font-family:var(--font-sans);font-size:var(--text-base);
  background:var(--bg-base);color:var(--text-secondary);
  margin:0;line-height:1.5;
}
h1,h2,h3,h4{color:var(--text-primary)}
a{color:var(--accent)}
::selection{background:var(--accent-soft);color:var(--accent)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:10px}

/* ═══ Accessibility: Screen-reader-only utility ═══ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ═══ Animated counter ═══ */
@keyframes countUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.kpi-value-animated { animation: countUp 0.6s ease-out; }

/* ═══ Accessibility: Reduce motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .kpi-value-animated,
  .kpiPulse,
  .pulse,
  .spin,
  .sparkDraw,
  .precision-draw-line,
  .precision-spin,
  .countdown-pulse,
  .slideIn,
  .reveal,
  .st-reveal { animation: none !important; }
}