// Modern Color Variables (matching old plugin)
$primary-color: #4a6cf7;
$primary-hover: #2271b1;
$secondary-color: #1e293b;
$border-color: #e2e8f0;
$text-color: #475569;
$text-light: #64748b;
$text-dark: #1e293b;
$background-light: #f8fafc;
$background-lighter: #f1f5f9;
$white: #ffffff;
$light-gray: #f1f5f9;
$medium-gray: #e2e8f0;
$dark-gray: #334155;

// Status Colors
$success-color: #10b981;
$danger-color: #ef4444;
$warning-color: #f59e0b;

// Spacing
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-2xl: 40px;

// Border radius
$border-radius: 6px;
$border-radius-md: 2px;
$border-radius-sm: 4px;
$border-radius-lg: 8px;
$border-radius-xl: 12px;
$border-radius-full: 9999px;

// Shadows
$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-md: 0 4px 20px rgba(0, 0, 0, 0.05);
$shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
$shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.1);
$input-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
$focus-shadow: 0 0 0 2px rgba($primary-color, 0.3);
$primary-color-light: #5dade2;

// Transitions
$transition: all 0.2s ease-in-out;
$transition-fast: all 0.15s ease-in-out;

$spacing-3xl:'2px'; 

// Breakpoints
$tablet: 1024px;
$small-tablet: 782px;
$mobile: 500px;