$primary-color: #2E7D32;
$primary-light: #4CAF50;
$primary-dark: #1B5E20;
$secondary-color: #1976D2;
$warning-color: #FF9800;
$danger-color: #F44336;
$success-color: #4CAF50;
$info-color: #2196F3;

$text-primary: #333333;
$text-secondary: #666666;
$text-hint: #999999;
$text-white: #FFFFFF;

$bg-primary: #F5F7FA;
$bg-card: #FFFFFF;
$bg-header: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);

$border-radius: 16rpx;
$border-radius-lg: 24rpx;
$border-radius-xl: 32rpx;

$shadow-sm: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
$shadow-md: 0 4rpx 16rpx rgba(0, 0, 0, 0.12);
$shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.16);

$spacing-xs: 8rpx;
$spacing-sm: 16rpx;
$spacing-md: 24rpx;
$spacing-lg: 32rpx;
$spacing-xl: 48rpx;

@mixin card-style {
    background-color: $bg-card;
    border-radius: $border-radius-lg;
    box-shadow: $shadow-sm;
}

@mixin button-primary {
    background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
    color: $text-white;
    border-radius: $border-radius-lg;
    font-weight: 500;
    transition: all 0.3s ease;
    
    &:active {
        opacity: 0.9;
        transform: scale(0.98);
    }
}

@mixin button-secondary {
    background: linear-gradient(135deg, $secondary-color 0%, #42A5F5 100%);
    color: $text-white;
    border-radius: $border-radius-lg;
    font-weight: 500;
    transition: all 0.3s ease;
}

@mixin button-danger {
    background: linear-gradient(135deg, $danger-color 0%, #EF5350 100%);
    color: $text-white;
    border-radius: $border-radius-lg;
    font-weight: 500;
}

@mixin status-badge($color) {
    display: inline-flex;
    align-items: center;
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
    font-weight: 500;
    background-color: rgba($color, 0.1);
    color: $color;
}

@mixin page-container {
    min-height: 100vh;
    background-color: $bg-primary;
}

@mixin header-gradient {
    background: $bg-header;
    border-radius: 0 0 48rpx 48rpx;
}