Saas-voc/src/modules/shared/styles/_card.scss

@use 'sass:color';
@use 'tokens' as t;

@mixin surface-card($padding: 20px, $radius: t.$radius-card) {
  background: t.$color-surface;
  border: 1px solid t.$color-border-soft;
  border-radius: $radius;
  box-shadow: t.$shadow-card-flat;
  padding: $padding;
  color: t.$color-text;
}

@mixin section-card($padding: 20px) {
  background: t.$color-surface;
  border: 1px solid t.$color-border-soft;
  border-radius: t.$radius-card;
  box-shadow: t.$shadow-card-flat;
  padding: $padding;
}

// content-card 基础壳体（白底卡片 + 标题区 + 主体）
@mixin content-card($padding: 20px, $gap: 16px) {
  @include section-card($padding);
  display: flex;
  flex-direction: column;
  gap: $gap;
  min-width: 0;
}

// alert-card 壳体（左边色条 + 图标 + 主体 + 操作区）
@mixin alert-card($accent: t.$color-blue, $padding: 16px 18px) {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: $padding;
  border: 1px solid t.$color-border-soft;
  border-left: 4px solid $accent;
  border-radius: t.$radius-card;
  background: linear-gradient(135deg, rgba($accent, 0.08), t.$color-surface 46%);
  box-shadow: t.$shadow-card-flat;
}

// entry-card 壳体（可点击入口卡片）
@mixin entry-card($padding: 18px 20px, $gap: 12px) {
  display: flex;
  flex-direction: column;
  gap: $gap;
  padding: $padding;
  background: t.$color-surface;
  border: 1px solid t.$color-border-soft;
  border-radius: t.$radius-card;
  box-shadow: t.$shadow-card-flat;
  cursor: pointer;
  transition: transform t.$transition-fast, box-shadow t.$transition-fast, border-color t.$transition-fast, background t.$transition-fast;

  &:hover {
    transform: translateY(-1px);
    background: t.$color-accent;
    box-shadow: t.$shadow-elev-1;
    border-color: t.$color-border;
  }

  &:focus-visible {
    @include t.focus-ring;
  }
}

// chart-card 壳体（图表卡片容器）
@mixin chart-card($padding: 16px, $min-height: 260px) {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: $min-height;
  padding: $padding;
  background: t.$color-surface;
  border: 1px solid t.$color-border-soft;
  border-radius: t.$radius-card;
  box-shadow: t.$shadow-card-flat;
}

@mixin metric-card($tone: default) {
  $accent: t.tone-color($tone);

  background: t.$color-surface;
  border: 1px solid t.$color-border-soft;
  border-radius: t.$radius-card;
  box-shadow: t.$shadow-card-flat;
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  transition: transform t.$transition-fast, box-shadow t.$transition-fast, border-color t.$transition-fast;

  &::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba($accent, 0.9), rgba($accent, 0.24));
    border-radius: t.$radius-card 0 0 t.$radius-card;
  }

  &:hover {
    transform: translateY(-1px);
    background: t.$color-accent;
    border-color: t.$color-border;
    box-shadow: t.$shadow-elev-1;
  }
}

@mixin card-title {
  margin: 0;
  color: t.$color-text;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

@mixin card-subtitle {
  margin: 0;
  color: t.$color-text-muted;
  font-size: 13px;
  line-height: 1.6;
}