@use 'sass:map' as *;

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap');

$fontUrls: (
  theMix: 'https://weightmans.com/fonts/TheMix_500_Plain/TheMix_500_.woff2',
  theMixBold: 'https://weightmans.com/fonts/TheMix_700_Bold/TheMix_700_.woff2',
  montserrat:
    'https://weightmans.com/fonts/Montserrat/montserrat-v14-latin-700.woff',
);

$localFontUrls: (
  theMix: '/assets/fonts/TheMix_500_.woff2',
  theMixBold: '/assets/fonts/TheMix_700_.woff2',
  montserrat: '/assets/fonts/montserrat-v14-latin-700.woff',
);

@font-face {
  font-family: 'The Mix';
  src:
    local('The Mix'),
    url(get($localFontUrls, 'theMix')) format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'The Mix';
  src:
    local('The Mix Bold'),
    url(get($localFontUrls, 'theMixBold')) format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'the-mix-fallback';
  src: local('Arial');
  size-adjust: 98.450998%;
  ascent-override: 110.435842%;
  descent-override: 42.6%
}

@font-face {
  font-family: 'open-sans-fallback';
  src: local('Arial');
  size-adjust: 105.6%;
  ascent-override: 140.135842%;
  descent-override: 62.517545%;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src:
    local('Montserrat bold'),
    local('montserrat-v14-latin-700'),
    url(get($localFontUrls, 'montserrat')) format('woff2');
  font-display: swap;
}

.weightmans-viewport {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  dt {
    font-size: inherit;
    font-weight: inherit;
    text-rendering: optimizeLegibility;
    text-wrap: balance;
  }
  .styled {
    line-height: 1;
    font-family: 'The Mix', the-mix-fallback, math;
    color: var(--app-color-primary);
    font-weight: 500;
  }
  .strong {
    font-weight: 600;
  }
  .step-0 {
    font-size: var(--step-0);
  }
  .step-1 {
    font-size: var(--step-1);
  }
  .step-2 {
    font-size: var(--step-2);
  }
  .step-3 {
    font-size: var(--step-3);
  }
  .step-4 {
    font-size: var(--step-4);
  }
  .step-5 {
    font-size: var(--step-5);
  }
}