// 基础金属色调
$metal-dark: #637994;      // 主色调1 - 深金属色
$metal-light: #bec3c9;     // 主色调2 - 浅金属色
$metal-bg: #a1a6ac;        // 背景主色调
$metal-highlight: #d0d5db; // 金属高光色
$metal-shadow: #8c949d;    // 金属阴影色

// 功能色（保持原有，但调整为金属质感）
$blue: mix($metal-dark, #324157, 30%);
$light-blue: mix($metal-light, #3A71A8, 30%);
$red: mix($metal-light, #C03639, 20%);
$pink: mix($metal-light, #E65D6E, 20%);
$green: mix($metal-light, #30B08F, 20%);
$tiffany: mix($metal-light, #4AB7BD, 20%);
$yellow: mix($metal-light, #FEC171, 20%);
$panGreen: mix($metal-light, #30B08F, 20%);

// 金属风格菜单主题
$base-menu-color: mix($metal-light, rgba(255, 255, 255, 0.7), 60%); // 菜单文字色
$base-menu-color-active: #ffffff; // 激活菜单文字色
$base-menu-background: linear-gradient(145deg, darken($metal-bg, 3%), $metal-bg); // 菜单背景
$base-logo-title-color: $metal-highlight; // Logo文字色

// 浅色金属菜单风格
$base-menu-light-color: mix($metal-dark, rgba(0, 0, 0, 0.7), 70%); // 浅色菜单文字色
$base-menu-light-background: linear-gradient(145deg, $metal-bg, lighten($metal-bg, 3%)); // 浅色菜单背景
$base-logo-light-title-color: $metal-dark; // 浅色Logo文字色

// 子菜单样式
$base-sub-menu-background: darken($metal-bg, 5%); // 子菜单背景
$base-sub-menu-hover: linear-gradient(145deg, $metal-bg, $metal-dark); // 子菜单悬停背景

$base-sidebar-width: 200px; // 侧边栏宽度

// 导出变量供JS使用
:export {
  menuColor: $base-menu-color;
  menuLightColor: $base-menu-light-color;
  menuColorActive: $base-menu-color-active;
  menuBackground: $base-menu-background;
  menuLightBackground: $base-menu-light-background;
  subMenuBackground: $base-sub-menu-background;
  subMenuHover: $base-sub-menu-hover;
  sideBarWidth: $base-sidebar-width;
  logoTitleColor: $base-logo-title-color;
  logoLightTitleColor: $base-logo-light-title-color;
  // 导出金属主题基础色供全局使用
  metalDark: $metal-dark;
  metalLight: $metal-light;
  metalBg: $metal-bg;
}