// Colors
$primary-color: #007bff;
$secondary-color: #6c757d;
$success-color: #28a745;
$danger-color: #dc3545;
$warning-color: #ffc107;
$info-color: #17a2b8;
$light-color: #f8f9fa;
$dark-color: #343a40;
$body-color: #212529;
$text-color: #333;
$white: #fff;

// Typography
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$font-size-base: 1rem; // 16px
$line-height-base: 1.5;

$h1-font-size: 2.5rem;
$h2-font-size: 2rem;
$h3-font-size: 1.75rem;
$h4-font-size: 1.5rem;
$h5-font-size: 1.25rem;
$h6-font-size: 1rem;

// Spacing
$spacer: 1rem;
$spacers: (
  0: 0,
  1: ($spacer * .25), // 4px
  2: ($spacer * .5),  // 8px
  3: $spacer,         // 16px
  4: ($spacer * 1.5), // 24px
  5: ($spacer * 3)    // 48px
);

// Breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

// Grid
$grid-columns: 12;
$grid-gutter-width: 30px;
