/* ============================================
   SYSTEM TOKENS — 中性变量 (所有主题共用)
   间距、字体、圆角、阴影、动效、布局变量
   颜色变量由各主题 variables.css 提供
   ============================================ */

:root {
  /* ---------- 品牌色阶 (系统级定义，主题可覆盖 --ds-primary 映射) ---------- */
  --xj-blue-50:  #e6f0ff;
  --xj-blue-100: #cce0ff;
  --xj-blue-200: #99c2ff;
  --xj-blue-300: #66a3ff;
  --xj-blue-400: #3385ff;
  --xj-blue-500: #0047ff;
  --xj-blue-600: #0039d4;
  --xj-blue-700: #002aa3;
  --xj-blue-800: #001c6b;
  --xj-blue-900: #000e36;

  --xj-gold-50:  #fbf7e6;
  --xj-gold-100: #f7efcc;
  --xj-gold-200: #efe099;
  --xj-gold-300: #e7d066;
  --xj-gold-400: #e0c45c;
  --xj-gold-500: #d4af37;
  --xj-gold-600: #b89326;
  --xj-gold-700: #8a6f1c;
  --xj-gold-800: #5c4a13;
  --xj-gold-900: #2e2509;

  /* ---------- 语义色 (主题通过 variables.css 覆盖) ---------- */
  /* 默认深色兜底 */
  --xj-bg:              #060f1f;
  --xj-surface:         #0a1628;
  --xj-surface-raised:  #112240;
  --xj-surface-inverse: #ffffff;

  --xj-text:            #f1f5f9;
  --xj-text-secondary:  #94a3b8;
  --xj-text-muted:      #64748b;
  --xj-text-inverse:    #ffffff;

  --xj-border:          #e2e8f0;
  --xj-border-subtle:   #f1f5f9;
  --xj-border-strong:   #cbd5e1;

  --xj-accent:          var(--xj-blue-500);
  --xj-accent-hover:    var(--xj-blue-600);
  --xj-accent-soft:     var(--xj-blue-50);
  --xj-accent-glow:     rgba(0, 71, 255, 0.12);

  --xj-gold:            var(--xj-gold-500);
  --xj-gold-hover:      var(--xj-gold-600);
  --xj-gold-soft:       var(--xj-gold-50);

  --xj-success: #10b981;
  --xj-warning: #f59e0b;
  --xj-error:   #ef4444;
  --xj-info:    var(--xj-blue-500);

  /* ---------- 兼容旧变量名 (deprecated, 保留向后兼容) ---------- */
  --navy-50:  #f0f4fa;
  --navy-100: #dce6f3;
  --navy-200: #b8c8e0;
  --navy-300: #8aa0c4;
  --navy-400: #6079a8;
  --navy-500: #3d5a8a;
  --navy-600: #264473;
  --navy-700: #1a3054;
  --navy-800: #112240;
  --navy-850: #0d1c35;
  --navy-900: #0a1628;
  --navy-950: #060f1f;

  --brand-blue:   var(--xj-blue-500);
  --brand-blue-d: var(--xj-blue-700);
  --brand-blue-m: var(--xj-blue-400);
  --brand-blue-g: rgba(0, 71, 255, 0.08);
  --brand-gold:   var(--xj-gold-500);
  --brand-gold-l: var(--xj-gold-400);
  --brand-gold-d: var(--xj-gold-600);
  --brand-gold-g: rgba(212, 175, 55, 0.08);

  --text-primary:   var(--xj-text);
  --text-secondary: var(--xj-text-secondary);
  --text-muted:     var(--xj-text-muted);

  --card-bg:        var(--xj-surface-raised);
  --border:         var(--xj-border);

  --glass-bg:       rgba(255, 255, 255, 0.92);
  --glass-border:   rgba(0, 0, 0, 0.06);
  --glass-blur:     22px;

  /* ---------- 间距 ---------- */
  --xj-space-0:  0;
  --xj-space-1:  0.25rem;   /* 4px  */
  --xj-space-2:  0.5rem;    /* 8px  */
  --xj-space-3:  0.75rem;   /* 12px */
  --xj-space-4:  1rem;      /* 16px */
  --xj-space-5:  1.25rem;   /* 20px */
  --xj-space-6:  1.5rem;    /* 24px */
  --xj-space-8:  2rem;      /* 32px */
  --xj-space-10: 2.5rem;    /* 40px */
  --xj-space-12: 3rem;      /* 48px */
  --xj-space-16: 4rem;      /* 64px */
  --xj-space-20: 5rem;      /* 80px */
  --xj-space-24: 6rem;      /* 96px */

  /* ---------- 字体 ---------- */
  --xj-font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --xj-font-mono: "SF Mono", Consolas, Monaco, "Fira Code", "JetBrains Mono", monospace;

  --xj-text-xs:   0.75rem;   /* 12px */
  --xj-text-sm:   0.875rem;  /* 14px */
  --xj-text-base: 1rem;      /* 16px */
  --xj-text-lg:   1.125rem;  /* 18px */
  --xj-text-xl:   1.25rem;   /* 20px */
  --xj-text-2xl:  1.5rem;    /* 24px */
  --xj-text-3xl:  1.875rem;  /* 30px */
  --xj-text-4xl:  2.25rem;   /* 36px */
  --xj-text-5xl:  3rem;      /* 48px */
  --xj-text-6xl:  3.75rem;   /* 60px */

  --xj-leading-tight:   1.25;
  --xj-leading-snug:    1.4;
  --xj-leading-normal:  1.6;
  --xj-leading-relaxed: 1.75;

  --xj-font-normal:   400;
  --xj-font-medium:   500;
  --xj-font-semibold: 600;
  --xj-font-bold:     700;
  --xj-font-extrabold:800;

  /* ---------- 圆角 ---------- */
  --xj-radius-sm:  6px;
  --xj-radius-md:  10px;
  --xj-radius-lg:  14px;
  --xj-radius-xl:  18px;
  --xj-radius-2xl: 24px;
  --xj-radius-full: 9999px;

  /* ---------- 阴影 ---------- */
  --xj-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --xj-shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --xj-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --xj-shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --xj-shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --xj-shadow-glow: 0 0 40px rgba(0, 71, 255, 0.12);
  --xj-shadow-gold: 0 0 40px rgba(212, 175, 55, 0.12);

  /* ---------- 动效 ---------- */
  --xj-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --xj-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --xj-ease-slow:   cubic-bezier(0.22, 0.61, 0.36, 1);

  --xj-duration-instant: 100ms;
  --xj-duration-fast:    150ms;
  --xj-duration-normal:  250ms;
  --xj-duration-slow:    400ms;
  --xj-duration-page:    700ms;

  /* ---------- 布局 ---------- */
  --xj-container:    1320px;
  --xj-header-h:     72px;
  --section-pad:     clamp(5rem, 8vw, 8rem);
  --container-max:   var(--xj-container);

  /* ---------- 主题色变量 (由主题 variables.css 覆盖) ---------- */
  --ds-primary:        #1e3a8a;
  --ds-primary-dark:   #0f1b2d;
  --ds-primary-light:  #3b82f6;
}

/* ---------- 深色主题覆盖 ---------- */
[data-theme="dark"] {
  --navy-50:  #f0f4fa;
  --navy-100: #dce6f3;
  --navy-200: #b8c8e0;
  --navy-300: #8aa0c4;
  --navy-400: #6079a8;
  --navy-500: #3d5a8a;
  --navy-600: #264473;
  --navy-700: #1a3054;
  --navy-800: #112240;
  --navy-850: #0d1c35;
  --navy-900: #0a1628;
  --navy-950: #060f1f;

  --xj-bg:              #0b1220;
  --xj-surface:         #111827;
  --xj-surface-raised:  #1f2937;
  --xj-surface-inverse: #ffffff;

  --xj-text:            #f1f5f9;
  --xj-text-secondary:  #94a3b8;
  --xj-text-muted:      #64748b;
  --xj-text-inverse:    #0f172a;

  --xj-border:          rgba(255, 255, 255, 0.08);
  --xj-border-subtle:   rgba(255, 255, 255, 0.04);
  --xj-border-strong:   rgba(255, 255, 255, 0.12);

  --xj-accent-soft:     rgba(0, 71, 255, 0.15);
  --xj-accent-glow:     rgba(0, 71, 255, 0.18);

  --xj-gold-soft:       rgba(212, 175, 55, 0.12);

  --glass-bg:           rgba(11, 18, 32, 0.88);
  --glass-border:       rgba(255, 255, 255, 0.06);

  --xj-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.25);
  --xj-shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
  --xj-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --xj-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --xj-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}

/* ---------- 浅色主题覆盖 ---------- */
[data-theme="light"] {
  --navy-50:  #f7f9fb;
  --navy-100: #f0f4fa;
  --navy-200: #e2e8f0;
  --navy-300: #cbd5e1;
  --navy-400: #94a3b8;
  --navy-500: #64748b;
  --navy-600: #475569;
  --navy-700: #334155;
  --navy-800: #1e293b;
  --navy-850: #f0f2f8;
  --navy-900: #ffffff;
  --navy-950: #f8f9fc;

  --xj-bg:              #ffffff;
  --xj-surface:         #f0f4fa;
  --xj-surface-raised:  #ffffff;
  --xj-surface-inverse: #0f172a;

  --xj-text:            #0f172a;
  --xj-text-secondary:  #475569;
  --xj-text-muted:      #64748b;
  --xj-text-inverse:    #ffffff;

  --xj-border:          #e2e8f0;
  --xj-border-subtle:   #f1f5f9;
  --xj-border-strong:   #cbd5e1;

  --xj-accent-soft:     var(--xj-blue-50);
  --xj-accent-glow:     rgba(0, 71, 255, 0.12);

  --xj-gold-soft:       var(--xj-gold-50);

  --glass-bg:           rgba(255, 255, 255, 0.92);
  --glass-border:       rgba(0, 0, 0, 0.06);

  --xj-shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
  --xj-shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --xj-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --xj-shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --xj-shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}