@main-text: #3b3b3b;

@primary-color: #06b1ab;
@main-orange: #F9483E;

@side-bg: #F9FAFB;
@title-bg: @side-bg;
@border-color: #F0F0F0;
@border-color-base: #F0F0F0;
@heavy-border-color: #E5E5E5;

@selected-bg: rgba(6, 177, 171, 0.1);
@hover-bg: rgba(6, 177, 171, 0.05);

@weak-bg: #F8FAFB;
@weak-text: #777;
@footer-text: #CCC;

@toolbar-btn-bg: #E9E9E9;

// 文本颜色
@text-primary: #2c3e50;
@text-secondary: #5a6273;
@text-light: #7f8c8d;

// 布局间距
@layout-space: 20px;
@layout-space-sm: 12px;
@layout-space-xs: 8px;

@side-horizontal-padding: 15px;
@side-vertical-spacing: 10px;

@layout-extension-space-horizontal: 15px;
@layout-extension-space-vertical: 10px;

// 容器尺寸 - 浏览器插件
@container-width-max: 400px;  // 浏览器插件典型宽度
@input-container-width: 360px; // 调整输入框容器宽度
@container-padding: 10px;     // 插件内边距
@header-height: 50px;

// 状态颜色
@success-color: #06b1ab;
@error-color: #F9483E;
@warning-color: #faad14;
@info-color: #1890ff;

// 边框圆角
@border-radius-base: 8px;
@border-radius-sm: 4px;
@border-radius-lg: 12px;
@border-radius-pill: 20px;
@border-radius-circle: 50%;

// 阴影
@box-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.05);
@box-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.08);
@box-shadow-primary: 0 2px 6px rgba(6, 177, 171, 0.15);

// 动画
@transition-base: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
@transition-fast: all 0.2s ease;

// Ant Design变量
@component-background: #fff;
@padding-md: 12px;
@padding-sm: 8px;

// 插件容器和布局通用样式
.extension-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0 @container-padding;
  max-width: @container-width-max;
  margin: 0 auto;
} 