// Breakpoint variables
$mobile-breakpoint: 768px;
$desktop-breakpoint: 769px;

// Color variables
$color-primary: #042c53;
$color-secondary: #0c447c;
$color-heading: #042c53;

// Shadow variables
$shadow-sm: 0 4px 12px;
$shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

// Border radius variables
$border-radius-sm: 0.375rem;
$border-radius-md: 0.5rem;
$border-radius-lg: 1rem;
$border-radius-xl: 1.5rem;

// Spacing variables
$spacing-xs: 0.5rem;
$spacing-sm: 0.75rem;
$spacing-md: 1rem;
$spacing-lg: 1.5rem;
$spacing-xl: 2rem;
$spacing-2xl: 3rem;
$spacing-3xl: 4rem;

// Section variables
$section-padding-y: $spacing-2xl;

// Card variables
$card-border-radius: $border-radius-xl;
$card-border-radius-sm: $border-radius-md;
$card-border-radius-md: $border-radius-lg;
$card-border-radius-lg: $border-radius-xl;
$card-padding: $spacing-xl;
$card-padding-sm: $spacing-lg;
$card-padding-md: $spacing-md;
$card-padding-lg: $spacing-xl;
$card-gap: $spacing-xl;
$card-gap-sm: $spacing-md;

// Transition variables
$transition-base: all 0.3s ease;
$transition-default: all 0.3s ease;
$transition-fast: all 0.2s ease;
$transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

// Common shadow variables
$shadow-card:
  0 4px 6px -1px rgba(0, 0, 0, 0.1),
  0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-card-hover:
  0 10px 15px -3px rgba(0, 0, 0, 0.1),
  0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-card-lg:
  0 10px 15px -3px rgba(0, 0, 0, 0.1),
  0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-button:
  0 4px 6px -1px rgba(0, 0, 0, 0.1),
  0 2px 4px -1px rgba(0, 0, 0, 0.06);

// Gradient variables
$gradient-primary: #042c53;

// Light theme gradient
$gradient-text-light: linear-gradient(
  to right,
  $color-secondary,
  $color-primary
);

// Dark theme gradient
$gradient-text-dark: linear-gradient(to right, #e6f1fb, #b5d4f4);

// Default gradient for backwards compatibility
$gradient-text: $gradient-text-light;

// Services Section Variables
$services-card-padding: 1.5rem;
$services-card-border-radius: 0.75rem;
$services-icon-size: 2.5rem;
$services-grid-gap: 1.5rem;
$services-grid-gap-mobile: 1rem;
$services-header-margin: 2rem;

// Skills Section Variables
$skills-header-margin: 3rem;
$skills-category-gap: 2rem;
$skills-category-gap-mobile: 1.5rem;
$skills-skill-gap: 1.5rem;
$skills-skill-gap-mobile: 1rem;
$skills-progress-height: 0.75rem;
$skills-progress-radius: 9999px;
$skills-category-padding: 2rem;
$skills-category-padding-mobile: 1.5rem;

// Add any other global variables here