Theme Setup

// BREAKPOINTS
$breakpoint-xs: 480px;
$breakpoint-sm: 768px;
$breakpoint-md: 992px;
$breakpoint-lg: 1200px;

// Aliases
$breakpoint-tablet: $breakpoint-sm;
$breakpoint-desktop: $breakpoint-lg;

// COLORS
// Base Spectrum
$color-base-blue: #000a3c;
$color-base-grey: #f1f1f1;
$color-base-white: #fff;
$color-base-black: #000;

// Grey Spectrum
$color-grey-dark: #9999a5;
$color-grey-medium: #bfbfcb;
$color-grey-light: #e3dbdb;

// Blue Spectrum
$color-blue-dark: #013f8c;
$color-blue-medium: #1475ff;
$color-blue-light: #7feaed;

// Magenta Spectrum
$color-magenta-dark: #960064;
$color-magenta-medium: #ff2970;
$color-magenta-light: #f870ff;

// Green Spectrum
$color-green-dark: #006550;
$color-green-medium: #00d256;
$color-green-light: #df0;

// Yellow
$color-yellow-dark: #bd871a;
$color-yellow-medium: #e5a83b;
$color-yellow-light: #ffd400;

// Bootstrap Mapping
$color-default: $color-base-blue;
$color-primary: $color-blue-medium;
$color-success: $color-green-medium;
$color-info: $color-blue-light;
$color-warning: $color-magenta-light;
$color-danger: $color-magenta-medium;
$color-muted: $color-grey-medium;

// 2023 Branding Updated Palette

// Primary
$color-mountain-grey: #d9dae2;
$color-peak-blue: #0064ff;
$color-vista-navy: #000a3c;

// Secondary
$color-horizon: #ff008a;
$color-horizon-tint: #a52187;
$color-sunrise: #ffd400;
$color-sunrise-tint: #ffb91e;
$color-sky: #0ac8e6;
$color-sky-tint: #00aad7;

// FONTS
$font-default: ProximaNova, Arial, sans-serif;
$font-headline: ViacomCBSRaisonne, Arial, sans-serif;

// SHADOWS
@mixin boxShadow($height) {
  @if $height == 2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  } @else if $height == 3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  } @else if $height == 4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  } @else if $height == 5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  } @else {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  }
}

@mixin textShadow {
  text-shadow: 0 0.2rem 0.4rem rgba($color-base-blue, 0.25);
}

/* stylelint-disable scss/at-mixin-pattern */
// TYPE MIXINS
@mixin typeDisplayXL($isBold: false) {
  font: normal 10rem/1 $font-headline;
  margin-top: 0;

  @if $isBold {
    font-weight: bold;
  }
}

@mixin typeDisplayLarge($isBold: false) {
  font: normal 6rem/1 $font-headline;
  margin-top: 0;

  @if $isBold {
    font-weight: bold;
  }
}

@mixin typeDisplayMedium($isBold: false) {
  font: normal 4.8rem/1 $font-headline;
  margin-top: 0;

  @if $isBold {
    font-weight: bold;
  }
}

@mixin typeDisplay($isBold: false) {
  font: normal 3.6rem/1.1111 $font-headline;
  margin-top: 0;

  @if $isBold {
    font-weight: bold;
  }
}

@mixin typeHeadline($isBold: false) {
  font: normal 2.4rem/1.1667 $font-headline;
  margin-top: 0;

  @if $isBold {
    font-weight: bold;
  }
}

@mixin typeTitle($isBold: false) {
  font: normal 2rem/1.4 $font-headline;

  @if $isBold {
    font-weight: bold;
  }
}

@mixin typeSubheader($isBold: false) {
  font: normal 1.6rem/1.5 $font-default;

  @if $isBold {
    font-weight: bold;
  }
}

@mixin typeBody($isBold: false) {
  font: normal 1.4rem/1.4 $font-default;

  @if $isBold {
    font-weight: bold;
  }
}

@mixin typeCaption($isBold: false) {
  font: normal 1.2rem/1.4 $font-default;

  @if $isBold {
    font-weight: bold;
  }
}

@mixin typeSmall($isBold: false) {
  font: normal 1rem/1.4 $font-default;

  @if $isBold {
    font-weight: bold;
  }
}