@use 'sass:color';

// =============================================
//  安全梯度生成 Mixin（仅生成主色梯度，不干涉其它设定）
// =============================================
@mixin generate-theme-colors($name, $base, $mode: 'light') {
  --el-color-#{$name}: #{$base};

  @if $mode == 'light' {
    // 亮色模式：light 混合纯白，dark 混合纯黑
    @for $i from 1 through 9 {
      --el-color-#{$name}-light-#{$i}: #{color.mix(#ffffff, $base, $i * 10%)};
    }
    --el-color-#{$name}-dark-2: #{color.mix(#000000, $base, 20%)};
  } @else if $mode == 'dark' {
    // 暗色模式：light 混合 #141414，dark 混合纯白（按下反馈变亮）
    $dark-bg: #141414;
    @for $i from 1 through 9 {
      --el-color-#{$name}-light-#{$i}: #{color.mix($dark-bg, $base, $i * 10%)};
    }
    --el-color-#{$name}-dark-2: #{color.mix(#ffffff, $base, 20%)};
  }
}

// ========== 亮色模式（默认） ==========
:root {
  // 1. 自动生成 Primary 亮色梯度
  @include generate-theme-colors('primary', #8077ff, 'light');
  // 2. 自动生成 Success 亮色梯度
  @include generate-theme-colors('success', #10b981, 'light');

  // 自定义渐变按钮变量
  --btn-primary-gradient: linear-gradient(91deg, #5f53ff -40.99%, #8d53ff 88.34%);
  --btn-primary-gradient-hover: linear-gradient(95deg, #8d22ff -9.99%, #ae00ff 91.44%);
  --btn-primary-shadow: rgba(102, 126, 234, 0.4);

  // 页面级自定义变量
  --admin-bg: #f0f2f5;
  --admin-sidebar-bg: #ffffff;
  --admin-header-bg: #ffffff;
  --admin-card-bg: #ffffff;
  --admin-header-form-bg: #554fa1;
  --admin-text-primary: #303133;
  --admin-text-secondary: #909399;
  --admin-border-color: #e4e7ed;
  --admin-table-header-bg: #f5f7fa;
}

// ========== 暗色模式 ==========
html.dark {
  // 1. 自动生成 Primary 暗色梯度
  @include generate-theme-colors('primary', #8077ff, 'dark');
  // 2. 自动生成 Success 暗色梯度
  @include generate-theme-colors('success', #35ffdd, 'dark');

  // 暗色下的渐变按钮
  --btn-primary-gradient: linear-gradient(135deg, #5a6fe0 0%, #6a3f9a 100%);
  --btn-primary-gradient-hover: linear-gradient(135deg, #6a3f9a 0%, #5a6fe0 100%);
  --btn-primary-shadow: rgba(90, 111, 224, 0.3);

  // 页面级自定义变量
  --admin-bg: #050505;
  --admin-sidebar-bg: #050505;
  --admin-header-bg: #050505;
  --admin-header-form-bg: #554fa1;
  --admin-card-bg: #1d1e1f;
  --admin-text-primary: #e5eaf3;
  --admin-text-secondary: #a3a6ad;
  --admin-border-color: rgba(255, 255, 255, 0.1);
  --admin-table-header-bg: #1d1e1f;
  --admin-btn-bg: #2f2f2f;
}

// 全局平滑过渡（主题切换时）
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}
