/*
|-------------------------------------------------------------------------------
| Colors
*/
// Base palette
$token-c-current: currentColor;
$token-c-black: hsl(0, 0%, 0%);
$token-c-grey-600: hsl(225, 2%, 56%);
$token-c-white: hsl(0, 0%, 100%);
$token-c-navy-400: hsl(210, 39%, 35%);
$token-c-navy-dark: hsl(206, 32%, 21%); // #243746
$token-c-blue-light: hsl(199, 58%, 90%);
$token-c-red: #ff1443;
$token-c-red-darker: #eb0337;

// Aliases, for common use in other files
$token-c-header-subbrand-bg: $token-c-white;
$token-c-header-subbrand-border: $token-c-navy-400;
$token-c-header-subbrand-title: $token-c-navy-400;
$token-c-header-subbrand-items: $token-c-grey-600;
$token-c-header-subbrand-affiliate: $token-c-red;

// Height of the viewport, excluding the FT header
$token-partner-content-header-height-mob: 117px;
$token-partner-content-header-height-desktop: 97px;
$token-viewport-height-desktop: calc(
  100vh - $token-partner-content-header-height-desktop
);
$token-viewport-height-mob: calc(
  100vh - $token-partner-content-header-height-mob
);

/*
|-------------------------------------------------------------------------------
| Spacing
*/
$token-s-100: 0.25rem;
$token-s-200: 0.5rem;
$token-s-300: 1rem;
$token-s-400: 1.5rem;
$token-s-500: 2rem;
$token-s-600: 3rem;
$token-s-700: 6rem;
$token-s-800: 10rem;
$token-s-900: 15rem;
$token-s-1000: 21rem;

/*
|-------------------------------------------------------------------------------
| Breakpoints
*/
$token-bp-tablet: 768px;
$token-bp-desktop: 1024px;
$token-bp-xl: 1900px;

@mixin mobile {
  @content;
}

@mixin mobile-below {
  @media (max-width: #{$token-bp-tablet}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$token-bp-tablet}) {
    @content;
  }
}

@mixin tablet-below {
  @media (max-width: #{$token-bp-desktop}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$token-bp-desktop}) {
    @content;
  }
}

@mixin widescreen {
  @media (min-width: #{$token-bp-xl}) {
    @content;
  }
}

/*
|-------------------------------------------------------------------------------
| Typography
*/
$token-base-size: 16px;
$token-lg-size: 20px;

@mixin ff-fallback {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
}

@mixin ff-fallback-light {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
}

@mixin ff-primary-light {
  font-family: "EditorialNew_Light", serif;
  font-weight: 400;
}

@mixin ff-primary-medium {
  font-family: "Editorial New", serif;
  font-weight: 600;
}