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

:root {
  /* ── Brand / Primary (VI 深海蓝) ── */
  --color-primary: #0A3DFF;
  --color-primary-hover: #0830D6;
  --color-primary-active: #0626B0;
  --color-primary-light: rgba(10, 61, 255, 0.10);
  --color-primary-light-hover: rgba(10, 61, 255, 0.15);
  --color-primary-subtle: rgba(10, 61, 255, 0.06);

  /* ── 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 ── */
  --color-text-primary: #1F2329;
  --color-text-secondary: #1F2329;
  --color-text-tertiary: #1F2329;
  --color-text-disabled: #1F2329;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #0A3DFF;
  --color-text-link-hover: #1677FF;

  /* ── 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 (VI) ── */
  --btn-primary-bg: #0A3DFF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover-bg: #0830D6;
  --btn-primary-active-bg: #0626B0;
  --btn-primary-focus-ring: rgba(10, 61, 255, 0.35);

  /* ── Brand Gradient Button (Logo 同源蓝青渐变) ── */
  --btn-gradient-start: #00C0FA;    /* 电光青蓝高光 */
  --btn-gradient-mid: #1677FF;      /* 品牌主蓝 */
  --btn-gradient-end: #0A3DFF;      /* 深电蓝 */
  --btn-gradient-angle: 135deg;
  --btn-gradient: linear-gradient(var(--btn-gradient-angle), var(--btn-gradient-start) 0%, var(--btn-gradient-mid) 45%, var(--btn-gradient-end) 100%);
  --btn-gradient-hover: linear-gradient(var(--btn-gradient-angle), #00D4FF 0%, #1A85FF 45%, #0D4BFF 100%);
  --btn-gradient-active: linear-gradient(var(--btn-gradient-angle), #00A8E0 0%, #0D5FDD 45%, #072EC0 100%);
  --btn-gradient-shadow: 0 2px 12px rgba(10, 61, 255, 0.22), 0 0 0 1px rgba(0, 192, 250, 0.08) inset;
  --btn-gradient-shadow-hover: 0 6px 22px rgba(10, 61, 255, 0.32), 0 0 0 1px rgba(0, 212, 255, 0.14) inset;
  --btn-gradient-shadow-active: 0 1px 4px rgba(10, 61, 255, 0.18);
  --btn-gradient-focus-ring: rgba(0, 192, 250, 0.45);

  /* ── Secondary Gradient (浅底渐变描边) ── */
  --btn-secondary-gradient-bg: rgba(10, 61, 255, 0.03);
  --btn-secondary-gradient-border: rgba(10, 61, 255, 0.18);
  --btn-secondary-gradient-hover-bg: rgba(10, 61, 255, 0.06);
  --btn-secondary-gradient-hover-border: rgba(10, 61, 255, 0.30);
  --btn-secondary-gradient-hover-text: #0A3DFF;
  --btn-secondary-gradient-hover-shadow: 0 2px 10px rgba(10, 61, 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);
}