// Colors
$primary-color: #4B8BFF;
$primary-dark: darken($primary-color, 10%);
$primary-light: lighten($primary-color, 25%);

$dark-gray: #1E1E1E;
$dark-gray-lighter: #2A2A2A;
$dark-gray-lightest: #333333;
$mid-gray: #606060;
$light-gray: #9A9A9A;
$lighter-gray: #E0E0E0;

$white: #FFFFFF;
$black: #000000;

$success: #4CD964;
$warning: #FFC107;
$danger: #FF3B30;
$info: #5AC8FA;

$steam-color: #171a21;

// Typography
$font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
$font-size-base: 16px;
$line-height-base: 1.6;

// Spacing
$spacing-xs: 0.25rem;  // 4px
$spacing-sm: 0.5rem;   // 8px
$spacing-md: 1rem;     // 16px
$spacing-lg: 1.5rem;   // 24px
$spacing-xl: 2rem;     // 32px
$spacing-xxl: 3rem;    // 48px

// Breakpoints
$breakpoint-sm: 768px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1400px;

// Container widths
$container-max-width: 1320px;

// Border radius
$border-radius-sm: 0.25rem;   // 4px
$border-radius-md: 0.5rem;    // 8px
$border-radius-lg: 0.75rem;   // 12px
$border-radius-xl: 1rem;      // 16px

// Box shadow
$box-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
$box-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
$box-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.1);

// Transition
$transition-base: all 0.3s ease;
$transition-fast: all 0.15s ease;

:root {
  --primary-color: #{$primary-color};
  --primary-dark: #{$primary-dark};
  --primary-light: #{$primary-light};
  
  --dark-gray: #{$dark-gray};
  --dark-gray-lighter: #{$dark-gray-lighter};
  --dark-gray-lightest: #{$dark-gray-lightest};
  --mid-gray: #{$mid-gray};
  --light-gray: #{$light-gray};
  --lighter-gray: #{$lighter-gray};
  
  --white: #{$white};
  --black: #{$black};
  
  --success: #{$success};
  --warning: #{$warning};
  --danger: #{$danger};
  --info: #{$info};
  
  --steam-color: #{$steam-color};
  
  --font-family-base: #{$font-family-base};
  --font-size-base: #{$font-size-base};
  --line-height-base: #{$line-height-base};
  
  --spacing-xs: #{$spacing-xs};
  --spacing-sm: #{$spacing-sm};
  --spacing-md: #{$spacing-md};
  --spacing-lg: #{$spacing-lg};
  --spacing-xl: #{$spacing-xl};
  --spacing-xxl: #{$spacing-xxl};
  
  --breakpoint-sm: #{$breakpoint-sm};
  --breakpoint-md: #{$breakpoint-md};
  --breakpoint-lg: #{$breakpoint-lg};
  --breakpoint-xl: #{$breakpoint-xl};
  --breakpoint-xxl: #{$breakpoint-xxl};
  
  --container-max-width: #{$container-max-width};
  
  --border-radius-sm: #{$border-radius-sm};
  --border-radius-md: #{$border-radius-md};
  --border-radius-lg: #{$border-radius-lg};
  --border-radius-xl: #{$border-radius-xl};
  
  --box-shadow-sm: #{$box-shadow-sm};
  --box-shadow-md: #{$box-shadow-md};
  --box-shadow-lg: #{$box-shadow-lg};
  
  --transition-base: #{$transition-base};
  --transition-fast: #{$transition-fast};
}
