// 全局通用样式变量和混入
// 字体相关
$font-family-primary: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !default;

// 颜色相关
$color-primary: #000000 !default;
$color-primary-light: rgba(0, 0, 0, 0.85) !default;
$color-primary-medium: rgba(0, 0, 0, 0.65) !default;
$color-primary-lightest: rgba(0, 0, 0, 0.35) !default;
$color-primary-lightest-2: rgba(0, 0, 0, 0.2) !default;
$color-primary-lightest-3: rgba(0, 0, 0, 0.16) !default;
$color-primary-lightest-4: rgba(0, 0, 0, 0.1) !default;
$color-primary-lightest-5: rgba(0, 0, 0, 0.06) !default;
$color-primary-lightest-6: rgba(0, 0, 0, 0.08) !default;

$color-text-secondary: rgba(60, 60, 67, 0.6) !default;
$color-text-tertiary: rgba(60, 60, 67, 0.3) !default;

$color-white: #FFFFFF !default;
$color-background: #FAFAFA !default;



// 字体大小和行高混入
@mixin text-style($size: 14px, $weight: 400, $line-height: 1.4em, $letter-spacing: 0) {
  font-family: $font-family-primary;
  font-size: $size;
  font-weight: $weight;
  line-height: $line-height;
  letter-spacing: $letter-spacing;
}

// 常用文本样式
@mixin text-primary {
  @include text-style(20px, 600, 1.4em, 1.9%);
  color: $color-primary;
}

@mixin text-secondary {
  @include text-style(14px, 400, 1.4em, 2.7%);
  color: $color-primary-lightest;
}

@mixin text-small {
  @include text-style(12px, 500, 1.4em, 3.2%);
  color: $color-primary-lightest;
}

@mixin text-medium {
  @include text-style(18px, 600, 1.4em, 2.1%);
  color: $color-primary-light;
}

@mixin text-body {
  @include text-style(14px, 400, 1.571em, 2.7%);
  color: $color-primary-medium;
}

@mixin text-caption {
  @include text-style(12px, 400, 1.5em);
  color: $color-text-secondary;
}

@mixin text-tag {
  @include text-style(11px, 500, 1.8em, -2.1%);
  color: $color-primary;
}

// 按钮样式混入
@mixin button-base {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  outline: none;
}

@mixin button-primary {
  @include button-base;
  background: $color-primary;
  border: 0.5px solid $color-primary-lightest-5;
  border-radius: 999px;
  color: $color-white;
}

@mixin button-secondary {
  @include button-base;
  background: $color-white;
  border: 0.5px solid $color-primary-lightest-3;
  border-radius: 999px;
  color: $color-primary;
}

// 卡片样式混入
@mixin card-base {
  background: $color-white;
  border: 0.5px solid $color-primary-lightest-6;
  border-radius: 20px;
  box-shadow: 0px 4px 36px 0px $color-primary-lightest-5;
}

// 标签样式混入
@mixin tag-base {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  height: 20px;
  background: $color-white;
  border: 0.5px solid $color-primary-lightest-3;
  border-radius: 999px;
}

// 头像样式混入
@mixin avatar-base($size: 64px) {
  width: $size;
  height: $size;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.2);
}

.avatar
{
  border: none;
}