// Design tokens — AutoShopee Kit
// Reference: docs/core/DESIGN.md

// Brand
$c-brand: #ee4d2d;
$c-brand-hover: #f05f43;
$c-brand-active: #d8401f;
$c-brand-tint: #fdeee9;

// Link
$c-link: #2d8cf0;
$c-link-hover: #1c6dd0;
$c-link-tint: #e8f4ff;

// Platform
$c-tiktok: #010101;

// Status
$c-success: #19be6b;
$c-success-bg: #e8faf0;
$c-error: #ed4014;
$c-error-bg: #fdecee;
$c-warning: #ff9900;
$c-warning-bg: #fff6e6;
$c-neutral: #8a8f99;
$c-neutral-bg: #f1f2f4;

// Text
$c-text-strong: #1f2329;
$c-text: #515a6e;
$c-text-muted: #8a8f99;
$c-text-placeholder: #b0b4bb;

// Surface & border
$c-surface: #fff;
$c-surface-soft: #f8f9fb;
$c-surface-alt: #f4f5f7;
$c-surface-dark: #1f2329;
$c-border: #eef0f3;
$c-border-strong: #e0e3e8;
$c-border-input: #dcdfe6;

// Radius
$radius-badge: 4px;
$radius-sm: 6px;
$radius-item: 8px;
$radius-card: 12px;
$radius-card-lg: 14px;
$radius-pill: 999px;

// Shadow
$shadow-card: 0 4px 16px rgba(17, 24, 39, 0.06);
$shadow-card-lg: 0 6px 24px rgba(17, 24, 39, 0.08);
$shadow-hover: 0 8px 22px rgba(17, 24, 39, 0.08);

// Motion
$motion-fast: 0.15s ease;
$motion-base: 0.18s ease;

@mixin card($padding: 16px) {
  background: $c-surface;
  border-radius: $radius-card;
  box-shadow: $shadow-card;
  padding: $padding;
}

@mixin card-hover {
  transition: box-shadow $motion-base, border-color $motion-base, transform $motion-base;

  &:hover {
    box-shadow: $shadow-hover;
    transform: translateY(-1px);
  }
}

@mixin ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

@mixin line-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@mixin transition-soft($props...) {
  transition: $props;
}

@mixin scrollbar($size: 6px) {
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(17, 24, 39, 0.12);
    border-radius: $radius-pill;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 24, 39, 0.2);
  }
}
