/* ========================================
   薪连薪 VI Design System — Colors
   品牌色：深海蓝 #0A3DFF | 科技蓝 #1677FF | 未来青 #00D4FF | 点缀紫 #7B61FF
   ======================================== */

:root {
  /* ── Brand / Primary（v3：Enterprise RegTech 收敛蓝 #2454FF） ── */
  --color-primary: #2454FF;
  --color-primary-hover: #173FE6;
  --color-primary-active: #1230C8;
  --color-primary-light: rgba(36, 84, 255, 0.10);
  --color-primary-light-hover: rgba(36, 84, 255, 0.15);
  --color-primary-subtle: rgba(36, 84, 255, 0.06);

  /* ── v3 Design Tokens（Enterprise RegTech） ── */
  --brand-primary: #2454FF;
  --brand-hover: #173FE6;
  --brand-indigo: #5B4BFF;
  --brand-cyan: #12BFEF;

  /* 背景系统：页面 / Section / 浮层分层，禁止整页纯白 */
  --bg-page: #F4F7FC;
  --bg-section: #F7F9FD;
  --bg-section-alt: #F0F4FA;
  --bg-elevated: rgba(251, 252, 255, 0.94);
  --bg-soft-brand: #EEF3FF;

  /* 统一卡片系统 tokens */
  --card-surface-bg: #FFFFFF;
  --card-surface-border: #E2E7F0;
  --card-elevated-bg: #FFFFFF;
  --card-elevated-shadow: 0 6px 24px rgba(24, 32, 51, 0.06);
  --card-interactive-hover-border: rgba(36, 84, 255, 0.35);
  --card-interactive-hover-shadow: 0 8px 28px rgba(24, 32, 51, 0.08);
  --radius-card: 14px;
  --radius-card-lg: 18px;

  /* ── VI 品牌色扩展 ── */
  --color-brand-tech-blue: #1677FF;
  --color-brand-tech-blue-light: rgba(22, 119, 255, 0.10);
  --color-brand-future-cyan: #00D4FF;
  --color-brand-future-cyan-light: rgba(0, 212, 255, 0.10);
  --color-brand-accent-purple: #7B61FF;
  --color-brand-accent-purple-light: rgba(123, 97, 255, 0.10);

  /* ── VI 辅助色 ── */
  --color-vi-blue-10: #E6F2FF;
  --color-vi-blue-20: #CFE6FF;
  --color-vi-cyan-10: #E0FBFF;
  --color-vi-gray-10: #F2F4F7;
  --color-vi-gray-20: #D9DEE7;
  --color-vi-gray-60: #1F2329;
  --color-vi-gray-90: #1F2329;

  /* ── Text（v3 层级修正：正文三档必须可区分，禁止 primary=secondary=tertiary） ── */
  --color-text-primary: #182033;
  --color-text-secondary: #58657A;
  --color-text-tertiary: #8792A5;
  --color-text-disabled: #A8B1C0;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #2454FF;
  --color-text-link-hover: #173FE6;

  /* ── Background ── */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F2F4F7;
  --color-bg-tertiary: #E6F2FF;
  --color-bg-inverse: #1F2329;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);

  /* ── Border ── */
  --color-border-default: rgba(0, 0, 0, 0.06);
  --color-border-light: rgba(0, 0, 0, 0.04);
  --color-border-strong: rgba(0, 0, 0, 0.10);
  --color-border-hover: rgba(0, 0, 0, 0.14);
  --color-border-focus: #0A3DFF;
  --color-border-error: #D14343;

  /* ── Semantic ── */
  --color-success: #00A86B;
  --color-success-light: rgba(0, 168, 107, 0.10);
  --color-warning: #FFB020;
  --color-warning-light: rgba(255, 176, 32, 0.10);
  --color-error: #D14343;
  --color-error-light: rgba(209, 67, 67, 0.10);
  --color-info: #1677FF;
  --color-info-light: rgba(22, 119, 255, 0.10);

  /* ── VI Gradient Colors ── */
  --color-gradient-deep-blue: #0A3DFF;
  --color-gradient-tech-blue: #1677FF;
  --color-gradient-future-cyan: #00D4FF;
  --color-gradient-accent-purple: #7B61FF;

  /* ── Hero Gradient Stops (VI based) ── */
  --hero-gradient-deep-blue: rgba(10, 61, 255, 0.28);
  --hero-gradient-tech-blue: rgba(22, 119, 255, 0.22);
  --hero-gradient-future-cyan: rgba(0, 212, 255, 0.18);
  --hero-gradient-accent-purple: rgba(123, 97, 255, 0.20);

  /* ── Shadow Colors ── */
  --shadow-color-xs: rgba(0, 0, 0, 0.04);
  --shadow-color-sm: rgba(0, 0, 0, 0.06);
  --shadow-color-md: rgba(0, 0, 0, 0.06);
  --shadow-color-lg: rgba(0, 0, 0, 0.08);
  --shadow-color-xl: rgba(0, 0, 0, 0.10);

  /* ── Button Tokens（v3：克制收敛，Primary 纯色 + 轻阴影，去除强发光电光渐变） ── */
  --btn-primary-bg: #2454FF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover-bg: #173FE6;
  --btn-primary-active-bg: #1230C8;
  --btn-primary-focus-ring: rgba(36, 84, 255, 0.28);

  /* v3 Primary */
  --btn-gradient-start: #2F5CFF;
  --btn-gradient-mid: #2454FF;
  --btn-gradient-end: #173FE6;
  --btn-gradient-angle: 135deg;
  --btn-gradient: linear-gradient(var(--btn-gradient-angle), var(--btn-gradient-start) 0%, var(--btn-gradient-mid) 50%, var(--btn-gradient-end) 100%);
  --btn-gradient-hover: linear-gradient(var(--btn-gradient-angle), #2454FF 0%, #173FE6 60%, #1230C8 100%);
  --btn-gradient-active: linear-gradient(var(--btn-gradient-angle), #1230C8 0%, #1230C8 100%);
  --btn-gradient-shadow: 0 1px 2px rgba(24, 32, 51, 0.12), 0 2px 8px rgba(36, 84, 255, 0.18);
  --btn-gradient-shadow-hover: 0 2px 6px rgba(24, 32, 51, 0.10), 0 4px 14px rgba(36, 84, 255, 0.24);
  --btn-gradient-shadow-active: 0 1px 3px rgba(24, 32, 51, 0.16);
  --btn-gradient-focus-ring: rgba(36, 84, 255, 0.32);

  /* ── Secondary Gradient (浅底渐变描边，品牌蓝 tint 统一) ── */
  --btn-secondary-gradient-bg: rgba(36, 84, 255, 0.03);
  --btn-secondary-gradient-border: rgba(36, 84, 255, 0.18);
  --btn-secondary-gradient-hover-bg: rgba(36, 84, 255, 0.06);
  --btn-secondary-gradient-hover-border: rgba(36, 84, 255, 0.30);
  --btn-secondary-gradient-hover-text: #2454FF;
  --btn-secondary-gradient-hover-shadow: 0 2px 10px rgba(36, 84, 255, 0.10);

  --btn-secondary-bg: transparent;
  --btn-secondary-text: #1F2329;
  --btn-secondary-border: rgba(0, 0, 0, 0.10);
  --btn-secondary-hover-bg: #F2F4F7;
  --btn-secondary-hover-text: #1F2329;
  --btn-secondary-hover-border: rgba(0, 0, 0, 0.16);
  --btn-secondary-active-bg: #D9DEE7;
  --btn-secondary-focus-ring: rgba(0, 0, 0, 0.15);

  --btn-ghost-bg: transparent;
  --btn-ghost-text: #1F2329;
  --btn-ghost-hover-bg: #F2F4F7;
  --btn-ghost-hover-text: #1F2329;
  --btn-ghost-focus-ring: rgba(0, 0, 0, 0.12);

  --btn-white-bg: #FFFFFF;
  --btn-white-text: #0A3DFF;
  --btn-white-hover-bg: #F2F4F7;
  --btn-white-hover-text: #0830D6;

  --btn-outline-white-bg: transparent;
  --btn-outline-white-text: #FFFFFF;
  --btn-outline-white-border: rgba(255, 255, 255, 0.35);
  --btn-outline-white-hover-bg: rgba(255, 255, 255, 0.12);
  --btn-outline-white-hover-text: #FFFFFF;
  --btn-outline-white-hover-border: rgba(255, 255, 255, 0.55);
}

/* ========================================
   Second :root block — split to avoid CSS parser truncation
   ======================================== */
:root {
  /* ── Tab / Pill / Chip Tokens ── */
  --tab-gradient-default-bg: rgba(10, 61, 255, 0.04);
  --tab-gradient-default-text: #1F2329;
  --tab-gradient-default-border: rgba(0, 0, 0, 0.06);
  --tab-gradient-active-bg: var(--btn-gradient);
  --tab-gradient-active-text: #FFFFFF;
  --tab-gradient-active-shadow: 0 2px 8px rgba(10, 61, 255, 0.20);
  --tab-gradient-hover-bg: rgba(10, 61, 255, 0.08);
  --tab-gradient-hover-text: #0A3DFF;

  /* ── Danger (保留危险操作识别度，但融入品牌体系) ── */
  --btn-danger-bg: #F04438;
  --btn-danger-hover-bg: #DA3E34;
  --btn-danger-active-bg: #C53030;
  --btn-danger-text: #FFFFFF;
  --btn-danger-shadow: 0 2px 10px rgba(240, 68, 56, 0.22);
  --btn-danger-focus-ring: rgba(240, 68, 56, 0.35);

  /* ── Disabled ── */
  --btn-disabled-bg: rgba(10, 61, 255, 0.08);
  --btn-disabled-text: rgba(31, 35, 41, 0.30);
  --btn-disabled-border: rgba(0, 0, 0, 0.04);
}