sionrui/frontend/app/web-gold/src/style.less

@import "tailwindcss";

/* ================================
   Yudao Cloud B端设计系统
   Design System v1.0
   ================================ */

/* ================================
   1. 设计令牌 (Design Tokens)
   ================================ */
:root {
  // ========================================
  // 品牌主色 - 科技蓝
  // ========================================
  --color-primary-50:  #EFF6FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;

  // ========================================
  // 中性灰
  // ========================================
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;

  // ========================================
  // 功能色
  // ========================================
  --color-success-50:  #DCFCE7;
  --color-success-500: #22C55E;
  --color-success-600: #16A34A;

  --color-warning-50:  #FEF3C7;
  --color-warning-500: #F59E0B;
  --color-warning-600: #D97706;

  --color-error-50:  #FEE2E2;
  --color-error-500: #EF4444;
  --color-error-600: #DC2626;

  --color-info-50:  #DBEAFE;
  --color-info-500: #3B82F6;
  --color-info-600: #2563EB;

  // ========================================
  // 语义化颜色 (兼容旧变量)
  // ========================================
  --color-bg:          var(--color-gray-50);
  --color-bg-page:     var(--color-gray-50);
  --color-bg-card:     #FFFFFF;
  --color-surface:     #FFFFFF;

  --color-text:          var(--color-gray-900);
  --color-text-primary:  var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-muted:    var(--color-gray-500);
  --color-text-disabled: var(--color-gray-400);
  --color-text-inverse:  #FFFFFF;

  --color-border:        var(--color-gray-200);
  --color-border-focus:  var(--color-primary-500);
  --color-primary:       var(--color-primary-500);
  --color-primary-hover: var(--color-primary-400);

  --color-success:       var(--color-success-500);
  --color-success-bg:    var(--color-success-50);
  --color-warning:       var(--color-warning-500);
  --color-warning-bg:    var(--color-warning-50);
  --color-error:         var(--color-error-500);
  --color-error-bg:      var(--color-error-50);

  // ========================================
  // 字体系统
  // ========================================
  --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  --font-size-xs:   12px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;

  --line-height-tight: 1.25;
  --line-height-base:  1.5;

  // ========================================
  // 间距系统 (4px 基准)
  // ========================================
  --space-1:   4px;
  --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-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  // ========================================
  // 圆角系统
  // ========================================
  --radius-sm:   4px;
  --radius-base: 6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  // 兼容旧变量
  --radius-card:   12px;
  --radius-button: 6px;
  --radius-tag:    4px;

  // ========================================
  // 阴影系统
  // ========================================
  --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-blue: 0 0 0 3px rgba(59, 130, 246, 0.15);

  // ========================================
  // 布局系统
  // ========================================
  --sidebar-width: 240px;
  --header-height: 56px;

  // ========================================
  // 动效
  // ========================================
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
}

// ========================================
// 深色模式
// ========================================
[data-theme="dark"],
.dark {
  --color-bg:          #0F172A;
  --color-bg-page:     #0F172A;
  --color-bg-card:     #1E293B;
  --color-surface:     #1E293B;

  --color-text:          #F1F5F9;
  --color-text-primary:  #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted:    #64748B;
  --color-text-disabled: #475569;

  --color-border:      #334155;

  --color-primary:     #60A5FA;
  --color-primary-hover: #93C5FD;
}

/* ================================
   2. 全局基础样式 (Global Base)
   ================================ */
html, body, #app {
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.5;
}

body { scrollbar-gutter: stable both-edges; }