/* 全局 SCSS 变量 */

// 屏幕尺寸断点 (与Tailwind CSS保持一致)
$screen-xs: 480px;  // 自定义断点 (Tailwind无此断点)
$screen-sm: 640px;  // Tailwind sm: 640px
$screen-md: 768px;  // Tailwind md: 768px
$screen-lg: 1024px; // Tailwind lg: 1024px
$screen-xl: 1280px; // Tailwind xl: 1280px
$screen-xxl: 1536px; // Tailwind 2xl: 1536px

// 媒体查询混合宏
@mixin xs {
  @media (max-width: #{$screen-xs - 1px}) {
    @content;
  }
}

@mixin sm {
  @media (min-width: #{$screen-sm}) {
    @content;
  }
}

@mixin md {
  @media (min-width: #{$screen-md}) {
    @content;
  }
}

@mixin lg {
  @media (min-width: #{$screen-lg}) {
    @content;
  }
}

@mixin xl {
  @media (min-width: #{$screen-xl}) {
    @content;
  }
}

@mixin xxl {
  @media (min-width: #{$screen-xxl}) {
    @content;
  }
}

$elNamespace: el;
$namespace: zt;

// 常用颜色变量
$primary-color: #646cff;
$primary-hover-color: #535bf2;
$text-color: rgba(255, 255, 255, 0.87);
$bg-color: #242424;
$light-text-color: #213547;
$light-bg-color: #ffffff;

// 字体设置
$font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
$font-size-base: 16px;
$line-height-base: 24px;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

// 边框
$border-radius: 8px;
$border-color: transparent;

// 过渡
$transition-duration: 0.25s; 