// COLORS
// -------------------------

$white: #fff;
$shark: #2d2e33;
$cod-gray: #1a1a1a;
$persimmon: #ff5a57;
$teal: #008489;
$koromiko: #ffc157;
$dodger-blue: #5781ff;
$mustard: #ffdd57;
$malibu: #57c9ff;
$hint-of-red: #fcfafa;
$dusty-gray: #999;
$dove-gray: #666;
$jumbo: #818184;
$woodsmoke: #161719;

// GLOBAL STYLES
// -------------------------

$body-bg: $white;
$body-color: $shark;

$primary-color: $persimmon;
$secondary-color: $teal;
$black-color: $woodsmoke;
$text-muted: $jumbo;

// FONTS
// -------------------------

$font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
  Cantarell, 'Helvetica Neue', sans-serif;
$font-family-base: $font-family-primary;

$font-size-root: 16px;
$font-size-base: px-to-rem($font-size-root);
$line-height-base: 20 / 14;

$font-sizes: (
  2x-small: px-to-rem($font-size-root - 6px),
  x-small: px-to-rem($font-size-root - 4px),
  small: px-to-rem($font-size-root - 2px),
  normal: px-to-rem($font-size-root),
  large: px-to-rem($font-size-root + 2px),
  x-large: px-to-rem($font-size-root + 4px),
  2x-large: px-to-rem($font-size-root + 6px)
);

$heading-sizes: (
  h1: px-to-rem(48px),
  h2: px-to-rem(32px),
  h3: px-to-rem(24px),
  h4: px-to-rem(20px),
  h5: 1rem,
  h6: px-to-rem(14px)
);

$heading-line-height: 1.1;

// SPACING
// -------------------------

$spacer: $font-size-root;
$spacers: (
  2x-small: px-to-rem($spacer * 0.25),
  x-small: px-to-rem($spacer * 0.5),
  small: px-to-rem($spacer * 0.75),
  normal: px-to-rem($spacer),
  large: px-to-rem($spacer * 1.5),
  x-large: px-to-rem($spacer * 2),
  2x-large: px-to-rem($spacer * 3)
);

$section-gap: px-to-rem($spacer * 6);

// GRID
// -------------------------

$grid-breakpoints: (
  xs: 0,
  sm: px-to-rem(544px),
  md: px-to-rem(768px),
  lg: px-to-rem(992px),
  xl: px-to-rem(1200px)
);

$container-max-widths: (
  sm: px-to-rem(576px),
  md: px-to-rem(720px),
  lg: px-to-rem(940px),
  xl: px-to-rem(1140px)
);

$grid-columns: 12;
$grid-gutter-width: px-to-rem(36px);
