$title-font-size: clamp(1.5rem, 2vw, 2.4rem);
$content-font-size: clamp(1rem, 1.5vw, 1.2rem);
$log-font-size: 1.1rem;


$primary-color: #4a90e2;
$primary-light: #5ba0f2;
$primary-dark: #3a7bd5;
$success-color: #52c41a;
$success-light: #73d13d;
$success-bg: rgba(82, 196, 26, 0.2);
$success-bg-hover: rgba(82, 196, 26, 0.4);
$warning-color: #faad14;
$warning-light: #ffc53d;
$warning-bg: rgba(250, 173, 20, 0.2);
$warning-bg-hover: rgba(250, 173, 20, 0.4);
$error-color: #ff4d4f;
$error-light: #ff7875;
$error-bg: rgba(255, 77, 79, 0.2);
$error-bg-hover: rgba(255, 77, 79, 0.4);

$white: #ffffff;
$text-size: 14px;
$text-light: #b8d4f0;
$text-dark: #333333;
$text-gray: #cccccc;
$text-success: #b7eb8f;
$text-warning: #ffd666;
$text-error: #ffccc7;

$bg-primary: rgba(74, 144, 226, 0.2);
$bg-primary-hover: rgba(74, 144, 226, 0.4);
$bg-overlay: rgba(255, 255, 255, 0.1);
$bg-overlay-hover: rgba(255, 255, 255, 0.2);
$bg-light: rgba(255, 255, 255, 0.1);
$bg-light-hover: rgba(255, 255, 255, 0.2);
$bg-dark: rgba(0, 0, 0, 0.3);
$bg-input: rgba(255, 255, 255, 0.1);
$bg-input-focus: rgba(255, 255, 255, 0.15);

$border-primary: 1px solid $primary-color;
$border-light: 1px solid rgba(255, 255, 255, 0.3);
$border-light-hover: 1px solid rgba(255, 255, 255, 0.5);
$border-transparent: 1px solid transparent;

$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 15px;
$spacing-xl: 20px;
$spacing-xxl: 30px;

$border-radius: 4px;
$border-radius-lg: 8px;

$transition: all 0.3s ease;
$font-family: 'Microsoft YaHei', sans-serif;

// 混合器定义
@mixin button-base {
  border-radius: $border-radius;
  cursor: pointer;
  transition: $transition;
  border: $border-transparent;
  font-weight: 500;
  white-space: nowrap;
  line-height: 21px;
}

@mixin button-hover($bg-color, $border-color, $text-color) {
  &:hover {
    background: $bg-color;
    border-color: $border-color;
    color: $text-color;
  }
}

@mixin status-button($bg, $bg-hover, $border, $border-hover, $text, $text-hover) {
  background: $bg;
  border-color: $border;
  color: $text;

  &:hover {
    background: $bg-hover;
    border-color: $border-hover;
    color: $text-hover;
    box-shadow: 0 0 12px rgba($border, 0.5);
  }
}

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@mixin transition-ease {
  transition: all 0.3s ease;
}

@mixin icon-base($size) {
  width: $size;
  height: $size;
}